今天寫一個關於浮動的頁面，頁面高度不能設置。用元素將他撐開。
阿新 • • 發佈：2018-08-19
http 分享 link 用戶管理 管理 bubuko :after document last
article{ width: 800px; margin: 30px auto; padding: 30px; background-color: rgb(241, 228, 228); box-sizing: border-box; } article>div:first-child{ height: 50px; background-color: rgb(99, 87, 87); margin-bottom: 30px; } article>div:last-child{ height: 50px; background-color: rgb(99, 87, 87); margin-top: 30px; } section>div{ width: 100px; height: 100px; background-color: rgb(229, 129, 129); margin: 20px; float: left; } section:after{ content:""; display: block; clear: both; } footer{ background-color: #2a2a2a; box-sizing: border-box; } footer>div{ float: left; margin:50px 0 58px 50px; } p>a{ color: #e6e6e6; text-decoration: none; font-size: 14px; } div>p:first-child{ padding-bottom: 30px; } div>p:nth-child(2){ padding-bottom: 20px; } div>p:first-child>a{ font-size: 16px; } p>a:hover{ color: red; } div>p{ margin: 0; } footer:after{ content:""; display: block; clear: both; }
HTML源碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="../css//normalize.css"> <link rel="stylesheet" href="../css/float.css"> </head> <body> <!-- 頁頭 --> <header> <nav> <a href="#">首頁</a> <a href="#">易牛課堂</a> <a href="#">易牛班級</a> <a href="#">易牛咨詢</a> <a href="#">話題小組</a> </nav> <nav> <a href="#">登陸</a> <a href="#">註冊</a> </nav> </header> <!-- 內容 --> <article> <div></div> <section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section> <div></div> </article> <!-- 頁尾 --> <footer> <div> <p><a href="#">我是管理員</a></p> <p><a href="#">用戶管理</a></p> <p><a href="#">課程管理</a></p> </div> <div> <p><a href="#">我是學生</a></p> <p><a href="#">如何註冊</a></p> <p><a href="#">購買課程</a></p> </div> <div> <p><a href="#">聯系我們</a></p> <p><a href="#">關於我們</a></p> <p><a href="#">聯系我們</a></p> </div> <div> <p><a href="#">商業應用</a></p> <p><a href="#">商務合作</a></p> <p><a href="#">內容招募</a></p> </div> <div> <p><a href="#">系統幫助</a></p> <p><a href="#">購買課程</a></p> <p><a href="#">作業提交</a></p> </div> </footer> </body> </html> CSS源碼article{ width: 800px; margin: 30px auto; padding: 30px; background-color: rgb(241, 228, 228); box-sizing: border-box; } article>div:first-child{ height: 50px; background-color: rgb(99, 87, 87); margin-bottom: 30px; } article>div:last-child{ height: 50px; background-color: rgb(99, 87, 87); margin-top: 30px; } section>div{ width: 100px; height: 100px; background-color: rgb(229, 129, 129); margin: 20px; float: left; } section:after{ content:""; display: block; clear: both; } footer{ background-color: #2a2a2a; box-sizing: border-box; } footer>div{ float: left; margin:50px 0 58px 50px; } p>a{ color: #e6e6e6; text-decoration: none; font-size: 14px; } div>p:first-child{ padding-bottom: 30px; } div>p:nth-child(2){ padding-bottom: 20px; } div>p:first-child>a{ font-size: 16px; } p>a:hover{ color: red; } div>p{ margin: 0; } footer:after{ content:""; display: block; clear: both; }
今天寫一個關於浮動的頁面，頁面高度不能設置。用元素將他撐開。