HTMLCSS——使用DIV和CSS重构网站主页

顺晟科技

2022-09-15 21:32:20

128

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>

　　第二种：内部引入方式

　　　　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）去掉超链接的下划线：

　　　　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>

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

上一篇：html块差异跨度下一篇：[html] [9] div布局[d

网站建设

Html

HTMLCSS——使用DIV和CSS重构网站主页