随笔档案「2012年7月13日」：CSS文件可维护、可读性提高指南第2/2页 ... - 爱上某人

CSS文件可维护、可读性提高指南第2/2页

摘要：三、格式化CSS属性当我们编写代码的时候，使用一些特殊的编码风格会对提高CSS代码的可读性有很大帮助。许多人都有各自不同的编码风格。一部分人习惯于将颜色和字体的代码放在前面，另外一部分则更喜欢将类似浮动和定位的更“重要”的属性放在前面。类似的，也可以将页面元素按照它在布局中的结构进行排序：body, h1, h2, h3, p, ul, li, form { margin: 0; padding: 0; border: 0; } 一些开发者用一种更为有意思的方法：他们将属性按首字母的顺序排列。值得注意的是，这样一种方法可能对某些浏览器会产生问题。不管自己的格式如何，你要确保你已经清晰的定义了这阅读全文

posted @ 2012-07-13 23:58 爱上某人阅读(131) 评论(0) 推荐(0)

css display:none使用注意事项小结

摘要： 1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。2、使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。3、如果是通过样式文件或<style>css</style>方式来设置元素的display:none样式，用阅读全文

posted @ 2012-07-13 23:55 爱上某人阅读(257) 评论(0) 推荐(0)

html 的 ContentType 小结

摘要： ContentTypes : "ez","application/andrew-inset" ContentTypes : "hqx","application/mac-binhex40" ContentTypes : "cpt","application/mac-compactpro" ContentTypes : "doc","application/msword" ContentTypes : "bin",&q 阅读全文

posted @ 2012-07-13 23:54 爱上某人阅读(185) 评论(0) 推荐(0)

Chrome的hack写法以及CSS的支持程度图示

摘要： body:nth-of-type(1) p{ color: #333333; } 详细出处参考：http://www.jb51.net/article/15853.htm 阅读全文

posted @ 2012-07-13 23:52 爱上某人阅读(142) 评论(0) 推荐(0)

让超出DIV宽度范围的文字自动显示省略号...

摘要： div.titleholder { font-family: ms sans serif, arial; font-size: 8pt; width: 100; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 详细出处参考：http://www.jb51.net/article/16206.htm 阅读全文

posted @ 2012-07-13 23:46 爱上某人阅读(120) 评论(0) 推荐(0)

CSS使用学习总结

摘要：尽量少使用类,因为可以层叠识别,如: .News h3而不必在h3上加类 <div class=”News”> <h3></h3> <h2></h2> <p></p> </div> 3. 没有现有元素区分的情况下再用div <div id=”mainNav”> <ul> <li>Home</li> <li>About Us</li> </ul> </div> 可以改为 <ul id=”mainNav 阅读全文

posted @ 2012-07-13 23:45 爱上某人阅读(119) 评论(0) 推荐(0)

IE hack条件写法

摘要：最近制作下拉菜单时，打算用纯CSS，忽又看到令人头痛的CSS hack代码（平时很少关注），记录下来以作备用。<!–[if lte IE 6]>………….<![endif]–>Ite：less than or equal to意思是小于或等于IE6浏览器，用于IE浏览器的条件注释，常用于CSShack，针对IE的JS等。以下是各种情况，未验证。1. <!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–> 2. <!–[if IE]> 所有的IE可识别 <![endif]–> 3. 阅读全文

posted @ 2012-07-13 23:42 爱上某人阅读(134) 评论(0) 推荐(0)

div+CSS 兼容小摘

摘要：区别IE6与FF： background:orange;*background:blue; 区别IE6与IE7： background:green !important;background:blue; 区别IE7与FF： background:orange; *background:green; 区别FF，IE7，IE6： background:orange;*background:green !important;*background:blue; IE7,IE8兼容: <meta http-equiv="X-UA-Compatible" content=&quo 阅读全文

posted @ 2012-07-13 23:41 爱上某人阅读(138) 评论(0) 推荐(0)

CSS Hack 汇总快查

摘要： *:lang(zh) select {font:12px !important;} /*FF的专用*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。仅IE7识别 *+html {…} 当面临需要只针对IE7做样式的时候就可以采用这个HACK。 IE6及IE6以下识别 * html {…} 这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 html/**/ >body select {……} 阅读全文

posted @ 2012-07-13 23:39 爱上某人阅读(108) 评论(0) 推荐(0)

javascript代码规范小结

摘要： 1. Javascript代码应符合Douban-JSLint检验标准1-1. 语句必须都有分号结尾，除了for, function, if, switch, try, while1-2. 只有长语句可以考虑断行，如：TEMPL_SONGLIST.replace('{TABLE}', da['results']) .replace('{PREV_NUM}', prev) .replace('{NEXT_NUM}', next) .replace('{CURRENT_NUM}', current) .replace( 阅读全文

posted @ 2012-07-13 23:38 爱上某人阅读(135) 评论(0) 推荐(0)

基于jquery ajax 用户无刷新登录方法详解

摘要： Ajax框架就是提供模块化实现Ajax功能的集合，Ajax框架可以是各种语言实现的（比如SAJAX有各种语言的实现），Ajax只是jquery中的一部分,实例1 复制代码代码如下:$.ajax({ type:'post',//可选get url:'action.php',//这里是接收数据的PHP程序 data:'data='dsa',//传给PHP的数据，多个参数用&连接 dataType:'text',//服务器返回的数据类型可选XML ,Json jsonp script html text等 succe 阅读全文

posted @ 2012-07-13 23:36 爱上某人阅读(180) 评论(0) 推荐(0)

jQuery 过滤not()与filter()实例代码

摘要：第一种写法: 复制代码代码如下:$(function(){ $("li").not(":even").css("color","red"); $("li").filter(":odd").css("color","red"); }) 第二种写法：复制代码代码如下:$(function(){ $("li").filter(function(index) { return index%2 == 0; }).css( 阅读全文

posted @ 2012-07-13 23:35 爱上某人阅读(166) 评论(0) 推荐(0)

jquery命令汇总,方便使用jquery的朋友

摘要：选择器实例选取* $("*") 所有元素#id $("#lastname") id="lastname" 的元素.class $(".intro") 所有 class="intro" 的元素element $("p") 所有 <p> 元素.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素:first $("p:f 阅读全文

posted @ 2012-07-13 23:32 爱上某人阅读(116) 评论(0) 推荐(0)

jquery 实现表单验证功能代码(简洁)

摘要： html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证页面</title> <link href="../Scripts/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <script src="../Scripts/jquery-1.4.1.min.js" type="text/j 阅读全文

posted @ 2012-07-13 23:31 爱上某人阅读(250) 评论(0) 推荐(0)

jQuery $.get 的妙用访问本地文本文件

摘要：场景: 当页面文件.html作为本地文件打开(即IE路径为file:///开头的)的时候，需要访问本地文本文件的内容时。本地文件目录在页面文件的子文件夹。目录结构 |-test.html |-Scripts |-data.txt 需要访问data.txt的内容。代码: 复制代码代码如下:$.get('Scripts/data.txt').success(function(content){ // content就为文件data.txt的文本内容了,注意txt文件的编码需要与html文件的编码一致，最好保存成utf-8 }); 详细出处参考：http://www.jb51 阅读全文

posted @ 2012-07-13 23:28 爱上某人阅读(293) 评论(0) 推荐(0)