软件：HBuilderX 闲着无聊，翻了翻电脑，突然发现以前做过的一个作业，拿出来给大家 ，同时做个笔记，免得以后弄丢了😁😁 根据下边的效果图完成一个完整网页的制作 （1）打开HBuilderX新建一个项目 在css文件夹中新建CSS文件，命名 在 （1）最外面制作一个总框 注：如果 现在里面还没有内容，也没有设置这个框的高度，所以运行出来是下面这样的： 效果： 先将所需要的图片引入 （1）制作#tou外盒子效果；（前面已经弄好了） css样式： （3）制作#tou2内盒子效果：包括标题与段落文字； css样式： css样式： （3）制作#zhong2内盒子2的效果，包括四个小盒子内容，每个小盒子又包括图片，标题两个内容。 这个我用表格做，用 在 css样式： （3）制作#wei2内盒子2的效果，包括3个小盒子内容，每个小盒子又包括标题，段落两个内容，最下方是一条直线与段落。 css样式： 最后，将css样式里面的红边框代码 最终效果：
好了，正片开始：
😀这里是分割线
1、新建项目
（2）在index.html文件中添加网页标题：音乐--和谐现场
效果：
2、新建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、布局
在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、头部的制作：
（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> .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; } 
在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> .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> .zhong1{ margin: 10px 100px; } .line{ width: 120px; border-bottom: 3px solid #1E90FF; font-size: 20px; font-weight: bold; } 
<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> .wei1{ margin: 0 auto; margin-left: 90px; margin-top: 20px; width: 1420px; float: left; } 
在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> .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; } 
border:1px solid red;去除，就成功了。其中.tou{}去掉红边框后将margin-top: 0px;改为margin-top: -50px;
demo地址：
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
