您的位置：首页 > Web前端 > CSS

HTML+CSS初学者练习项目4：利用DIV+CSS制作《互联世纪网》

2019-04-16 17:46 921 查看

适合初学者练习的HTML项目：利用DIV+CSS制作制作一个《互联世纪网》网页。

需要掌握内容：

HTML+CSS第八课：使用CSS布局网页——网页中块级元素与行内元素、盒子模型的理解

HTML+CSS第九课：使用CSS布局网页——盒子的定位、浮动和浮动塌陷及解决办法

知识点：

1、DIV盒子模型

2、DIV布局、CSS属性的使用

3、浮动属性的使用

4、浮动塌陷的解决办法

制作思路：

1、分析效果图，将这个网页拆分成四大部分：数字1/2/3/4，分别代表4个部分的div板块

2、分析每个部分的构成。

实现步骤：

第一步：按照标准要求，在DW软件中新建站点，并经图片文件提前存到站点文件里，然后再站点中新建HTML文件。

第二步：按照分析好的框架，先在body里写4对div标签。

第三步：写头部div里的具体内容

[code]<!--头部div-->
<div id="tou"><!--头部div里面可以看成有两个小div，左边div放图片，右边div放导航-->
<!--左边div，添加logo图片-->
<div class="tou-zuo"><img src="images/logo.gif" /></div>
<!--右边div，用ul标签来写网址导航-->
<div class="tou-you">
<ul>
<li><img src="images/sy.gif" /><a href="#">本站首页</a></li>
<li><img src="images/sy.gif" /><a href="#">本站首页</a></li>
<li><img src="images/sy.gif" /><a href="#">本站首页</a></li>
</ul>
</div>
</div>

第四步：给头部内容添加CSS样式

[code]/*头部CSS样式*/
#tou { height:43px; width:960px; margin:10px auto;}
.tou-zuo { float:left;}
.tou-you { float:right;}
.tou-you ul li { float:left; list-style-type:none; margin-left:20px;}

第五步：只在第二个div，先写具体内容（大框架）

[code]<!--文字div，第二个-->
<div id="div2">
<!--第二个大div里有3个div，2-1div用来放文字内容-->
<div class="div2-1">
<p>我们一直在努力......</p>
<p>作为专业的互联网络应用服务提供者，我们对“诚信的服务”的认识正随着我们的理念完善、产品成熟、市场拓展的每一步而日益深刻。我们在一直积极拓展与客户的关系。成立以来，我们已经为众多的客户提供全面的、优秀的、成熟一体化的解决方案，以及贴身的支持和服务。
我们相们，“诚信的服务”必然是商业体系的趋势。在这样的广泛和高质量的服务中，我们不仅最大地满足直至超越客户的期望，还能够利用各自的资源，发掘更多的商机、共赢市场。
</p>
<p>2014</p>
<p>We Try......</p>
</div>
<!--第二个大div里有3个div，2-2div用来放数字：2014-->
<div class="div2-2">2014</div>
<!--第二个大div里有3个div，2-3div没有内容，只在样式里指定高度，给个背景颜色即可-->
<div class="div2-3"></div>
</div>

第六步：添加CSS样式

