css簡單練習5
根據css現學內容,完成以下頁面佈局。
圖例以下所示:
css
練習分析:
- 總體觀察圖片可知該網頁的背景顏色是灰色,即最大的盒子中背景顏色應設爲灰色。大盒子中擺入多個小一點的盒子來完成佈局,其餘的盒子擺放可經過下圖來理解。
- 盒子擺好後能夠根據實際狀況加入外邊距(margin)或內邊距(padding)來分開盒子,以便於按要求完成任務。
- 對於形狀相同的盒子寫出來一個後複製粘貼來,能夠減小做業任務。
- 對於上方的菜單導航欄中能夠加入僞類來加強視覺效果。
- 若代碼量比較大爲了編寫方便,能夠將css代碼塊與html代碼塊分開寫,但注意須要經過
link
來將css導入html中。如本題目中使用的<link href="css/css.css" rel="stylesheet" />
。
html代碼實現以下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="css/css.css" rel="stylesheet" /> </head> <body> <!-- 頂部線 --> <div class="aline"></div> <!-- 頂部線結束 --> <!-- logo部分,分三個小部分,左中右 --> <div id="logo"> <div class="logo_left"></div> <div class="logo_center"></div> <div class="logo_right"> <a href="http://www.baidu.com">登 錄</a> <a href="http://www.baidu.com">注 冊</a> </div> <div style="clear: left;"></div> </div> <!-- logo部分結束 --> <!-- 導入欄 --> <div class="manu"> <div class="manu1"><a href="">首頁</a></div> <div class="manu1"><a href="">唐詩</a></div> <div class="manu1"><a href="">宋詞</a></div> <div class="manu1"><a href="">古代小說</a></div> <div class="manu1"><a href="">現代小說</a></div> <div class="manu1"><a href="">散文</a></div> <div class="manu1"><a href="">詩歌</a></div> <div style="clear: left;"></div> </div> <!-- 導入欄結束 --> <!-- 廣告區 --> <div> <div class="advertising"></div> </div> <!-- 廣告區結束 --> <!-- 項目分區分爲project_1,project_2和project三部分 --> <div class="project"> <!-- project第一部分開始 --> <div class="project_1"> <div class="part_1"> <div class="part_1-1">唐詩</div> <div class="part_1-2"> <a href="">更多>></a> </div> <div style="clear: both;"></div> <div class="part_1-3"> <a href="">靜夜思</a> </div> <div class="part_1-3"> <a href="">靜夜思</a> </div> <div class="part_1-3"> <a href="">靜夜思</a> </div> </div> <div class="part_2"> <div class="part_1-1">宋詞</div> <div class="part_1-2"> <a href="">更多>></a> </div> <div style="clear: both;"></div> <div class="part_1-3"> <a href="">靜夜思</a> </div> <div class="part_1-3"> <a href="">靜夜思</a> </div> <div class="part_1-3"> <a href="">靜夜思</a> </div> </div> <div class="part_3"> <div class="part_1-1">元曲</div> <div class="part_1-2"> <a href="">更多>></a> </div> <div style="clear: both;"></div> <div class="part_1-3"> <a href="">靜夜思</a> </div> <div class="part_1-3"> <a href="">靜夜思</a> </div> <div class="part_1-3"> <a href="">靜夜思</a> </div> </div> <div style="clear: left;"></div> </div> <!-- project第一部分結束 --> <!-- project第二部分開始 --> <div class="project_2"> <div class="part_1"> <div class="part_1-1">唐詩</div> <div class="part_1-2"> <a href="">更多>></a> </div> <div style="clear: both;"></div> <div class="part_1-3"> <a href="">靜夜思</a> </div> <div class="part_1-3"> <a href="">靜夜思</a> </div> <div class="part_1-3"> <a href="">靜夜思</a> </div> </div> <div class="part_2"> <div class="part_1-1">宋詞</div> <div class="part_1-2"> <a href="">更多>></a> </div> <div style="clear: both;"></div> <div class="part_1-3"> <a href="">靜夜思</a> </div> <div class="part_1-3"> <a href="">靜夜思</a> </div> <div class="part_1-3"> <a href="">靜夜思</a> </div> </div> <div class="part_3"> <div class="part_1-1">元曲</div> <div class="part_1-2"> <a href="">更多>></a> </div> <div style="clear: both;"></div> <div class="part_1-3"> <a href="">靜夜思</a> </div> <div class="part_1-3"> <a href="">靜夜思</a> </div> <div class="part_1-3"> <a href="">靜夜思</a> </div> </div> <div style="clear: left;"></div> </div> <!-- project第二部分結束 --> <!-- project第三部分開始 --> <div class="proect_3"> <div class="part_3-1">友情連接</div> <div class="part_3-2"></div> <div style="clear: both;"></div> <div class="part_3-3"> <a href="http://www.baidu.com">百度</a> </div> </div> <!-- project第三部分結束 --> </div> </body> </html>
css代碼實現以下:
* { margin: 0px; padding: 0px; } body { background-color: #E3E3E3; } .aline { background-color: #00A9F8; height: 3px; width: 1200px; margin: auto; } #logo { width: 75rem; margin: 10px auto; } .logo_right a { color: #00A9F8; font-size: 16px; font-weight: bold; text-decoration: none; } .logo_center, .logo_left, .logo_right { height: 80px; float: left; } .logo_left { width: 250px; background-color: #F5F5F5; background-image: url(../img/logo.jpg); background-repeat: no-repeat; background-position: center; } .logo_center { width: 700px; background-color: #00A9F8; background-image: url(../img/timg.jpg); background-position: center; background-repeat: no-repeat; } .logo_right { width: 250px; background-color: #F5F5F5; text-align: center; line-height: 80px; } .logo_right a { text-decoration-line: none; } .manu { margin: 10px auto; width: 1200px; height: 60px; } .manu1 { background-color: #00A9F8; width: 171px; float: left; height: 60px; text-align: center; line-height: 60px; } .manu1 a { color: #FFFFFF; text-decoration: none; } .manu1:hover { background-color: #18e8ff; } .advertising { width: 1200px; height: 120px; background-image: url(../img/timg.gif); background-position: center; background-repeat: no-repeat; margin: 10px auto; } .part_1 { height: 45px; background-color: #FFFFFF; width: 385px; } .part_1-1, .part_1-2 { height: 45px; border-bottom-width: 3px; border-bottom-color: #00A9F8; border-bottom-style: solid; width: 385px; color: #FFFFFF; } .part_1-1 { float: left; background-color: #00A9F8; width: 105px; text-align: center; line-height: 45px; } .part_1-2 { float: right; background-color: #FFFFFF; width: 260px; text-align: right; line-height: 45px; padding-right: 20px; } .part_1-3 { text-align: left; line-height: 45px; border-bottom-width: 1px; border-bottom-color: #E3E3E3; border-bottom-style: dotted; background-color: #FFFFFF; width: 375px; padding-left: 10px; } .part_1-2 a { color: #00A9F8; text-decoration: none; } a { color: black; text-decoration: none; } .part_1, .part_2, .part_3 { float: left; } .part_2 { margin: 0px 22.5px; } .project { width: 1200px; margin: 0px auto; } .project_2 { margin-top: 10px; margin-bottom: 10px; } .parject_3 { width: 1200px; background-color: #FFFFFF; height: 45px; } .part_3-1, .part_3-2 { height: 45px; border-bottom-width: 3px; border-bottom-color: #00A9F8; border-bottom-style: solid; text-align: center; line-height: 45px; } .part_3-1 { background-color: #00A9F8; width: 95px; float: left; padding-left: 10px; color: #FFFFFF; } .part_3-2 { width: 1095px; float: right; background-color: #FFFFFF; } .part_3-3 { width: 1190px; height: 45px; background-color: #FFFFFF; padding-left: 10px; }