HTML&CSS——使用DIV和CSS完成網站首頁重構

來源:互聯網
上載者:User

標籤:步驟   url   完成   相同   基本選取器   border   五行   商城   foo   

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>

在瀏覽器內運行,就可以得到網站首頁效果。

HTML&CSS——使用DIV和CSS完成網站首頁重構

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.