页面布局框架和文字标题模块写法
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、飞龙再举一个语义化“文字标题列表模块”的例子。
文字标题列表模块带参数 更多
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
上面是飞龙用到的文字标题列表模块,带1个额外参数。同时限定字数20字以内,多余的用css隐藏掉或直接php代码截取掉。这个xhml结构的好处是,只有一个class,表明是一个文字标题列表listtxt,而其它都是原生态语义化标签,css选择器全部由 .listtxt 派生,模块形成一个有机整体。即使不用任何css,你也可预览效果。
你也可以把 span 和 a 之间的空格去掉改用css的padding或margin来修饰,那样显得外观和结构分离更彻底,但是没有css情况下不利于阅读。
2、刚学网页制作的同学也许会这样写文字标题模块:
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
上面的写法,飞龙觉得结构上来说没什么问题。但它只用到div ul li span,没用h3(h3的语义就是标题)。预览下两种做法的区别?
最大不足是,div 和 class 太多,没有充分利用“派生选择器”,导致xhml代码看上去复杂,不利于阅读。
3、有的朋友喜欢更简单的写法:
文字标题列表模块 更多
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
- ¥3000 网页制作也要勤摸索十飞龙博客为你解忧二十
看上去一个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 教程