[code]/*第二个div样式*/
#div2 { margin:0px auto; width:960px; height:330px; background-color:#066;}
.div2-1,.div2-2 { float:left; height:300px; color:#FFF;}
.div2-3 { background-color:#999; width:960px; height:30px; float:left;}
.div2-1 { width:60%; line-height:150%; text-indent:2em; padding-left:2%;}
.div2-2 { width:30%; margin-left:5%
4000
; padding-right:3%; font:130px "黑体"; line-height:300px;}

第七步：制作第三个大的div

第八步：添加CSS样式

/*第三个div样式*/
#div3 { width:960px; margin:10px auto;}

第九步：制作第四个div

[code]<!--列表div，第4个-->
<div id="div4">
<div>
<p class="tu1"><img src="images/tc_tit_1.jpg" /></p>
<ul>
<li>1个cn的英文域名 100元/年 </li>
<li>100M 单线虚拟主机　650元/年</li>
<li>5个各10M 企业邮箱　150元/年</li>
</ul>
<p class="tu2"><img src="images/btn_reg.jpg" /></p>
</div>
<div>
<p class="tu1"><img src="images/tc_tit_1.jpg" /></p>
<ul>
<li>1个cn的英文域名 100元/年 </li>
<li>100M 单线虚拟主机　650元/年</li>
<li>5个各10M 企业邮箱　150元/年</li>
</ul>
<p class="tu2"><img src="images/btn_reg.jpg" /></p>
</div>
<div>
<p class="tu1"><img src="images/tc_tit_1.jpg" /></p>
<ul>
<li>1个cn的英文域名 100元/年 </li>
<li>100M 单线虚拟主机　650元/年</li>
<li>5个各10M 企业邮箱　150元/年</li>
</ul>
<p class="tu2"><img src="images/btn_reg.jpg" /></p>
</div>
</div>

第十步：添加CSS样式

[code]/*第四个div样式*/
#div4 { width:960px; margin:10px auto; overflow:hidden;}
#div4 div { border:1px #999 double; float:left; margin-right:20px; width:31%; text-align:center;}
.tu2 { text-align:right; margin-right:20px; }
#div4 ul { text-align:left;}
#div4 ul li { list-style-image:url(images/btop.gif);}

完整代码：

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*头部CSS样式*/
#tou { height:43px; width:960px; margin:10px auto;}
.tou-zuo { float:left;}
.tou-you { float:right;}
.tou-you ul li { float:left; list-style-type:none; margin-left:20px;}

/*第二个div样式*/
#div2 { margin:0px auto; width:960px; height:330px; background-color:#066;}
.div2-1,.div2-2 { float:left; height:300px; color:#FFF;}
.div2-3 { background-color:#999; width:960px; height:30px; float:left;}
.div2-1 { width:60%; line-height:150%; text-indent:2em; padding-left:2%;}
.div2-2 { width:30%; margin-left:5%; padding-right:3%; font:130px "黑体"; line-height:300px;}

/*第三个div样式*/
#div3 { width:960px; margin:10px auto;}

/*第四个div样式*/
#div4 { width:960px; margin:10px auto; overflow:hidden;}
#div4 div { border:1px #999 double; float:left; margin-right:20px; width:31%; text-align:center;}
.tu2 { text-align:right; margin-right:20px; }
#div4 ul { text-align:left;}
#div4 ul li { list-style-image:url(images/btop.gif);}

</style>
</head>

<body>
<!--头部div-->
<div id="tou"><!--头部div里面可以看成有两个小div，左边div放图片，右边div放导航-->
<!--左边div，添加logo图片-->
<div class="tou-zuo"><img src="images/logo.gif" /></div>
<!--右边div，用ul标签来写网址导航-->
<div class="tou-you">
<ul>
<li><img src="images/sy.gif" /><a href="#">本站首页</a></li>
<li><img src="images/sy.gif" /><a href="#">本站首页</a></li>
<li><img src="images/sy.gif" /><a href="#">本站首页</a></li>
</ul>
</div>
</div>

<!--文字div，第二个-->
<div id="div2">
<!--第二个大div里有3个div，2-1div用来放文字内容-->
<div class="div2-1">
<p>我们一直在努力......</p>
<p>作为专业的互联网络应用服务提供者，我们对“诚信的服务”的认识正随着我们的理念完善、产品成熟、市场拓展的每一步而日益深刻。我们在一直积极拓展与客户的关系。成立以来，我们已经为众多的客户提供全面的、优秀的、成熟一体化的解决方案，以及贴身的支持和服务。
我们相们，“诚信的服务”必然是商业体系的趋势。在这样的广泛和高质量的服务中，我们不仅最大地满足直至超越客户的期望，还能够利用各自的资源，发掘更多的商机、共赢市场。
</p>
<p>2014</p>
<p>We Try......</p>
</div>
<!--第二个大div里有3个div，2-2div用来放数字：2014-->
<div class="div2-2">2014</div>

<!--第二个大div里有3个div，2-3div没有内容，只在样式里指定高度，给个背景颜色即可-->
<div class="div2-3"></div>
</div>

<!--图片div，第3个-->
<div id="div3">
<img src="images/tit_pro.jpg" />

</div>
<!--列表div，第4个-->
<div id="div4">
<div>
<p class="tu1"><img src="images/tc_tit_1.jpg" /></p>
<ul>
<li>1个cn的英文域名 100元/年 </li>
<li>100M 单线虚拟主机　650元/年</li>
<li>5个各10M 企业邮箱　150元/年</li>
</ul>
<p class="tu2"><img src="images/btn_reg.jpg" /></p>
</div>
<div>
<p class="tu1"><img src="images/tc_tit_1.jpg" /></p>
<ul>
<li>1个cn的英文域名 100元/年 </li>
<li>100M 单线虚拟主机　650元/年</li>
<li>5个各10M 企业邮箱　150元/年</li>
</ul>
<p class="tu2"><img src="images/btn_reg.jpg" /></p>
</div>
<div>
<p class="tu1"><img src="images/tc_tit_1.jpg" /></p>
<ul>
<li>1个cn的英文域名 100元/年 </li>
<li>100M 单线虚拟主机　650元/年</li>
<li>5个各10M 企业邮箱　150元/年</li>
</ul>
<p class="tu2"><img src="images/btn_reg.jpg" /></p>
</div>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航