专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > HTML/CSS

HTML&CSS——使用DIV跟CSS完成网站首页重构

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
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 >

    你好,疯子

  </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 >首页</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 >最新商品</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 >榨汁机</p></a>145                             <p >599</p>146                         </div>147                         <div class="small">148                             <a href="#"><img src="../img/small02.jpg" ></a>149                             <a href="#"><p >电视机</p></a>150                             <p >1599</p>151                         </div>152                         <div class="small">153                             <a href="#"><img src="../img/small03.jpg" ></a>154                             <a href="#"><p >锅</p></a>155                             <p >399</p>156                         </div>157                         <div class="small">158                             <a href="#"><img src="../img/small04.jpg" ></a>159                             <a href="#"><p >面包机</p></a>160                             <p >799</p>161                         </div>162                         <div class="small">163                             <a href="#"><img src="../img/small05.jpg" ></a>164                             <a href="#"><p >咖啡机</p></a>165                             <p >899</p>166                         </div>167                         <div class="small">168                             <a href="#"><img src="../img/small06.jpg" ></a>169                             <a href="#"><p >洗衣机</p></a>170                             <p >999</p>171                         </div>172                         <div class="small">173                             <a href="#"><img src="../img/small07.jpg" ></a>174                             <a href="#"><p >扫地机器人</p></a>175                             <p >1599</p>176                         </div>177                         <div class="small">178                             <a href="#"><img src="../img/small09.jpg" ></a>179                             <a href="#"><p >微波炉</p></a>180                             <p >1099</p>181                         </div>182                         <div class="small">183                             <a href="#"><img src="../img/small08.jpg" ></a>184                             <a href="#"><p >压力锅</p></a>185                             <p >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>

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

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: