飞龙博客

妙法莲华经

页面布局框架和文字标题模块写法

feilong.org 修订于2021-01-22 12:19:34 358 次浏览

飞龙提示：本文是怎样写css效率最高之第一课。

学些写css是网页设计和制作的基础之一，它很大程度上实现了网页结构、外观、特效、内容这4个层次的分离。怎么样写css才能效率最高呢？飞龙总结自己多年来的摸爬滚打，用3句话来概括：用最优雅的css结构、用最简洁的css声明、最少的css hack浏览器兼容。本日志飞龙举例谈谈页面布局框架和文字标题模块写法，让大家领会下怎样写css效率最高，更新网址：http://feilong.org/best-css-frame-txt-list 飞龙第2次修订于20101008 ，希望对您有用!

第一课、如何用最优雅的css结构？

一、达到最优雅的css结构的最基本观念。

1、初学css的朋友都知道，css样式按其存放的位置有外链、内联、内嵌这3种。以外链为主，不提倡内嵌。

对于单个网页来说，我们可以就用内联方式。这种文件飞龙一般用来写一些网页结构模块的演示，比如导航条、搜索模块、登录模块。
但是如果是一个多网页结构的站点，我们必须用到外链css样式表，以保证网页共同的css调用，节省大量的文件体积，极大提高css修改的效率。
而偶尔我们才用到内嵌css，比如我们没有css样式修改的权限，或者只是临时的看看某个样式修饰后的效果。

2、css只是外观，因此写css之前，我们必须写好优雅的xhml结构，尽量达到没css修饰，外观也离我们预想的不远。

古人说，皮之不存，毛将焉附。飞龙这里改一下，骨之不存、肉将焉附。xhml代码结构就是网页骨架，而css样式相当于网页肉身。
但是不要一想到外观我们就用全用css来实现。其实没有css修饰的xhml结构，本身就有一种外观。
各种xhml标签都有默认css样式，各种浏览器对每个xhml标签默认css值也不完全一样。这导致写好了xhml结构，各个浏览器之间会有细微差别的外观。我们这时候想：这些外观离我们预想的外观远吗？
因此，飞龙感觉xhml结构就相当于人体，而css不过衣服罢了。因此我们进一步比喻：人之不存，衣将焉附？

3、明白了css和xhml之间以上的两种关系，我们才谈得上写优雅的css结构。

4、何为优雅？语义化的xhml结构基础上的语义化css声明。下面细谈。

二、什么是语义化的xhml结构？举例说明。

先了解下：CSS 语法由三部分构成：选择器、属性和值：selector {property:value}

（一）xhml页面布局框架

1、看看下面的拟人手法的“xhml页面布局框架”，你也许会大致明白：

这是网页头部




这是页面主体内容


这是页面辅助内容




这是网页尾部

可见，语义化是针对对象而言，而不是外观。

2、大家公认标准称呼的写法是这样的：

这是网页头部




这是页面主体内容


这是页面辅助内容




这是网页尾部

对于主体内容，我们只有调试content的样式就可以，左右浮动随意调节，不用再修改xhml结构了。

3、刚开始学网页的朋友也许会这么写：

这是网页头部




这是页面主体内容


这是页面辅助内容




这是网页头部

top、middle、left、right、bottom，它们本身是css值，不应作为拿来当css选择器来组织xhml的结构。

如果我想把主体内容换到右边，是不是还得做手术把left和right对调?

（二）文字标题列表模块

1、飞龙再举一个语义化“文字标题列表模块”的例子。



文字标题列表模块带参数 更多

上面是飞龙用到的文字标题列表模块，带1个额外参数。同时限定字数20字以内，多余的用css隐藏掉或直接php代码截取掉。这个xhml结构的好处是，只有一个class，表明是一个文字标题列表listtxt，而其它都是原生态语义化标签，css选择器全部由 .listtxt 派生，模块形成一个有机整体。即使不用任何css，你也可预览效果。

你也可以把 span 和 a 之间的空格去掉改用css的padding或margin来修饰，那样显得外观和结构分离更彻底，但是没有css情况下不利于阅读。

2、刚学网页制作的同学也许会这样写文字标题模块：





文字标题列表模块


更多

上面的写法，飞龙觉得结构上来说没什么问题。但它只用到div ul li span，没用h3（h3的语义就是标题）。预览下两种做法的区别？
最大不足是，div 和 class 太多，没有充分利用“派生选择器”，导致xhml代码看上去复杂，不利于阅读。

3、有的朋友喜欢更简单的写法：

文字标题列表模块 更多

看上去一个div都没有。模块的外围也被拿掉，只剩下h3 ul li span，也就是标题（title）和列表（txtlist），外观包括模块外围的间隔全部交给css处理。
这样写未尝不可，但是如果需要把模块拷贝到另外一个地方，你需要复制粘贴两次。也就是说，模块“身首异处”，title和txtlist两个选择器也没有固定关系，缺乏整体感，不利于阅读。

4、补充一个“简单的文字标题模块写法”



文字标题列表模块不带参数 更多

这个文字标题列表模块不带参数，一般做短标题列表，所以字数限制更少，模块名称不用再加链接。

更新网址：https://feilong.org/best-css-frame-txt-list
最初发布：20170408 02:22:43 feilong.org 于广州

加入收藏夹，查看更方便。

所在分类： html css 教程

新作：

旧文：