飞龙博客

飞龙博客 飞龙在天

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

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

飞龙提示:本文是怎样写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 教程

新作:

旧文:

blog money bui 教程 echarts 教程 eclipse 教程 html css 教程 IT趋势 js 教程 json 教程 mysql 教程 nodejs npm 教程 onblog SQLite 教程 tutorials vscode 教程 wap网站 winpe启动盘 wordpress 主机推荐 书法 前端开发 博客 名企名网 国学 域名注册 常用软件 建站程序 操作系统 教程 数码 无线上网 日记 电子商务 电脑笔记本 网站 网站优化 网站开发 网站推广 网站策划 网络 虚拟现实 默认