百度前端學院學習Day3
阿新 • • 發佈：2018-12-12
前言
之前初步瞭解了盒模式的概念，現在來學習如何佈局。
7、8：學習佈局
目標
學習佈局的各種方式
閱讀
編碼
分別嘗試使用Float、Position或者Flexbox來實現如下需求：
- 實現一個兩欄佈局，左側佔30%寬度，右側佔70%寬度
- 實現一個兩欄佈局，左側固定寬度，右側根據瀏覽器寬度進行自適應變化
- 實現一個兩欄佈局，右側固定寬度，左側根據瀏覽器寬度進行自適應變化
- 實現一個三欄佈局，左側固定寬度，右側固定寬度，中間部分寬度隨瀏覽器寬度變化而自適應變化
- 實現一個三欄佈局，左側固定寬度，中間固定寬度，右側根據瀏覽器寬度變化而自適應變化
html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>7-8天練習</title> </head> <body> <div id="first"> <div id="head"><img src="https://www.mercedes-benz.com.cn/content/dam/mb-cn/footer/mercedes-benz-logo-desktop.png"> <ul class="link"> <li><a href="#"class="active">line1</a></li> <li><a href="#">line2</a></li> <li><a href="#">line3</a></li> <li><a href="#">line4</a></li> <li><a href="#">line5</a></li> </ul> </div> </div> <div class="rotation"> <ul> <li><a href="#" class="active">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </div> <article class="content"> <div> <a href="#">HOME</a> <a href="#">PROFILE</a> <a href="#">ABOUT</a> </div> </article> <article class="panels"> <div id="asd"> <section>content1</section> <section>content2</section> <section>content3</section> </div> <div id="ccc"> <section>content4</section> <section>content5</section> <section>content6</section> <section>content7</section> </div> <div id="asd"> <section>content8</section> <section>content9</section> <section>content10</section> </div> </article> <footer> <p>©2018 ife.baidu.com</section> </div> </footer> </html>
CSS
html { font-family: sans-serif; } body{ margin:0; padding: 0; } #first{ width:100%; background-color:#000; height:100px; margin:0; position: fixed; top:0; z-index:1; } #head{ width:960px; margin:0 auto; height:100%; position:relative; } #head img{ max-height:70px; padding-top:10px; } .link{ position:absolute; right: 0; bottom:-10px; } .link li { float: right; list-style-type: none; width: 50px; } .link li a { text-decoration: none; color: #888; } .link li a:hover{ background-color: #5c5c5c; color: white; padding:1px 6px; } .rotation{ width:100%; height:450px; margin:0 auto; background-color:#5cb100; position:relative; top:84px; } .rotation ul li{ position:relative; list-style-type: none; width: 40px; bottom:-410px; left:90%; display:inline-block; } .rotation ul li a{ text-decoration: none; border:1px solid white; padding:5px 10px; color: #fff; box-sizing:border-box; } .rotation li a:focus, .rotation li a:hover { background-color: rgba(255,255,255,0.6); color: black; padding:15px 10px 5px 10px; text-align:center; } .content{ margin: 0; padding: 0; height: 64px; border-bottom:1px solid #c9c9c9; position:relative; top:110px; } .content div{ display: flex; align-items: flex-end; margin: 0 auto; padding: 0; width: 960px; height: 64px; } .content div a{ margin: 0; padding: 0; width: 140px; height: 50px; border: #c9c9c9 1px solid; border-bottom: none; border-radius: 25px 25px 0 0; background: #ddd; text-align: center; line-height: 48px; text-decoration: none; } .content a:link, .content a:visited {color: #333; } .content a:focus,.content a:hover{ background-color: white; color: black; } .panels div { box-sizing:border-box; position:relative; top:110px; display: flex; margin: 0 auto; padding: 0; width: 960px; justify-content: space-around; } .panels section{ flex:1; box-sizing:border-box; margin: 8px 8px 0 0; padding: 60px; text-align: center; line-height: 40px; border: 1px solid #d4d4d4; } footer{ padding:30px; position:absolute; margin-top:130px; width:100%; height:100px; background-color:gray; text-align:center; box-sizing:border-box; }
驗證
請反覆確認你是否掌握了以下概念
- Position相關概念及使用Postion進行佈局的場景和方法
- Flexbox相關概念及使用Flexobx進行佈局的場景和方法
- 掌握常用的兩欄、三欄佈局的各種方式