GroundworkCSS 是一个基于 Sass 预处理器的开源项目 ，主要用于快速构建响应式 Web 应用程序。拥有一个灵活的、可嵌套的网格系统，可以创建适应多种浏览设备的布局。 Groundwork 还提供多种 UI 组件，如导航、按钮、图标、表单、Tabs、对话框、工具提示等等。 转自：http://www.oschina.net/p/groundworkcss
View Details响应式Web设计是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说，这种设计概念，就是让原本1292像素宽，4栏的内容，能够很好地显示在1025像素宽的用户屏幕上，同时还能自动简化成2栏。当然，让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”。 响应式Web设计与传统的设计方式截然不同，开发人员（特别是新手）必须要理解它的优势和弊端。这篇文章正是为大家揭示一些实例的。（这里介绍一个叫“Media Queries”的网站，里面介绍了更多实例和演示） 数据表格是响应式Web设计的经典使用情景，实现它的想法与传统的设计理念有很大不同。数据表格默认很宽，当你要查看它全貌时，你得缩小表格，但这时字会变 的很小，很难去阅读。然而当你想看清楚上面的字时，就不得不再把表格放大，这时要查看完整表格就得横滚加纵滚。这么阅读表格也太KB了。或许重新格式化表格或以饼图形式展现是种解决方案。再不然，你可以弄一个迷你图，即使在窄屏幕里它也能适应。 响应式Web设计中的图像以流式图像为主，可以被上下文感知的图像所替代，这是一种更好的设计方式。这种技术的真正意义在于，能够让图像适应不同的屏幕分辨率，更大的或更小的。所以它与传统设计的理念和技术都有很大不同，合理使用会让你的网页化腐朽为神奇。 Mountain Dew 访问网站 AXT 访问网站 Rbma Radio 访问网站 Lotta Nieminen 访问网站 Berger & Fohr 访问网站 Cropp 访问网站 Stink Digital 访问网站 Hair Project 访问网站 Atlanta Ballet 访问网站 Google Cultural Institute 访问网站 Build Windows 访问网站 Enochs 访问网站 From The Front 访问网站 Sweet Hat Club 访问网站 Oliver Russel 访问网站 United Pixelworkers 访问网站 dConstruct 2012 访问网站 Food Sense 访问网站 Andersson-Wise Architecture 访问网站 TeeGallery 访问网站 Lynn and Tonic 访问网站 8Faces 访问网站 Sleepstreet 访问网站 ConvergeSE 2012 访问网站 Iwantedrock 访问网站 Abberdein 访问网站 Inspire Conference 访问网站 Design Week Portland 访问网站 […]
View DetailsTrueType （.ttf） Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。EOT – Embedded Open Type （.eot） 嵌入字体格式（EOT）是微软开发的一种技术，允许 OpenType 字体嵌入到网页并可以下载至浏览器渲染，浏览器根据 CSS 中 @font-face 的定义，下载，渲染这种 .EOT 后缀的字体文件。这些文件只在当前页活动的状态下，临时安装在用户的系统中。OpenType （.otf） OpenType是一种可缩放字型（scalable font）电脑字体类型，采用PostScript格式，是美国微软公司与Adobe公司联合开发，用来替代TrueType字型的新字型。这类字体的文件扩展名为.otf，类型代码是OTTO，现行标准为OpenType 1.4。OpenType最初发表于1996年，并在2000年之后出现大量字体。它源于微软公司的TrueType Open字型，TrueType Open字型又源于TrueType字型。OpenType font包括了Adobe CID-Keyed font技术。Adobe公司已经在2002年末将其字体库全部改用OpenType格式。WOFF – Web Open Font Format （.woff） 相对于 TrueType 和 OpenType ，WOFF（Web开发字体格式）是一种专门为了 Web 而设计的字体格式标准，它并不复杂，实际上只是对于 TrueType / OpenType 等字体格式的封装，并针对网络使用加以优化：每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输，并且不包含任何加密或者 DRM 措施。包括 Adobe、 Lino Type、Monotype 在内的几乎所有主要的字体供应商都加入到支持 WOFF 的行列中来SVG （Scalable Vector Graphics） Fonts （.svg） 顾名思义，就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体.svgz。SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG可以使你设计的网页可以更加精彩细致，使用简单的文本命令，SVG可实现色彩线性变化、路径、自定义字体、透明效果、滤镜效果等各式常见的图形图像效果。 字体格式转换工具 EOTFast 用于把TTF文件转为EOT格式。Microsoft WEFT 微软提供的字体格式转换工具。ttf2eot可以转换TTF文件为EOT格式。FontForge 把OTF文件转为TTF格 在线的转换工具 http://ttf2eot.sebastiankippe.com http://www.cuvou.com/wizards/ttf2eot.cgi http://onlinefontconverter.com/ 浏览器兼容性一览 使用CSS3的@font-face属性可以实现在网页中嵌入任意字体（其实IE4就支持这个属性了，后来这个属性加入到了CSS3中），但是IE只支持微软自有的EOT格式字体，而其他浏览器都不支持这一字体格式，其它浏览器可以设置TTF（TrueType）和OTF（OpenType）两种字体作为自定义字体
View Details不换行 white-space:nowrap; 自动换行 word-wrap: break-word; word-break: normal; 强制英文单词断行 word-break:break-all;
View Details刚好看到有这么一篇文章，翻译过来给需要的人看看，同时也给自己看看。 body{ color:red; //所有浏览器 color:yellow\9; //IE8及以下 *color:blue; //IE7及以下 _color:gray; //IE6 } 值得注意的是\9是针对IE8及以下版本（未测试是否包含IE6以下版本),而如果是color:orange/0;把9换成0就是只针对IE8的hack了。 同时还要注意，条件注释(conditional comments)是一种更好的hack方式。 <!–[if IE 6]> body{ color:green; //IE6 } <![endif]–> 本文翻译自http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/ 并做细微修改。 http://http://www.ediyang.com/how-to-target-ie6-ie7-and-ie8/
View DetailsJquery.KinSlideshow参数设置说明： 附：所有参数列表 intervalTime:5, //设置间隔时间为5秒 【单位：秒】 [默认为5秒] moveSpeedTime:400 //切换一张图片所需时间，【单位：毫秒】[默认为400毫秒] moveStyle:”left”, //切换方向 可选值：【 left | right | up | down 】 //left:向左切换,right:向右切换,up:向上切换,down:向下切换 [默认向左切换] mouseEvent:”mouseclick”, //鼠标操作按钮事件,可选值：【mouseclick | mouseover】 //mouseclick：鼠标单击切换。mouseover：鼠标滑过切换。[默认为鼠标点击按钮切换] isHasTitleBar:true, //是否显示标题背景 可选值：【 true | false 】[默认为true] titleBar:{titleBar_height:40,titleBar_bgColor:”#000000″,titleBar_alpha:0.5}, //标题背景样式，(isHasTitleBar = true 前提下启用) titleBar_height :40 – > 标题背景高度。[默认：40] titleBar_bgColor:”#000000″ – > 标题背景颜色。[默认：#000000] titleBar_alpha:0.5 -> 标题背景透明度，取值【0~1】。[默认：0.5] isHasTitleFont:true, //是否显示标题文字 可选值：【 true | false 】[默认为true] titleFont:{TitleFont_size:12,TitleFont_color:”#FFFFFF”,TitleFont_family:”Verdana”,TitleFont_weight:”bold”}, //标题文字样式，(isHasTitleFont = true 前提下启用) TitleFont_size – > 标题文字大小 单位像素。[默认：12] TitleFont_color:”#FFFFFF” – > 标题文字颜色。[默认：#000000] TitleFont_family:”Verdana” -> 标题文字字体。[默认：Verdana] TitleFont_weight:”bold” -> 标题文字粗细。 //可选值：【 bold | normal 】[默认："bold"] ,normal 正常 不加粗。 isHasBtn:true, //是否显示按钮 btn:{btn_bgColor:”#666666″,btn_bgHoverColor:”#CC0000″, btn_fontColor:”#CCCCCC”,btn_fontHoverColor:”#000000″,btn_fontFamily:”Verdana”, btn_borderColor:”#999999″,btn_borderHoverColor:”#FF0000″, btn_borderWidth:1,btn_bgAlpha:0.7} //按钮样式设置，(isHasBtn = true 前提下启用) btn_bgColor:”#666666″ -> 按钮背景颜色 [默认："#666666"]。 btn_bgHoverColor:”#CC0000″ -> 按钮滑过/点击 背景颜色 [默认："#CC0000"]。 btn_fontColor:”#CCCCCC” -> 按钮文字颜色 [默认："#CCCCCC"]。 btn_fontHoverColor:”#000000″ -> 按钮滑过/点击 按钮文字颜色 [默认："#000000"]。 btn_fontFamily:”Verdana”, -> 按钮文字字体 [默认："Verdana"]。 btn_borderColor:”#999999″ -> 按钮边框颜色 [默认："#999999"]。 btn_borderHoverColor:”#FF0000″ -> 按钮滑过/点击 按钮边框颜色 [默认："#FF0000"]。 btn_borderWidth:1 -> 按钮边框宽度，单位像素不能超过3 [默认：1]。 btn_bgAlpha:0.7 -> 按钮透明度 ，取值【0~1】 [默认：0.7]。 【多项复合】参数调用说明 $(function(){ $(“#KinSlideshow”).KinSlideshow({ titleFont:{TitleFont_size:14,TitleFont_color:”#FF0000″} //设置标题文字大小为14px，颜色：#FF0000 【titleFont 其他未设置的 使用默认参数设置】 }); }) 转自：http://blog.sina.com.cn/s/blog_4f4f4a5901014zn1.html
View Detailsjavascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3、N2 鼠标点击时触发此事件 ondblclick IE4、N4 鼠标双击时触发此事件 onmousedown IE4、N4 按下鼠标时触发此事件 onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4、N4 鼠标移动时触发此事件 onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件 onkeypress IE4、N4 当键盘上的某个键被按下并且释放时触发此事件. onkeydown IE4、N4 当键盘上某个按键被按下时触发此事件 onkeyup IE4、N4 当键盘上某个按键被按放开时触发此事件 页面相关事件 onabort IE4、N3 图片在下载时被用户中断 onbeforeunload IE4、N 当前页面的内容将要被改变时触发此事件 onerror IE4、N3 出现错误时触发此事件 onload IE3、N2 页面内容完成时触发此事件 onmove IE、N4 浏览器的窗口被移动时触发此事件 onresize IE4、N4 当浏览器的窗口大小被改变时触发此事件 onscroll IE4、N 浏览器的滚动条位置发生变化时触发此事件 onstop IE5、N 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断 onunload IE3、N2 当前页面将被改变时触发此事件 表单相关事件 onblur IE3、N2 当前元素失去焦点时触发此事件 onchange IE3、N2 当前元素失去焦点并且元素的内容发生改变而触发此事件 onfocus IE3 、N2 当某个元素获得焦点时触发此事件 onreset IE4 、N3 当表单中RESET的属性被激发时触发此事件 onsubmit IE3 、N2 一个表单被递交时触发此事件 滚动字幕事件 onbounce IE4、N 在Marquee内的内容移动至Marquee显示范围之外时触发此事件 onfinish IE4、N 当Marquee元素完成需要显示的内容后触发此事件 onstart […]
View Details一、【文件(F)】菜单中的命令的实现 1、〖打开〗命令的实现 [格式]:document.execCommand(“open”) [说明]这跟VB等编程设计中的webbrowser控件中的命令有些相似，大家也可依此琢磨琢磨。 [举例]在<body></body>之间加入： 打开 2、〖使用 记事本 编辑〗命令的实现 [格式]:location.replace(“view-source:”+location) [说明]打开记事本，在记事本中显示该网页的源代码。 [举例]在<body></body>之间加入： 使用 记事本 编辑 3、〖另存为〗命令的实现 [格式]:document.execCommand(“saveAs”) [说明]将该网页保存到本地盘的其它目录！ [举例]在<body></body>之间加入： 另存为 4、〖打印〗命令的实现 [格式]:document.execCommand(“print”) [说明]当然，你必须装了打印机！ [举例]在<body></body>之间加入： 打印 5、〖关闭〗命令的实现 [格式]:window.close();return false [说明]将关闭本窗口。 [举例]在<body></body>之间加入： 关闭本窗口 二、【编辑(E)】菜单中的命令的实现 〖全选〗命令的实现 [格式]:document.execCommand(“selectAll”) [说明]将选种网页中的全部内容！ [举例]在<body></body>之间加入： 全选 三、【查看(V)】菜单中的命令的实现 1、〖刷新〗命令的实现 [格式]:location.reload() 或 history.go(0) [说明]浏览器重新打开本页。 [举例]在<body></body>之间加入： 刷新 或加入:刷新 2、〖源文件〗命令的实现 [格式]:location.replace(“view-source:”+location) [说明]查看该网页的源代码。 [举例]在<body></body>之间加入： 查看源文件 3、〖全屏显示〗命令的实现 [格式]:window.open(document.location,”url”,”fullscreen”) [说明]全屏显示本页。 [举例]在<body></body>之间加入： 全屏显示 四、【收藏(A)】菜单中的命令的实现 1、〖添加到收藏夹〗命令的实现 [格式]:window.external.AddFavorite(‘url’, ‘“网站名”) [说明]将本页添加到收藏夹。 [举例]在<body></body>之间加入： 添加到收藏夹 2、〖整理收藏夹〗命令的实现 [格式]:window.external.showBrowserUI(“OrganizeFavorites”,null) [说明]打开整理收藏夹对话框。 [举例]在<body></body>之间加入： 整理收藏夹 五、【工具(T)】菜单中的命令的实现 〖internet选项〗命令的实现 [格式]:window.external.showBrowserUI(“PrivacySettings”,null) [说明]打开internet选项对话框。 [举例]在<body></body>之间加入： internet选项 六、【工具栏】中的命令的实现 1、〖前进〗命令的实现 [格式]history.go(1) 或 history.forward() [说明]浏览器打开后一个页面。 [举例]在<body></body>之间加入： 前进 或加入:前进 2、〖后退〗命令的实现 [格式]:history.go(-1) 或 history.back() [说明]浏览器返回上一个已浏览的页面。 [举例]在<body></body>之间加入： 后退 或加入:后退 3、〖刷新〗命令的实现 [格式]:document.reload() 或 history.go(0) [说明]浏览器重新打开本页。 [举例]在<body></body>之间加入： 刷新 或加入:刷新 七、其它命令的实现 〖定时关闭本窗口〗命令的实现 […]
View Details一、showModalDialog和showModelessDialog有什么不同？ showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。 showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。:P) 二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口？ 在被打开的网页里加上<base target=”_self”>就可以了。这句话一般是放在<html>和<body>之间的。 三、怎样才刷新showModalDialog和showModelessDialog里的内容？ 在showModalDialog和showModelessDialog里是不能按F5刷新的，又不能弹出菜单。这个只能依靠javascript了，以下是相关代码： <body onkeydown=”if (event.keyCode==116){reload.click()}”> <a id=”reload” href=”filename.htm” style=”display:none”>reload…</a> 将filename.htm替换成网页的名字然后将它放到你打开的网页里，按F5就可以刷新了，注意，这个要配合<base target=”_self”>使用，不然你按下F5会弹出新窗口的。 四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。 <input type=”button” value=”关闭” onclick=”window.close()”> 也要配合<base target=”_self”>，不然会打开一个新的IE窗口，然后再关掉的。 五、showModalDialog和showModelessDialog数据传递技巧。 (作者语：本来想用一问一答形式来写的，但是我想不出这个怎么问，所以只好这样了。) 这个东西比较麻烦，我改了好几次了不是没办法说明白(语文水平越来越差了)，只好用个例子说明了。 例子： 现在需要在一个showModalDialog(或showModelessDialog)里读取或设置一个变量var_name 一般的传递方式： window.showModalDialog(“filename.htm”,var_name) //传递var_name变量 在showModalDialog(或showModelessDialog)读取和设置时： alert(window.dialogArguments)//读取var_name变量 window.dialogArguments=”oyiboy”//设置var_name变量 这种方式是可以满足的，但是当你想在操作var_name同时再操作第二个变理var_id时呢？就无法再进行操作了。这就是这种传递方式的局限性。 以下是我建议使用的传递方式： window.showModalDialog(“filename.htm”,window) //不管要操作什么变量，只直传递主窗口的window对象 在showModalDialog(或showModelessDialog)读取和设置时： alert(window.dialogArguments.var_name)//读取var_name变量 window.dialogArguments.var_name=”oyiboy”//设置var_name变量 同时我也可以操作var_id变量 alert(window.dialogArguments.var_id)//读取var_id变量 window.dialogArguments.var_id=”001″//设置var_id变量 同样还可以对主窗口的任何对象进行操作，如form对象里的元素。 window.dialogArguments.form1.index1.value=”这是在设置index1元素的值” 六、多个showModelessDialog的相互操作。 因为光说很费劲，我就偷点懒，直接用代码来说了，如果不明白的话那就直接来信(oyiboy#163.net(使用时请将#改成@))问我吧。 以下代码的主要作用是在一个showModelessDialog里移动别一个showModelessDialog的位置。 主文件的部份js代码。 var s1=showModelessDialog(”控制.htm”,window,”dialogTop:1px;dialogLeft:1px”） //打开控制窗口 var s2=showModelessDialog(”about:blank”,window,”dialogTop:200px;dialogLeft:300px”） //打开被控制窗口 控制.htm的部份代码。 <script> //操作位置数据，因为窗口的位置数据是”xxxpx”方式的，所以需要这样的一个特殊操作函数。 function countNumber(A_strNumber,A_strWhatdo) { A_strNumber=A_strNumber.replace(”px”,””) A_strNumber-=0 switch(A_strWhatdo) { case “-”:A_strNumber-=10;break; case “+”:A_strNumber+=10;break; } return A_strNumber + “px” } </script> <input type=”button” onclick=”window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,”-”)” value=”上移”> <input type=”button” onclick=”window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,”-”)” value=”左移”> <input type=”button” onclick=”window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,”+”)” value=”右移”> <input type=”button” onclick=”window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,”+”)” value=”下移”> 以上关键部份是： 窗口命名方式：var s1=showModelessDialog(”控制.htm”,window,”dialogTop:1px;dialogLeft:1px”） 变量访问方式：window.dialogArguments.s2.dialogTop 这个例子只是现实showModelessDialog与showModelessDialog之间的位置操作功能，通过这个原理，在showModelessDialog之间相互控制各自的显示页面，传递变量和数据等。这要看各位的发挥了
View Details