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

摘要： 从页面开始布局设计初就考虑到各个浏览器的问题，留出充足的余量和给各个浏览器留出充足的发挥空间，这样的页面兼容性才是最好的。 下面就来几个问题： 1、div border不能显示 问题描述：用一个div A层中间放了几个div B来存放内容，因为内容是不固定的，于是就使用了对B层使用了float，让A层自适应高度，后面对A层加上边框，在ie中能显示，但是在firefox中就始终没法显示。 问题分析：B层使用了float，位置浮起，A层边框不能显示 解决方案：对A开始使用一个浮动清除<div style="clear:both"></div> 2、cms 阅读全文

摘要： 其实Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。Zoom的使用方法：zoom : normal | numbernormal : 默认值。使用对象的实际尺寸number : 百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数，可以是数值，也可以是百分比。如：zoom:1，zoom:120%。而这个属性只要在IE中才起作用，所以很少用到它的实.. 阅读全文

摘要： 1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset： 复制代码代码如下:*{ margin:0; padding:0; } 这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。 在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同，Reset并不是一成不变的，具体还需要根据项目的不同需求做适当的修改，以达到浏览器的兼容和操作上的便利性。我使用的Reset如下:复制代码代码如下:/** 清 阅读全文

摘要： 什么是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代码如 阅读全文