|
經(jīng)典css布局案例 1、CSS浮動 包括：塊元素和行內(nèi)元素、display屬性、浮動float。塊元素和行內(nèi)元素的區(qū)別是：塊元素有大小，而行內(nèi)元素沒有；塊元素默認單獨占一行，行內(nèi)元素都在同一行。 既然塊元素和行內(nèi)元素有各自的特點，當我們需要來回切換他們的模式時，該怎么做呢？例如想要塊元素都按行排列。這時，就引入了display屬性，它是規(guī)定元素應該生成的框的類型，即可以讓塊元素和行內(nèi)元素之間進行切換。 2、展示效果 3、重難點配置 浮動：三個div，前兩個浮動，后面不浮動。（clear:both;）； 左邊固定，右側(cè)滿鋪。 圖片居中：div內(nèi)部圖片居中 外邊框顯示含義：margin:0px 100px 0px 100px; 4、目錄結(jié)構(gòu) huizong.css div-huizong.html Image：bottom.jpg、bottom.jpg 源代碼演示 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>CSS匯總學習</title> <link rel='stylesheet' type='text/css' href='huizong.css'> </head> <body> <div class='top-div'>top-div網(wǎng)頁頭部</div> <div class='second-div'>second-div網(wǎng)頁第二部分</div> <div class='line31-div'>line31-div</div> <div class='line32-div'>line32-div</div> <div class='line41-div'>line41-div網(wǎng)頁中部</div> <div class='line42-div'>line42-div網(wǎng)頁中部1</div> <div class='line43-div'>line43-div網(wǎng)頁中部2</div> <div class='line44-div'>line44-div網(wǎng)頁中部3</div> <div class='line5-div'> <div class='line51-div'>line51-div</div> <div class='line52-div'> <div class='line52-1-div'>line52-1-div網(wǎng)頁</div> <div class='line52-2-div'>line52-2-div網(wǎng)頁</div> <div class='line52-3-div'>line52-3-div網(wǎng)頁</div> <div class='line52-4-div'>line52-4-div網(wǎng)頁</div> <div class='line52-5-div'>line52-5-div網(wǎng)頁</div> </div> </div> <div class='line6-div'>line6-div</div> <div class='line7-div'>line7-div</div> <div class='line8-div'><img src='image/bottom1.jpg'></div> <div class='line9-div'> <div class='line91-div'><img src='image/bottom.jpg'></div> </div> </body> <style> body{ margin:0;padding:0;} </style> </html> 樣式格式： .top-div{ background-color: #333333; width: 100%; height: 50px; color: #B0B0B0; text-align: center; line-height: 50px; } .second-div{ width: 100%; height: 127px; text-align: center; line-height: 127px; } .line31-div{ height: 293px; text-align: center; line-height: 293px; background-color: #000099; /* margin:0px 100px 0px 100px; //上,右,下,左*/ margin-left: 6%; width: 10%; float: left; margin-bottom:10px; } .line32-div{ height: 293px; width: auto; text-align: center; line-height: 350px; margin-right: 6%; overflow: hidden; background-color: #0066ff; margin-bottom:10px; } .line41-div{ clear: both; margin-left: 6%; height: 150px; width: 10%; background-color: #660066; float: left; } .line42-div{ margin-left: 100px; height: 150px; margin-left: 0.6%; width: 25.4%; float: left; overflow: hidden; background-color: #ffcc66; } .line43-div{ margin-left: 0.6%; margin-right: 0.6%; height: 150px; width: 25.4%; background-color: #ff3366; float: left; } .line44-div{ margin-right: 6%; height: 150px; width: 25.4%; background-color: #ccffff; float: left; } .line5-div{ clear: both; height: 350px; /* margin:0px 100px 0px 100px; //上,右,下,左*/ margin: 170px 6% 10px 6%; } .line51-div{ height: 100px; width: 100%; text-align: center; line-height: 100px; } .line52-div{ height: 350px; } .line52-1-div{ background-color: red; height: 100%; float: left; width: 19.46%; } .line52-2-div{ background-color: #bfbfbf; height: 100%; float: left; margin-left: 0.6%; width: 19.46%; } .line52-3-div{ background-color: #f1f1f1; height: 100%; float: left; margin-left: 0.6%; width: 19.46%; } .line52-4-div{ background-color: #f1f1f1; height: 100%; float: left; margin-left: 0.6%; width: 19.46%; } .line52-5-div{ background-color: #bfbfbf; height: 100%; float: left; margin-left: 0.6%; width: 19.46%; } .line6-div{ height: 100px; text-align: center; line-height: 100px; background-color: #333333; margin: 110px 6% 0px 6%; } .line7-div{ margin-top: 10px; height: 200px; width: 100%; background-color: #d7d7d7; } .line8-div{ display: flex; justify-content: center; align-items: center; } .line8-div img{ width: 100%; } .line91-div{ display: flex; justify-content: center; align-items: center; } .line91-div img{ width: 100%; } |
|
|
