hbuilderx 2.9.8 公用css样式_HTML、css项目上手练习

根据下边的效果图完成一个完整网页的制作

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">震&nbsp;撼&nbsp;来&nbsp;袭</font><p><font size="5" color="red" face="仿宋">来&nbsp;自&nbsp;心&nbsp;灵&nbsp;深&nbsp;处，&nbsp;无&nbsp;限&nbsp;激&nbsp;情 ！</font></p><p><font size="5" color="red" face="rockwell">F r o m &nbsp;&nbsp; d e e p &nbsp;&nbsp; h e a r t , &nbsp;&nbsp; i n f i n i t e &nbsp;&nbsp; p a s s i o n  &nbsp;!</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="data:images/team1.jpg" width="280" height="280"><div style="color: dimgray;">Elizabeth</div></th><th><img src="data:images/team2.jpg" width="280" height="280"><div style="color: dimgray;">Max Payne</div></th><th><img src="data:images/team3.jpg" width="280" height="280"><div style="color: dimgray;">Diana</div></th><th>                  <img src="data: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">&nbsp; 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;

最终效果：