HTML&CSS——使用DIV和CSS完成网站首页重构
1、DIV 相关的技术
Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，必须结合CSS来使用。它主要用于页面的布局。
Span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必须结合CSS 来使用。它主要用于对括起来的内容进行样式的修饰。
2、CSS 的作用
HTML：它是整个网站的骨架。
CSS：它是对整个网站骨架的内容进行美化(修饰)。
3、CSS 如何使用
语法和规范
选择器{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
基本选择器有三种：元素选择器、类选择器、id 选择器
1）如果多个相同的元素设置相同的样式，使用元素选择器最为合适
把选择器改成元素名即可。
2）对多个元素设置相同的样式，使用类选择器比较合适
把选择器改成”.类名“即可
3）Id 保证唯一，使用id选择器
把选择器改成”#id“即可。
4、CSS的引入方式
第一种：行内引入
<div style="color:red;font-size: 100px;">
你好，疯子
</div>
第二种：内部引入方式
<style type="text/css">
div{
color:red; font-size: 100px;
}
</style>
第三种：外部引入方式
5、CSS的浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为 止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在 一样。
详情查看CSS简介。
6、使用DIV和CSS完成首页重新布局，效果和前几篇的HTML基础——网站首页显示页面一样。
步骤分析：
第一步：先定义个大的 div，然后嵌套 8 个小的 div
第二步：(第一行)在第一个 div 里面嵌套 3 个小的 div
第三步： (第二行)在小 div里面写一个列表标签(需要使用 css的 display属性的 inline)
第四步：(第三行)在小 div 里面放置一张图片
第五步：(第四行)在小 div 里面嵌套 2 个 div(在下面的 div 再嵌套 2 个 div，最后一在右 边的 div 里面嵌套 10 个 div)
第六步：(第五行)在小 div 里面放置一张广告图片
第七步：(第七行)在小 div 里面放置一张广告图片
第八步：(第八行) 在小 div 里面放置超链接和文字内容。
7、最终实现代码如下：
此案例使用了CSS的其他内容：
1）去掉超链接的下划线：
a{
text-decoration: none;
}
2）让 div 居中
margin：0px auto;
3）让块级元素成为内联元素
display:inline;
4）块级元素内容居中
text-align:center;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>首页</title> 6 <style> 7 #father{ 8 border: 1px solid black; 9 width: 1300px; 10 height: 1600px; 11 margin: auto; 12 } 13 #logo{ 14 border: 1px solid black; 15 width: 1300px; 16 height: 50px; 17 } 18 .top{ 19 border: 1px solid blue; 20 width: 431px; 21 height: 50px; 22 float: left; 23 } 24 #top{ 25 padding-top: 12px; 26 height: 38px; 27 } 28 29 #menu{ 30 border: 1px solid red; 31 width:1300px; 32 height: 50px; 33 background: black; 34 } 35 ul li{ 36 display: inline; 37 color: white; 38 } 39 #product{ 40 border: 1px solid goldenrod; 41 width: 1300px; 42 height: 550px; 43 } 44 #product_top{ 45 border: 1px solid blue; 46 width: 100%; 47 height: 43px; 48 padding-top: 5px; 49 } 50 #product_bottom{ 51 border: 1px solid green; 52 width: 100%; 53 height: 498px; 54 } 55 56 #product_bottom_left{ 57 border: 1px solid red; 58 width: 200px; 59 height: 498px; 60 float: left; 61 } 62 #product_bottom_right{ 63 border: 1px solid saddlebrown; 64 width: 1094px; 65 height: 498px; 66 float: left; 67 } 68 #big{ 69 border: 1px solid hotpink; 70 width: 545px; 71 height: 247px; 72 float: left; 73 } 74 .small{ 75 border: 1px solid blue; 76 width: 180px; 77 height: 247px; 78 float: left; 79 /*让里面的内容居中*/ 80 text-align: center; 81 } 82 #bottom{ 83 text-align: center; 84 } 85 /*去掉超链接的下划线*/ 86 a{ 87 text-decoration: none; 88 } 89 </style> 90 </head> 91 <body> 92 <div id="father"> 93 <!--1.logo部分--> 94 <div id="logo"> 95 <div class="top"> 96 <img src="../img/logo2.png" height="46px" /> 97 </div> 98 <div class="top"> 99 <img src="../img/header.png" height="46px"/> 100 </div> 101 <div class="top" id="top"> 102 <a href="#">登录</a> 103 <a href="#">注册</a> 104 <a href="#">购物车</a> 105 </div> 106 </div> 107 108 <!--2.导航栏部分--> 109 <div id="menu"> 110 <ul> 111 <a href="#"><li style="font-size: large;">首页</li></a> 112 <a href="#"><li>手机数码</li></a> 113 <a href="#"><li>家用电器</li></a> 114 <a href="#"><li>鞋靴箱包</li></a> 115 </ul> 116 </div> 117 118 <!--3.轮播图部分--> 119 <div id=""> 120 <img src="../img/1.jpg" width="100%" height="100%"/> 121 </div> 122 123 <!--4.最新商品--> 124 <div id="product"> 125 126 <div id="product_top"> 127 <span style="font-size: 25px">最新商品</span> 128 <img src="../img/title2.jpg"/> 129 </div> 130 131 <div id="product_bottom"> 132 133 <div id="product_bottom_left"> 134 <img src="../img/big01.jpg" width="100%" height="100%" /> 135 </div> 136 137 <div id="product_bottom_right"> 138 <div id="big"> 139 <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a> 140 </div> 141 142 <div class="small"> 143 <a href="#"><img src="../img/small01.jpg" ></a> 144 <a href="#"><p style="color: gray;">榨汁机</p></a> 145 <p style="color: red;">599</p> 146 </div> 147 <div class="small"> 148 <a href="#"><img src="../img/small02.jpg" ></a> 149 <a href="#"><p style="color: gray;">电视机</p></a> 150 <p style="color: red;">1599</p> 151 </div> 152 <div class="small"> 153 <a href="#"><img src="../img/small03.jpg" ></a> 154 <a href="#"><p style="color: gray;">锅</p></a> 155 <p style="color: red;">399</p> 156 </div> 157 <div class="small"> 158 <a href="#"><img src="../img/small04.jpg" ></a> 159 <a href="#"><p style="color: gray;">面包机</p></a> 160 <p style="color: red;">799</p> 161 </div> 162 <div class="small"> 163 <a href="#"><img src="../img/small05.jpg" ></a> 164 <a href="#"><p style="color: gray;">咖啡机</p></a> 165 <p style="color: red;">899</p> 166 </div> 167 <div class="small"> 168 <a href="#"><img src="../img/small06.jpg" ></a> 169 <a href="#"><p style="color: gray;">洗衣机</p></a> 170 <p style="color: red;">999</p> 171 </div> 172 <div class="small"> 173 <a href="#"><img src="../img/small07.jpg" ></a> 174 <a href="#"><p style="color: gray;">扫地机器人</p></a> 175 <p style="color: red;">1599</p> 176 </div> 177 <div class="small"> 178 <a href="#"><img src="../img/small09.jpg" ></a> 179 <a href="#"><p style="color: gray;">微波炉</p></a> 180 <p style="color: red;">1099</p> 181 </div> 182 <div class="small"> 183 <a href="#"><img src="../img/small08.jpg" ></a> 184 <a href="#"><p style="color: gray;">压力锅</p></a> 185 <p style="color: red;">799</p> 186 </div> 187 </div> 188 </div> 189 </div> 190 191 <!--5.广告图片--> 192 <div id=""> 193 <img src="../img/ad.jpg" width="100%"/> 194 </div> 195 196 <!--6.广告图片--> 197 <div id=""> 198 <img src="../img/footer.jpg" width="100%"/> 199 </div> 200 201 <!--7.友情链接和版权信息--> 202 <div id="bottom"> 203 <a href="#"><font>关于我们</font></a> 204 <a href="#"><font>联系我们</font></a> 205 <a href="#"><font>招贤纳士</font></a> 206 <a href="#"><font>法律声明</font></a> 207 <a href="#"><font>友情链接</font></a> 208 <a href="#"><font>支付方式</font></a> 209 <a href="#"><font>配送方式</font></a> 210 <a href="#"><font>服务声明</font></a> 211 <a href="#"><font>广告声明</font></a> 212 <p> 213 Copyright © 2005-2016 hh商城 版权所有 214 </p> 215 </div> 216 </div> 217 </body> 218 </html>
在浏览器内运行，就可以得到网站首页效果。
