飞龙博客

善人行善,从乐入乐。

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

feilong.org 修订于2017-06-06 03:24:47 924

飞龙提示:本文是怎样写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页面布局框架”,你也许会大致明白:

<div class="head">这是网页头部</div>
<div class="midsection">
<div class="torso">这是页面主体内容</div>
<div class="hand">这是页面辅助内容</div>
</div>
<div class="foot">这是网页尾部</div>

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

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

<div class="header">这是网页头部</div>
<div class="wrapper">
<div class="content">这是页面主体内容</div>
<div class="sidebar">这是页面辅助内容</div>
</div>
<div class="footer">这是网页尾部</div>

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

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

<div class="top">这是网页头部</div>
<div class="middle">
<div class="left">这是页面主体内容</div>
<div class="right">这是页面辅助内容</div>
</div>
<div class="bottom">这是网页头部</div>

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

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

(二)文字标题列表模块

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

<div class="listtxt">
<h3><a href="http://feilong.org">文字标题列表模块带参数</a> <span><a href="http://feilong.org">更多</a></span></h3>
<ul>
<li><span>¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
<li><span>¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
<li><span>¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
<li><span>¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
<li><span>¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
</ul>
<!--listtxt --></div>

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

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

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

<div class="wai">
<div class="shang">
<div class="biaoti"><a href="http://feilong.org">文字标题列表模块</a></div>
<div class="gengduo"><a href="http://feilong.org">更多</a></div>
</div>
<div class="xia">
<ul>
<li><span class="canshu">¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
<li><span class="canshu">¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
<li><span class="canshu">¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
<li><span class="canshu">¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
<li><span class="canshu">¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
</ul>
<!-- nei --></div>
<!--wai --></div>

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

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

<h3 class="title"><a href="http://feilong.org">文字标题列表模块</a> <span><a href="http://feilong.org">更多</a></span></h3>
<ul class="txtlist">
<li><span>¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
<li><span>¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
<li><span>¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
<li><span>¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
<li><span>¥3000</span> <a href="http://feilong.org/contact">网页制作也要勤摸索十飞龙博客为你解忧二十</a></li>
</ul>

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

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

<div class="txtlist">
<h3>文字标题列表模块不带参数 <span><a href="http://feilong.org">更多</a></span></h3>
<ul>
<li><a href="http://feilong.org">网页制作短标题八飞龙博客为你解忧十八</a></li>
<li><a href="http://feilong.org">网页制作短标题八飞龙博客为你解忧十八</a></li>
<li><a href="http://feilong.org">网页制作短标题八飞龙博客为你解忧十八</a></li>
<li><a href="http://feilong.org">网页制作短标题八飞龙博客为你解忧十八</a></li>
<li><a href="http://feilong.org">网页制作短标题八飞龙博客为你解忧十八</a></li>
</ul>
<!--listtxt --></div>

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

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

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

所在分类: 前端开发

新作:

旧文:

飞龙前端QQ群 智能锁咨询交流