图2-1 “精品文摘”网页
该“精品文摘”网页的设计步骤如下。
1构建网页结构,先用div标记设置container容器,然后分别用div标记将页面分为header和main两部分,代码如下所示:
body
div class="container"
div class="header"
img src="imagesbg.jpg"
div
div class="main"
div class="lanmu"
div class="headline"img class="c" src="imagesbg1.gif"div
div class="content1"
h3散文随笔h3
ul class="topic"
li[生活感悟] 晴,----简单生活,感受美好,期待明天li
li[生活感悟] 多年后,我们或许会嫁给这样的他 li
li[生活感悟] 从今以后,试着做个这样的人li
li[生活感悟] 人最大的不幸,就是不知道自己是幸福的li
li[生活感悟] 人生至境是不争 恬静出尘心自宁 li
li[生活感悟] 没有如意的生活,只有看开的人生li
ul
p class="more"a href="#"更多内容ap
div
div
div class="lanmu"
div class="headline"img class="c" src="imagesbg1.gif"div
div class="content2"
h3散文随笔h3
ul class="topic"
li[生活感悟] 晴,----简单生活,感受美好,期待明天li
li[生活感悟] 多年后,我们或许会嫁给这样的他 li
li[生活感悟] 从今以后,试着做个这样的人li
li[生活感悟] 人最大的不幸,就是不知道自己是幸福的li
li[生活感悟] 人生至境是不争 恬静出尘心自宁 li
li[生活感悟] 没有如意的生活,只有看开的人生li
ul
p class="more"a href="#"更多内容ap
div
div
div
body
在整体的container框架下,页面分为header和main两部分。在header下,定义了img标记,用于设置banner图片。在main下,又分为4部分,分别定义了4个栏目。在lanmu中定义了每个栏目的具体内容,如图2-2所示。