使用div+css布局网页综合案例1——中国保利集团(适用于进阶教学)

作者(出处):Lary发布时间:2016年4月28日 21:27:35查阅量:872

【准备站点环境】

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

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

【制作logo栏】

3、插入一div标签,把ID设置为top。对id为top的div新建一个样式,设置背景颜色为白色,设置高度为54px(因为logo的高度是54px)、宽度为960px,上、下边界为0px,左、右边界为自动。

(1)删除“此处显示  id "top" 的内容”的文字,然后插入一个div标签,设置ID为logo。把视图方式切换到代码视图,在id为logo的div末尾插入一个div标签,设置ID为right。

(2)对id为logo的div新建一个样式,设置宽度为230px(思考:为什么要设置为230px?),浮动为左对齐。删除div中的文字,然后插入图片logo.gif。

(3)对id为right的div新建一个样式,设置宽度为730px(思考:为什么要设置为730px?),浮动为左对齐(也可以设置为右对齐)。删除div中的文字,接着插入两个div标签,把第一个div的id设置为kb,把第二个div的id设置为menu。

(4)对id为kb的div新建一个样式,设置背景颜色为黑色、高度为8px。删除div中的文字。

【制作导航菜单】

(5)把id为menu的div中的文字删除掉,然后插入无序列表标签,会生成这样的代码:“<ul></ul>”,接着插入li标签,会生成这样的代码:<li></li>。复制“<li></li>”标签,然后在</li>标签的末尾粘贴8次,在每对<li></li>标签中输入菜单名称,输入菜单名称后变成“<li>首页</li>”。

(6)对各个菜单设置空链接。

(7)对id为menu的div标签新建样式,设置高度为36px。

(8)对ul标签新建样式,设置高度为36px,上边界为6px,左边界为0px。

(9)对任意一个li标签新建样式,设置文本对齐方式为居中;设置宽度为80px,浮动为左对齐,左边填充0px,左边界设置为-5px;设置列表的类型为无。

(10)选中菜单中的任意一个<a>标签,然后新建一个CSS样式。设置字体为宋体,文字大小为14px,行高为36px,文字颜色为黑色,无下划线,上下填充为0px,左右填充为8px,右边界为8px(可以自己测试这8px的效果)。显示为块。

(11)在菜单“集团概况”的<a>标签增加属性class="selected",然后选中该属性新建一个CSS样式。设置文字颜色为白色,背景颜色为#CC0000。

(12)再次选中菜单中的任意一个<a>标签,然后新建一个CSS样式。这次要把“选择器”文本框的值“#top #right #menu a”剪切掉,然后单击文本框的下拉三角形,在下拉列表中选择“a:hover”,接着把“a:hover”中的a替换为刚刚剪切掉的内容,替换后可以看到形如“#top #right #menu a:hover”的内容,这时单击确定即可。设置文字颜色为白色,背景颜色为#CC0000。

【制作banner栏】

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

【制作主体部分】

5、在id为banner的div末尾插入一个div标签,设置div的id为main,然后对main新建样式。设置宽度为960px,设置上下边界为0px、左右的边界为自动;背景颜色为白色。

(1)把id为main的div中的文字删除掉,然后插入三个div标签,第一个div的class为tpxw;第二个div的class为jtxw;第三个div的class为gsjj。

(2)对id为tpxw的div新建样式,设置宽度为310px,浮动为左对齐,设置背景颜色为白色,背景图像为imgbg.gif、不重复、水平位置为4px、垂直位置为42px。对id为jtxw的div新建样式,设置宽度为370px,浮动为左对齐,背景颜色为白色。对id为gsjj的div新建样式,设置宽度为280px,浮动为左对齐(也可以设置为右对齐),背景颜色为白色。

(3)把三个div中的文字删除掉,接着分别输入标题“图片新闻”、“集团新闻”、“公司简介”,然后分别设置为标题1。

【设置标题1的样式】(一次把三个标题的样式设置好)

(4)单击“图片新闻”所在的<h1>标签,然后新建CSS样式。在“选择器”的文本框会默认显示“#main .tpxw h1”,把h1前面的“.tpxw”删除掉,删除后显示为“#main h1”就对了。设置文字大小为15px,行高为25px;设置背景图像为ico5.gif、不重复、水平位置为6px、垂直位置为3px;左边填充25px、左边界为6px、宽度为88%;下边框为实线、2px、线条颜色为#CC0000。

【主体一:图片新闻】

