<![CDATA[代码人生]]> http://www.code-life.com/index.php zh-cn http://www.code-life.com/read.php?101 <![CDATA[[转]CSS网页布局编码标准及最佳实践]]> xudongding <xudongding@yahoo.com.cn> Mon, 01 Jun 2009 03:05:29 +0000 http://www.code-life.com/read.php?101 http://www.52css.com/)

　　CSS用来定义网站的用户界面，并实现页面展现与内容的分离。CSS在几乎所有的网站都会用到，我们在52CSS.com大量的教程中，全方面的对CSS网页布局进行了介绍。下面让我们花些精力来确保你CSS网页布局编码是否标准、合理。这些提示对CSS初学者同样会有很大的帮助。

一、样式表索引
　　样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息，它一般是一段格式化的CSS注释文本。
　　给出该css文件作者的相关信息
　　定义站点的布局（几栏，静态布局/动态布局）
　　记录文件版本号（利于多作者协作及将来更新）

点击在新窗口中浏览此图片
http://www.code-life.com/attachment.php?fid=71


二、命名锚点
　　命名锚点是用来规划整个CSS文件结构的（就好像书签一样），从而使整个CSS文件获得良好的组织。
　　命名锚点一般也是书写在样式表头部的索引注释中。CSS本身没有内部的锚点系统，所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点，并在整个文档中查找，从而获取该CSS节。（描述的可能不清晰，看下面图应该就明白了）

点击在新窗口中浏览此图片
http://www.code-life.com/attachment.php?fid=72


三、避免多余Class定义
　　很多人（尤其是新手）在书写CSS中会定义不必要的Class来样式化一些元素。
　　其实CSS的一个优雅之处在于它的上下文选择符（即子选择器和相邻同胞选择器），如下：

点击在新窗口中浏览此图片
http://www.code-life.com/attachment.php?fid=73


四、合适的命名
　　为class定义一个准确清晰的类名十分关键，它有助于你更好更快的理解CSS定义，不至于混淆。

点击在新窗口中浏览此图片
http://www.code-life.com/attachment.php?fid=74


五、合适的命名
　　在CSS中经常会利用缩写把多个相同类型的属性定义指定为一个。
　　CSS缩写会使CSS文档更加干净、简洁。下面是几个例子：

点击在新窗口中浏览此图片
http://www.code-life.com/attachment.php?fid=75


六、CSS图像拼合(即CSS Sprites技术)
　　CSS Sprites技术：将用到的所有背景图片合并为一张图片，使用css背景属性，来控制图片的显示位置和方式。
　　CSS Sprites技术的应用可以大大减少HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。
　　苹果官方网站的菜单设计是CSS Sprites技术应用非常好的案例：

点击在新窗口中浏览此图片
http://www.code-life.com/attachment.php?fid=76


七、特殊性
　　即使在不太复杂的样式表中，也可能有两个或更多规则寻找同一元素，CSS通过选择符特殊性来决定规则的次序。
　　简而言之，每个CSS选择符都会分配一个权重。将规则的每个选择器的值加在一起，就可以计算出规则的特殊性。CSS特殊性的使用在大型CSS文件中会很有帮助。
　　CSS特殊性在CSS中是比较大的一块内容，很难用几句话描述清楚，下面是几个示例：

点击在新窗口中浏览此图片
http://www.code-life.com/attachment.php?fid=77


八、CSS Reset(CSS重置，偶个人叫它CSS初始化)
　　CSS Reset用于确保网站在不同浏览器中能够获得相同的展示效果。不同的浏览器有一套自己的初始默认设置，最终导致不同的UI展现。CSS重置就是用来解决这个问题，使你能在不同浏览器展现一致的基础上构建站点。
　　我们可能不会要求你一定去使用某个CSS框架，但是希望能书写CSS Reset。我们可以在网上找到不少书写好的CSS Reset样例。

点击在新窗口中浏览此图片
http://www.code-life.com/attachment.php?fid=78


九、CSS Hacks
　　可以说再完美的CSS也无法在所有浏览器中获得一致的展现，这是因为不同的浏览器给予你的CSS不同的解释。如果想要网站在不同的浏览器显示一致，你不得不使用CSS Hacks。

点击在新窗口中浏览此图片
http://www.code-life.com/attachment.php?fid=79

　　不过使用CSS Hack往往会导致CSS验证出现错误，一个替代的解决方案是为不同的浏览器书写不同的CSS，然后在html中使用条件语句引用它们。

十、CSS验证
　　当你书写完一个CSS文件，对它进行验证是十分必要的。它可以确保书写的CSS没有错误，并且在所有浏览器中正确的展示。
　　W3C网站验证是用来验证CSS的常用工具。

点击在新窗口中浏览此图片
http://www.code-life.com/attachment.php?fid=80

Tags - , ]]> http://www.code-life.com/read.php?24 <![CDATA[CSS中布局DIV高度自适应的方法]]> xudongding <xudongding@yahoo.com.cn> Wed, 05 Mar 2008 02:52:37 +0000 http://www.code-life.com/read.php?24
目前收集了一种方法，在实际应用中证实有效果，使用时注意理解下面的分析。

html,body{
     margin:0px;
     height:100%;
}

#left {
     background-color:#CCC;
     width:300px;
     height:100%;
     float:left;
}


     代码已经到了不能再简单的地步，对#left对象设置了height:100%;，然而也能够看见，同时设置了HTML与body的height:100%;，而这个就是高度自适应问题的关键所在。

分析：
     一个对象高度是否可以使用百分比显示，取决于对象的父级对象，#left在页面中直接旋转在body之中，因此它的父级是body，而浏览器默认状态下，是没有给body一个高度属性的，因此当我们直接设置#left为height:100%;时，不会产生任何效果，而当我们给body设置了100%之后，它的子级对象#left的height:100%;便发生作用了，这便是浏览器解析规则引发的高度自适应问题。而代码中除了给body应用之外，还给HTML对象也应用相同的样式设计，这样做的好处是使IE与firefox浏览器都能够实现高度自适应，而body却不是。另外，Firefox中的HTML标签不是100%高度，因此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示。
Tags - , ]]> http://www.code-life.com/read.php?19 <![CDATA[网页版式的基本类型]]> xudongding <xudongding@yahoo.com.cn> Tue, 04 Mar 2008 06:34:48 +0000 http://www.code-life.com/read.php?19
    1.骨骼型  

　　网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。

    2.满版型  

　　页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。  

    3.分割型  

　　把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。可以调整图片和文案所占的面积，来调节对比的强弱。例如：如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。
  
    4.中轴型

　　沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。

    5.曲线型  

　　图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。

    6.倾斜型  

　　页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目。

    7.对称型  

　　对称的页面给人稳定、严谨、庄重、理性的感受。  

　　对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见。  

　　四角型也是对称型的一种，是在页面四角安排相应的视觉元素。四个角是页面的边界点，重要性不可低估。在四个角安排的任何内容都能产生安定感。控制好页面的四个角，也就控制了页面的空间。越是凌乱的页面，越要注意对四个角的控制。  

    8.焦点型  

    焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。焦点型分三种情况。

    （1）中心　以对比强烈的图片或文字置于页面的视觉中心。  
    （2）向心　视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。  
    （3）离心　视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。  

    9.三角型  

　　网页各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。

    10.自由型  

　　自由型的页面具有活泼、轻快的风格。  
Tags - ]]>