使用div+css布局网页综合案例2——心灵小站(适用于高级教学)

作者(出处):Lary发布时间:2016年11月26日 20:46:24查阅量:710

【准备站点环境】

1、新建一个站点,将素材拷贝到站点中使用。新建一个网页,把网页的标题设置为“心灵小站首页”,将其保存为index.html。

2、针对<body>标签新建一个CSS样式,把上、下、左、右的边界设置为0px。

【制作logo栏】

3、插入一个div标签,设置div的id为logo。

(1)选中id为logo的div标签,新建一个CSS样式。设置宽度为1000px,上、下边界为0px,左、右边界为自动。

(2)选中“此处显示 id "logo" 的内容”并将其删除,然后在div中插入对应的图片index_01.gif,并设置替换文本为logo。

【制作导航菜单】

4、在id为logo的div末尾插入一个div标签,设置div的id为menu。

(1)选中id为menu的div标签,新建一个CSS样式。设置宽度为1000px,高度为38px,上、下边界为0px,左、右边界为自动;设置背景图像为index_03.gif。

(2)选中“此处显示 id "menu" 的内容”并将其删除,然后在div中插入对应的图片index_05.gif。

(3)选中图片index_05.gif,新建一个CSS样式。设置浮动方式为右对齐。

(4)应用图片热区超链接的知识,对各个菜单制作空链接。

【制作本站公告、最新素材、最新模版、最新日记模块】

5、建立HTML结构。

(1)在id为menu的div末尾插入一个div标签,设置div的类为main。

(2)选中“此处显示  class "main" 的内容”,然后单击“插入Div标签”按钮,插入一个类为com的div标签。

(3)在class为com的div标签末尾插入一个类为pic的div标签。这个div标签用来制作最新靓照模块。

(4)将class为com的div标签中的“此处显示  class "main" 的内容”删除掉,然后按两次回车键打出一行空行。在空行中输入文字“本站公告”,选中“本站公告”将其设置为标题1。

(5)在标题1的末尾换行,然后插入一对ul标签,这时光标会在ul标签中。直接按两次回车键打出一行空行出来,在空行中继续插入一对li标签,然后复制这对li标签。在li标签的末尾换行,粘贴4次,然后选中所有的li标签,将其缩进。得到的HTML结构代码如下所示:

<div class="main">

  <div class="com">

  <h1>本站公告</h1>

  <ul>

 <li></li>

 <li></li>

 <li></li>

 <li></li>

 <li></li>

  </ul>

  </div>

  <div class="pic">此处显示  class "pic" 的内容</div>

</div>

(6)复制以上main部分的HTML代码,在</body>标签前面粘贴,把“本站公告”修改为“最新素材”。

(7)复制com部分的HTML代码,然后在刚刚粘贴的代码中把pic所在的div标签删除,接着把刚刚复制com部分的代码粘贴两次,把标题改为“最新模版”和“最新日记”。将最新日记的com改为com2。

(8)往各个模块的li标签中输入对应的文字内容,并把日期用span标签括起来。

6、建立CSS样式。

(1)对class为main的div标签新建CSS样式,设置宽度为1000px,上边界为8px,左、右边界为自动。

(2)对class为com的div标签新建CSS样式,设置宽度为280px,浮动方式为左对齐,右边界为8px,边框为1px的实线、线条颜色为#333333。

(3)对h1标签新建CSS样式,在选择器中把“.com”删除掉(为什么要删掉?)。未删除之前为“.main .com h1”,删除之后变为“.main h1”。设置文字大小为18px、行高为34px、文字颜色为黑色,背景图像为index_09.gif,文字缩进9px,边界设置为0px。

(4)对ul标签新建CSS样式,在选择器中把“.com”删除掉。未删除之前为“.main .com ul”,删除之后变为“.main ul”。设置文字大小为12px、行高为28px、文字颜色自定,把填充和边界设置为0px。

(5)对li标签新建CSS样式,在选择器中把“.com”删除掉。未删除之前为“.main .com li”,删除之后变为“.main li”。设置文字缩进18px(缩进一个半字),把列表的类型设置为无。

(6)在本站公告的所有li标签中增加class="tb1"属性,tb1用来控制文字前面的黑色小图标。对tb1新建CSS样式,设置背景图像为article_arrow2.gif、不重复、水平位置9px。

(7)在最新素材、最新模版、最新日记几个模块的所有li标签中增加class="tb2"属性,tb2用来控制文字前面的橙色小图标。对tb2新建CSS样式,设置背景图像为article_arrow1.gif、不重复、水平位置8px。

(8)在需要显示虚线下边框的li标签中增加bk属性,对bk属性新建CSS样式。设置下边框为1px的虚线,线条颜色为#CCCCCC。

(9)对span标签新建CSS样式,设置文字颜色为#CCCCCC,浮动方式为右对齐,右边界为8px。

(10)对class为com2的div标签新建CSS样式,设置宽度为418px,浮动方式为右对齐,边框为1px的实线、线条颜色为#333333。

(11)在第一个main的末尾插入一个类为clear的div标签。这个div标签用来清除浮动,对clear新建CSS样式,设置清除为两者。

【制作最新靓照模块】

7、建立HTML结构。

(1)选中“此处显示  class "pic" 的内容”并将其删除,然后按两次回车键打出一行空行。在空行中输入文字“最新靓照”,选中“最新靓照”将其设置为标题1。这时会自动应用之前写好的h1样式。

(2)在标题1的末尾插入一个类为pics的div标签,这个标签用来控制水平的6张图片。在该div中插入对应的图片。

(3)在class为pics的div标签末尾插入一个类为pictxt的div标签,这个标签用来控制图片对应的文字说明。在该div标签中分别输入6对div标签,然后在每对div标签中输入对应的文字。

8、建立CSS样式。

(1)选择class为pic的div标签新建CSS样式。设置宽度为708px,浮动方式为右对齐,边框为1px的实线、线条颜色为#333333。

(2)选择pics中的图片标签新建CSS样式。设置上、下边界为8px,左边界为27px、右边界为0px。

(3)对div标签新建CSS样式,设置文字大小为12px、行高18px、文字颜色为#666666、文字居中对齐,宽度为105px,浮动方式为左对齐,下边界为5px,左边界为10px。

【制作版权信息模块】

9、在第二个class为main的div末尾插入一个类为clear的div标签。这个div标签用来清除浮动。

10、在class为clear的div末尾插入一个id为foot的div标签。在该div标签中插入两个id为foot1和foot2的div标签。在foot1的div插入图片index_14.gif,在foot2的div插入图片index_13.gif。

11、对foot新建样式,设置宽度为1000px,上边界为8px,左、右边界为自动。对foot1新建样式,设置宽度为334px,浮动方式为左对齐,上边填充50px。对foot2新建样式,设置宽度为666px,浮动方式为右对齐。

12、保存所有操作,用不同的浏览器来预览效果。

百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2018
点击这里给我发消息