随笔分类 -  css

摘要：clip属性是一个比较有用的属性，但往往在实际应用中，并不多见，而52CSS.com介绍的也很少。应用clip属性需要注意的两点： 一、clip属性必须和定位属性postion一起使用才能生效。 二、clip裁切的计算坐标都是以左上角即（0,0）点开始计算，如图三所示，这点不像padding和margin，它们两个的右边距和下边距是从最右边和最下边开始计算的。clip属性基础语法： Example Source Code [www.52css.com]clip:auto|rect(numbernumbernumbernumber)取值：auto:　默认值。对象无剪切rect(numbern.. 阅读全文

摘要：在前几天的文章中，我们讨论过书写高效CSS注意的七个方面。今天我们在52CSS.com和大家讨论如何书写可维护的CSS代码？ 一、在样式表开头添加一个注释块，用以描述这个样式表的创建日期、创建者、标记等备注信息。 Example Source Code [www.52css.com]/*---------------------------------Site:SitenameAuthor:52CSS.comUpdated:DateandtimeUpdatedby:Name---------------------------------*/ 二、包括公用颜色标记 Example Sour.. 阅读全文

摘要：字体使用是网页设计中不可或缺的一部分。网页是文字的载体，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的时候就有可能看不到真实的设计。 美工设计师最常做的办法是把想要的文字做成图片，这样做有几个明显缺陷： 一、不可能大范围的使用该字体； 二、图片内容相对使用文字不易修改； 三、不利于网站SEO。 网络上有一些使用sIFR技术、或javascript/flashhack的方法，但实现起来或繁琐，或有缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。 首先 获取要使用字体的三种文件格式，确保能在主流浏览... 阅读全文

摘要：随着CSS网页布局越来越普及，国内大部分网站已经采用CSS网页布局的制作方法，现在52CSS.com也成为了CSS网页布局技术学习的先锋站点。在应用DIV+CSS编码时很容易犯一些错误，这里列举一些常见的错误，帮助新手朋友更好的学习与进步。 一、检查HTML元素是否有拼写错误是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 二、检查CSS是否正确 检查一下有无拼写错误、是否忘记结尾的}等。可以利用CleanCSS来检查CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 三、确定错误发生的... 阅读全文

摘要：规范目的 为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不合适的地方请及时提出,经讨论决定后方可更改.基本准则 符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.文件规范 1.html,css,js,images文件均归档至<系统开发规范>约定的目录中; 2.html文件命名:英文命名,后缀.htm.同时将对应界面稿放于同目录中,若界面稿命名为中文,请重命名与ht 阅读全文

摘要：什么是Haslayout？ 顾名思义，它的意思就是 --- has layout，是IE下的特有属性，通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout，在 IE Developer Toolbar 下，拥有 haslayout的元素，通常显示为“haslayout = -1”。 hasLayout是一种只读属性，有两种状态 true/false,当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。 什么时候表明Haslayout = false? IE浏览器下的很多bug都是haslayout =... 阅读全文

摘要：点评：CSS图片垂直居中问题，困扰了我许久，今天终于可以总结下来了-方法一：利用定位 HTML结构如： 复制代码代码如下:<div class="box"> <a class="pic-wrap" href="#" target="_blank"> <img src="http://img01.taobaocdn.com/tps/i1/T1LeeNXodaXXXXXXXX-130-150.png"> </a> </div> CSS代码如 阅读全文

摘要：1、display:inline-block让一个元素具有“区块元素”的属性（可以设置width和height），又具有“内联元素”的属性（不产生换行）。2、IE中的inline-blockIE6不支持这个属性，但IE8开始支持这个属性。让IE6内联元素具备inline-block特性由于inline-block会触发IE的layout，所以IE6中只要设置{display:inline-block;}即可。让IE6区块元素具备inline-block属性，有两种方法A、可以先触发layout，再设置为inline，需要注意的是这两个display必须在两个CSS声明中才有效，代码如下：复制代 阅读全文

摘要：而使用DIV+CSS的布局方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。下面为大家介绍几点注意事项，希望能有所帮助：1、不要使用过小的图片做背景平铺。 这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。 2、无边框。 推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。 3、慎用 * 通配符。 所谓通配符，就是将 CSS 中的所有标签均初始化 阅读全文

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

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

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

摘要：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 阅读全文

摘要：尽量少使用类,因为可以层叠识别,如: .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 阅读全文

摘要：最近制作下拉菜单时，打算用纯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. 阅读全文

摘要：区别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 阅读全文

摘要：*: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 {……} 阅读全文