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>&nbsp;&nbsp;&nbsp;&nbsp;
112                     <a href="#"><li>手机数码</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
113                     <a href="#"><li>家用电器</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
114                     <a href="#"><li>鞋靴箱包</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
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>&nbsp;&nbsp;&nbsp;
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>

在浏览器内运行,就可以得到网站首页效果。

posted @ 2017-08-18 14:45 changxiaoqin 阅读(...) 评论(...) 编辑 收藏