软件：HBuilderX
闲着无聊，翻了翻电脑，突然发现以前做过的一个作业，拿出来分享给大家 ，同时做个笔记，免得以后弄丢了😁😁
好了，正片开始：
根据下边的效果图完成一个完整网页的制作
1、新建项目
（1）打开HBuilderX新建一个项目
（2）在index.html文件中添加网页标题：音乐--和谐现场
效果：
2、新建CSS文件
在css文件夹中新建CSS文件，命名main.css
在main.css中添加代码：body{margin: 0;}，设置网页与浏览器四周距离为0。也可以在index.html文件<body>中添加，如：<body style="margin: 0;">
在index.html文件<head></head>中引入css：
<link rel="stylesheet" type="text/css" href="css/main.css"/>
3、布局
（1）最外面制作一个总框
在index.html文件<body></body>中添加：
<div class="main">
</div>
main.css文件中添加css样式
.main{
width: 1500px;
margin: 0 auto;
border:1px solid dodgerblue;
}
注：如果
<div>里面是class="main"，css文件里面就写.main{}，如果是id="main"，css文件里面就写#main{}
现在里面还没有内容，也没有设置这个框的高度，所以运行出来是下面这样的：
（2）总框中分出头部、中部、尾部
在index.html文件<div class="main"></div>中添加：
<div class="tou">
</div>
<div class="zhong">
</div>
<div class="wei">
</div>
main.css文件中添加css样式：
.tou{
margin-top: 0px;
width: 1500px;
height: 780px;
background-image: url(../images/banner4.jpg);
background-repeat:no-repeat ;
border:1px solid red;
}
.zhong{
margin: 70px 100px;
border:1px solid red;
}
.wei{
width: 1500px;
height: 510px;
margin: 0 auto;
background-image: url(../images/bgc.png);
background-repeat:no-repeat ;
background-size:100%;
border:1px solid red;
}
效果：
先将所需要的图片引入images文件夹中
4、头部的制作：
（1）制作#tou外盒子效果；（前面已经弄好了）
（2）制作#tou1内盒子1效果：包括导航与logo；
在index.html文件<div class="tou"></div>中添加：
<div class="tou1">
<div class="menu">
<ul>
<li><a href="3">首页</a></li>
<li><a href="3">关于我们</a></li>
<li><a href="3">简介</a></li>
<li><a href="3">团队</a></li>
<li><a href="3">项目</a></li>
<li><a href="3">联系我们</a></li>
</ul>
</div>
<div class="logo1">
<p align="center">
<font face="arial" size="6" color="aliceblue">天堂鸟</font>
</p>
<p align="center">
<font face="arial" size="4" color="aliceblue">Bird of Paradise</font>
</p>
</div>
</div>
css样式：
.tou1{
margin-left:70px;
margin-right: 70px;
margin-top: 50px;
height: 100px;
border:2px solid red;
}
.menu{
width: 800px;
height: 40px;
margin-left: 80px;
margin-top: 50px;
float: left;
color: aliceblue;
}
.menu ul{
margin: 0;
padding: 0;
}
.menu ul li{
font-size:20px;
font-weight: bold;
float: left;
width: 130px;
height: 40px;
text-align: center;
list-style: none;
line-height: 40px;
}
.menu ul li a:link{
font-size:20px;
font-weight: bold;
color: aliceblue;
}
.menu ul li a:visited{
text-decoration: none;
color: aliceblue;
}
.menu ul li a:hover{
font-size: 25px;
display: block;
color: aliceblue;
}
.menu ul li a:active{
text-decoration: none;
color: aliceblue;
}
.logo1{
float: right;
margin-right: 60px;
margin-top: 40px;
height: 100px;
}
（3）制作#tou2内盒子效果：包括标题与段落文字；
在index.html文件<div class="tou1"></div>下面添加：
<div class="tou2">
<div style="margin-top: 250px;margin-left: 80px;">
<font size="7" color="aliceblue">震 撼 来 袭</font>
<p><font size="5" color="red" face="仿宋">来 自 心 灵 深 处， 无 限 激 情 ！</font></p>
<p><font size="5" color="red" face="rockwell">F r o m d e e p h e a r t , i n f i n i t e p a s s i o n !</font></p>
</div>
</div>
css样式：
.tou2{
height: 440px;
width: 1400px;
margin: 0 auto;
margin-left: 80px;
margin-top: 450px;
}
5、中部的制作：
（1）制作#zhong外盒子的效果，居中；（前面已经弄好了）
（2）制作#zhong1内盒子1的效果，标题与段落；
在index.html文件<div class="zhong"></div>中添加：
<div class="zhong1" align="center">
<blockquote>
<blockquote>
<blockquote>
<h2>我 的 团 队</h2>
</blockquote>
</blockquote>
</blockquote>
<div class="line"></div>
<font size="" color="dimgray"><h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3></font>
</div>
css样式：
.zhong1{
margin: 10px 100px;
}
.line{
width: 120px;
border-bottom: 3px solid #1E90FF;
font-size: 20px;
font-weight: bold;
}
（3）制作#zhong2内盒子2的效果，包括四个小盒子内容，每个小盒子又包括图片，标题两个内容。
这个我用表格做，用
<div>也可以，但是那样要达到要求的效果有点困难
在index.html文件<div class="zhong1"></div>下添加：
<table id="zhong2" bordercolor="darkgray" border="1" frame="void" cellspacing="20px" cellpadding="0px" align="center" style="margin-top: 30px;">
<tr>
<th><img src="images/team1.jpg" width="280" height="280">
<div style="color: dimgray;">
Elizabeth
</div>
</th>
<th>
<img src="images/team2.jpg" width="280" height="280">
<div style="color: dimgray;">
Max Payne
</div>
</th>
<th>
<img src="images/team3.jpg" width="280" height="280">
<div style="color: dimgray;">
Diana
</div>
</th>
<th>
<img src="images/team4.jpg" width="280" height="280" >
<div style="color: dimgray;">
Johnny Blaz
</div>
</th>
</tr>
</table>
6、尾部的制作：
（1）制作#wei外盒子的效果；（前面已经弄好了）
（2）制作#wei1内盒子1的效果，包括段落与span标记；
在index.html文件<div class="wei"></div>中添加：
<div class="wei1"><font size="5" color="aliceblue">让你自己可以，订阅我们</font>
<span><font size="3" color="aliceblue"> Make Yourself Available, Subscribe To Us</font></span>
</div>
css样式：
.wei1{
margin: 0 auto;
margin-left: 90px;
margin-top: 20px;
width: 1420px;
float: left;
}
（3）制作#wei2内盒子2的效果，包括3个小盒子内容，每个小盒子又包括标题，段落两个内容，最下方是一条直线与段落。
在index.html文件<div class="wei1"></div>下面添加：
<div class="wei2">
<div class="shang">
<div class="block">
<font size="4" color="aliceblue">关于我们</font>
<hr width="75%" align="left" noshade="" size="2" color="coral">
<br><font size="" color="darkgray">Lorem Ipsum is simply dummy text of the
<p></p>printing and typesetting industry. Lorem
<p></p>Ipsum has been the industry's standard
<p></p>dummy text ever since the 1500s.</font>
</div>
<div class="block">
<font size="4" color="aliceblue">顾客服务</font>
<hr width="75%" align="left" noshade="" size="2" color="coral">
<br><font size="" color="darkgray">Lorem Ipsum is simply dummy text of the
<p></p>printing and typesetting industry. Lorem
<p></p>Ipsum has been the industry's standard
<p></p>dummy text ever since the 1500s.</font>
</div>
<div class="block">
<font size="4" color="aliceblue">联系我们</font>
<hr width="75%" align="left" noshade="" size="2" color="coral">
<br>
<font size="" color="darkgray">VISIT US
<p></p>MAIL US
<p></p>CALL US</font>
</div>
</div>
<hr size="2" noshade="">
<p align="center"><font size="" color="aliceblue"><br>Copyright © 2016.云南微蓝科技 All rights reserved.网商创业园 - Collect from 互联网</font></p>
</div>
css样式：
.wei2{
margin-top: 20px;
margin-left: 90px;
height: 450px;
float: left;
width: 1320px;
}
.block{
width: 30%;
height:200px;
margin-left: 35px;
float: left;
}
.shang{
width: 1320px;
height: 260px;
margin-top: 70px;
}
最后，将css样式里面的红边框代码border:1px solid red;去除，就成功了。其中.tou{}去掉红边框后将margin-top: 0px;改为margin-top: -50px;
最终效果：
demo地址：
2653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