(5)在</h1>标签末尾插入图片20110716114749_22.jpg。单击选中图片,新建样式。设置图片的宽度为288px,高度为188px;下边填充12px,上边界为0px、左边界为10px。

【主体二:集团新闻】

(6)在</h1>标签的末尾插入一个无序列表,会生成这样的代码:“<ul></ul>”,接着插入li标签,会生成这样的代码:<li></li>。复制“<li></li>”标签,然后在</li>标签的末尾粘贴7次,在每对<li></li>标签中输入对应的文字内容。把日期使用<span></span>标签括起来。完成以上操作后看到的代码应该像下面这样:

<div class="jtxw">
  <h1>集团新闻</h1>
  <ul>
	  <li>郑州市委书记连维良一行视察郑州保利百合项目<span>[2012-11-17]</span></li>
	  <li>中国保利集团副总经理国强一行视察浙江公司<span>[2012-11-16]</span></li>
	  <li>保利集团总经理张振高一行视察辽宁公司<span>[2012-11-16]</span></li>
	  <li>中国保利集团董事长陈洪生视察成都公司<span>[2012-10-31]</span></li>
	  <li>国资委监事会主席时希平一行赴武汉公司视察<span>[2012-10-31]</span></li>
	  <li>海心沙相约宋祖英 保利和乐中国完美落幕<span>[2012-10-17]</span></li>
	  <li>保利地产荣获“2011中国房地产行业领导公司<span>[2012-09-14]</span></li>
	  <li>国资委监事会主席时希平一行赴武汉公司视察<span>[2012-10-31]</span></li>
  </ul>
</div>


(7)对ul标签新建样式,设置上边界为-8px、下边界为8px、左边界为-10px(负号表示标签往容器外面溢出)。

(8)对li标签新建样式,设置文字大小为12px,行高24px,文字颜色为黑色;设置宽度为360px,左边填充0px,左边界为-25px;列表的类型为无,项目符号图像为ico1.gif,位置为内;下边框为虚线、1px、灰色线条。

(9)对span标签新建样式,设置浮动为右对齐,右边界为4px。

【主体三:公司简介】

(10)在</h1>标签的末尾插入图片company.jpg,接着在图片的末尾输入文字内容。

(11)单击图片,然后新建样式。设置宽度为143px、高度为198px、浮动方式为右对齐。

(12)对class为gsjj的div新建CSS样式。设置文字大小为12px,行高为18px。

【主体四:项目展示】

6、在class为gsjj的div末尾插入一个div标签,设置class为clear。对clear新建一个CSS样式,设置清除为两者。这个div的作用就是清除浮动,不然后面的div无法正确排列(或者挤在一起,或者飞出一边去)。

7、在class为clear的末尾插入一个div标签,设置id为pic。对id为pic的div标签新建一个CSS样式。设置宽度为960px,上、下边界为0px,左、右边界为自动。

(1)删除掉“此处显示  id "pic" 的内容”文本内容,然后输入“项目展示”,把“项目展示”设置为标题1。在</h1>标签的末尾按顺序插入对应的5张图片。

(2)选中pic里面的h1标签,新建一个CSS样式。设置文字大小为15px、行高25px;设置背景图片为ico5.gif、不重复、水平位置为6px、垂直位置为3px;左边填充25px、宽度为96%、左边界6px,下边框为实线、2px、边框颜色为#CC0000。

(3)选中pic里面的图片标签,新建一个CSS样式。设置图片的宽度为170px、高度为185px;左边界为13px,背景颜色为白色。

(4)修改pic的样式,设置上边界为-10px,上边填充10px。

【制作版权信息栏】

8、在id为main的div末尾插入一个div标签,设置div的id为footer。

(1)在div中输入文字“版权信息:正大软件学院.软件技术系所有”,并设置为段落。

(2)接着输入“2010-2020”,并设置为段落。

(3)选中footer,新建样式。设置宽度为960px,上、下边界为0px,左、右边界为自动,背景颜色为白色,上边框为实线、1px、黑色线条。

(4)为了使黑色线条离上面的5张图片远一点,需要编辑pic的样式,设置下边填充18px。

(5)选中p标签,新建样式。设置文字大小为12px,行高为18px,文字对齐方式为居中,上、下边界为0px,上边填充12px。

9、保存全部操作,预览网页效果。


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


百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2018
点击这里给我发消息  
若本文对您有帮助,请扫码打赏,您的赞助就是最好的动力