靜語前端培訓第七天到第八天
阿新 • • 發佈：2018-08-05
about 第七天 ott image 自適應 mar idt round vhk
第七天到第八天，學習布局
2018年8月4日 學習時長：N個小時
前面花費的時間有一點點的長，編碼
分別嘗試使用Float、Position或者Flexbox來實現如下需求：
- 實現一個兩欄布局，左側占30%寬度，右側占70%寬度
- 實現一個兩欄布局，左側固定寬度，右側根據瀏覽器寬度進行自適應變化
- 實現一個兩欄布局，右側固定寬度，左側根據瀏覽器寬度進行自適應變化
- 實現一個三欄布局，左側固定寬度，右側固定寬度，中間部分寬度隨瀏覽器寬度變化而自適應變化
- 實現一個三欄布局，左側固定寬度，中間固定寬度，右側根據瀏覽器寬度變化而自適應變化
要求：
- 每一個需求都盡可能多地用多種方式來實現
這些還不是很難，看最後的的大boss：
參考如下設計稿實現HTML頁面及CSS樣式：鏈接: https://pan.baidu.com/s/1IndqG9nanVhKxwysibZZRg 密碼: vfs6
- 設計稿分為頭部，中間的Banner，主導航，內容區域，底部
- 頭部區域為100%寬的一個深色背景，頭部中間有一塊960px的定寬居中區域，裏面包括了左邊的Logo和右上角導航
- Banner為100%寬的區塊，中間右下方有banner輪顯的當前圖片數字的示例，其中正在顯示的圖片對應的數字有特殊樣式（註意不需要實現輪顯banner的業務邏輯，只是按照設計稿做靜態樣式）
- 主導航區域，有一個100%寬的灰色線條，線條之上，在中間960px區域是導航菜單，當前正在瀏覽頁對應的菜單有特殊樣式
- 主要內容區域，寬度為960px，裏面每個內容都有至少80px的padding，每一個內容的寬度均為自適應，可以使用flex布局
附源碼：
<html> <link rel="stylesheet" href="學習布局.css" type="text/css" /> <body> <div class="頭部"> <h1>LOGO</h1> <div class="右上角導航"> <a href="http://www.w3school.com.cn">W3Sschool</a> <a href="http://www.google.com">Google</a> <a href="http://www.wikipedia.org">Wikipedia</a></div> </div> <div class="中間的Banner"></div> <div class="右下角輪顯"> <div class="輪顯1">1</div> <div class="輪顯2">2</div> <div class="輪顯3">3</div> <div class="輪顯4">4</div> </div> <div class="主導航"> <div class="導航菜單"> <div class="nav-home">HOME</div> <div class="nav-profile">PROFILE</div> <div class="nav-about">ABOUT</div> </div> </div> <div class="內容區域"></div> <div class="文本框"> <div class="Content">This is Content1</div> <div class="Content">Maybe Content2</div> <div class="Content">Content3</div> </div> <div class="文本框"> <div class="Content">Content4</div> <div class="Content">Content5</div> <div class="Content">Content6</div> <div class="Content">Content7</div> </div> <div class="文本框"> <div class="Content">Content8</div> <div class="Content">Content9</div> <div class="Content">Content10</div> </div> </div> <div class="底部"> <p>© 2018 ife.baidu.com<p> </div> </body> </html> css: .頭部{ background:#444444; height:70px; text-indent:180px; color:white; } .中間的Banner{ height:500px; background:#66CC33; } h1{ font-size:20px; line-height:70px; } .主導航{ width: 100%; height: 60px; border-bottom: 1px solid #CCC; }.內容區域{ margin: 10px auto; width: 960px; } .文本框{ display: flex; } .Content { flex: 1 1 auto; box-sizing: border-box; margin: 5px; min-width: 200px; height: 160px; line-height: 160px; text-align: center; border: 1px solid #DDD; box-shadow: 0 0 5px #DDD; } .底部{ box-sizing: border-box; padding-top: 20px; width: 100%; height: 120px; color: #fff; text-align: center; background-color: #888888; } .右上角導航{ position:absolute; right:180px; top:20px; font-size:10px; } .右上角導航 a{ color:white;font-size:10px;} .右上角導航 a:hover{ color:red;} .輪顯1,.輪顯2,.輪顯3,.輪顯4{ position: absolute; bottom: -210px; width: 20px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #999999; background-color: #EEEEEE; opacity: 0.8; }.輪顯4{ right: 200px; } .輪顯3{ right: 230px; } .輪顯2{ right: 260px; } .輪顯1{ right: 290px; } .導航菜單 { margin: 0 auto; width: 960px; height: 60px; }.nav-home, .nav-profile, .nav-about { float: left; box-sizing: border-box; margin-top: 16px; width: 100px; height: 45px; text-align: center; line-height: 45px; border: 1px solid #CCC; border-bottom: none; border-top-left-radius: 20px; border-top-right-radius: 20px; background-color: #fff; } .nav-profile, .nav-about { background-color: #DDD; }
靜語前端培訓第七天到第八天