使用div+css布局网页综合案例3——中国保利集团主页完美版(适用于高级教学)

作者(出处):Lary发布时间:2017年7月23日 15:44:04查阅量:824

一、准备站点环境

(1)新建一个站点,将素材拷贝到站点中使用。新建一个网页,将其保存为index.html。

(2)对body标签新建样式,设置背景图片,设置上下边界为0、左右边界为自动。

二、logo和menu栏

1、构建logo和menu栏的HTML结构

(1)插入一个div标签,id为top。

(2)在top里面继续插入一个div标签,类为logo,然后删除div中的文字,再插入图片logo.gif。

(3)在logo末尾插入一个类为kb的div标签,删除kb中的文字。

(4)在kb末尾插入一个类为menu的div标签,删除menu中的文字。

(5)在menu里面插入一个类为item的div标签,删除item中的文字,然后复制这个标签,在这个标签的下面粘贴8次得到8个这样的标签。分别在这9个标签中输入导航菜单的名称。

(6)对各个菜单名称做空链接。

2、设置logo和menu栏的CSS样式

(1)对top新建样式,设置宽度为960px、高度为54px即logo图片的高度,设置上下边界为0、左右边界为自动。

(2)对logo新建样式,设置浮动方式为左对齐。

(3)对kb新建样式,设置宽度为730px、高度为14px,浮动方式为左对齐。设置背景颜色为黑色。

(4)对menu新建样式,设置宽度为730px、高度为40px,浮动方式为左对齐。设置背景颜色为白色。

(5)对item新建样式,设置宽度为80px、高度为40px,浮动方式为左对齐。设置文字大小为15px、行高为32px。设置文本对齐方式为居中对齐。

(6)对任意一个a标签新建样式,设置文字颜色为黑色,无下划线;显示为块。设置上边界为4px、右边界为4px(可以测试这4px的效果)。

(7)对任意一个a标签建立激活样式,设置文字颜色为白色,背景颜色为#CC0000。

(8)在“新闻中心”的a标签中增加属性class="selected",对selected建立样式,设置文字颜色为白色,背景颜色为#CC0000。

三、banner栏

在id为top的div末尾插入一个id为banner的div标签。删除标签中的文字,然后插入图片banner.gif。 对banner新建样式,设置宽度为960px,设置上下边界为0、左右边界为自动。

四、主体栏

1、对主体栏布局并制作通用标题

(1)在banner末尾插入一个id为main的div标签,删除标签中的文字。

(2)在main中分别插入类为tpxw、jtxw、jtgk的div标签,然后在对应的div标签中输入栏目标题,将栏目标签设置为标题1。

(3)对main新建样式,设置宽度960px、高度248px,设置上下边界为0、左右边界为自动。设置背景颜色为白色。

(4)对tpxw新建样式,设置宽度310px、高度248px,左浮动。设置背景图片为imgbg.gif并且不重复、水平位置5px、垂直位置42px。

(5)对jtxw新建样式,设置宽度360px、左浮动、左边界10px。

(6)对jtgk新建样式,设置宽度270px、左浮动、左边界10px。

(7)对h1标签建立全局样式,设置文字大小为18px、行高为36px、文字颜色为黑色。设置背景图片为ico5.gif并且不重复、水平位置6px、垂直位置10px。文字缩进26px(为什么一定要设置为26px)。设置下边框为2px的实线,线条颜色为#CC0000。设置上下边界为0。

2、制作图片新闻模块

(1)在<h1>图片新闻</h1>末尾插入图片20110716.jpg。

(2)对img标签建立样式,设置宽度为288px、高度为188px,设置上边界10px、左边界10px。

3、制作集团新闻模块

(1)在<h1>集团新闻</h1>末尾插入ul标签,在ul标签中插入8对li标签。把对应的新闻标题粘贴到li标签中。对各个新闻标题做空链接。

(2)在每个标签末尾输入,然后把日期粘贴到span标签中。

(3)对ul标签新建样式,设置填充为0、边界为0。设置填充和边界为0可以让ul标签距离上边界和左边界为0距离,不然就会在左边留有很大的空白,或者在上边留有很大空白。

(4)对li标签新建样式,设置文字大小12px、行高25px、文字颜色为黑色。设置列表类型为无。设置下边框为灰色的1px虚线。设置背景图片为ico1.gif并且不重复、水平位置2px。设置文字缩进14px。

(5)对span标签新建样式,设置文字颜色为深灰色,右浮动、右边界4px。

(6)对任意一个a标签新建样式,设置文字颜色为黑色、无下划线。

(7)对任意一个a标签建立激活样式,设置文字颜色为#CC0000、有下划线。

4、制作集团概况模块

(1)在<h1>集团概况</h1>末尾插入图片company.jpg,然后在图片标签末尾粘贴素材提供的文字。

(2)对img标签新建样式,设置宽度150px、高度200px、上边界5px、右边界5px。

(3)编辑jtgk样式,设置文字大小为12px、行高为15px。

五、项目展示栏

1、构建HTML结构

(1)在id为main的div末尾插入一个id为xmzs的div标签,删除标签中的文字。

(2)在xmzs中输入“项目展示”并设置为标题1。这时会自动应用之前设置好的标题样式。

(3)在<h1>项目展示</h1>末尾插入5个类为tp的div标签,然后在标签中插入对应的图片。

2、设置CSS样式

(1)对xmzs新建样式,设置背景颜色为白色,设置宽度960px、高度247px(247是如何得来的?),上下边界为0、左右边界为自动。

(2)对tp新建样式,设置宽度192px(192是怎样计算得来的?)、高度205px(205是如何得来的?)、浮动方式为左对齐。

(3)对img标签新建样式,设置宽度170px、高度185px,上边界10px、左边界10px。

六、制作版权栏

1、构建HTML结构

(1)在xmzs的末尾插入一个id为foot的div标签,删除标签中的文字。

(2)在标签中插入水平线。

(3)粘贴文字,并将文字设置为标题2,注意文字要换行。

2、设置CSS样式

(1)对foot新建样式,设置宽度960px、高度60px、上下边界为0、左右边界为自动。设置背景颜色为白色。

(2)对hr新建样式,设置边框为1px实线、线条颜色为#CC0000。设置边界为0。

(3)对h2新建样式,设置文字大小12px、文字颜色为黑色,居中对齐。

七、测试效果

注意用各个主流的浏览器测试最终效果。如果效果有出入,请完善CSS样式即可。


本案例所使用的素材请联系QQ 1617818397 索取。


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