[07]項目實戰-PC 端固定布局(7)

2024-04-27 15:07:08

字體：大中小

來源：轉載

供稿：網友

一．側欄制作

本節主要設計一下內容頁面的側欄部分，分三個小塊。經過思考，側欄會包含一些圖片，而主要部分也會包含圖片，那么側欄放在左邊可能會和主欄的圖片沖突導致不協調，所以，把側欄更換到右邊。

//實際上，還去掉了高度，讓其自適應#container { width: 1263px; margin: 30pxauto;}#container .sidebar { width: 340px; float: right;}//自適應后，footer 需要 clear:both#footer { clear:both; position: relative; top: 20px;}

以下三張圖片，是連續在一列的，為了方便觀看，分別截圖。這里寫圖片描述

二．詳細代碼

//HTML 部分<div id="container"> <aside class="sidebar"> <div class="sidebox recommend"> <h2>景點推薦</h2> <div class="tag"> <a href="###">曼谷(12)</a> <a href="###">東京(5)</a> <a href="###">西雙版納(8)</a> <a href="###">漓江(16)</a> <a href="###">呼倫貝爾(4)</a> <a href="###">首爾(9)</a> <a href="###">巴厘島(15)</a> <a href="###">土耳其(22)</a> <a href="###">夏威夷(5)</a> <a href="###">巴厘島(11)</a> <a href="###">毛里求斯(7)</a> <a href="###">吉普島(4)</a> <a href="###">希臘(18)</a> <a href="###">法瑞意(8)</a> <a href="###">馬爾代夫(9)</a> <a href="###">新西蘭(16)</a> <a href="###">埃及(11)</a> <a href="###">迪拜(14)</a> <a href="###">斯里蘭卡(7)</a> <a href="###">麥哈頓(3)</a> <a href="###">大阪(15)</a> </div> </div> <div class="sidebox hot"> <h2>熱賣旅游</h2> <div class="figure"> <figure> <img src="img/hot1.jpg" alt="曼谷-芭提雅 6 日游"> <figcaption>曼谷-芭提雅 6 日游</figcaption> </figure> <figure> <img src="img/hot2.jpg" alt="馬爾代夫雙魚 6 日游"> <figcaption>馬爾代夫雙魚 6 日游</figcaption> </figure> <figure> <img src="img/hot3.jpg" alt="海南雙飛 5 日游"> <figcaption>海南雙飛 5 日游</figcaption> </figure> <figure> <img src="img/hot4.jpg" alt="富山大阪東京 8 日游"> <figcaption>富山大阪東京 8 日游</figcaption> </figure> <figure> <img src="img/hot5.jpg" alt="法瑞意德 12 日游"> <figcaption>法瑞意德 12 日游</figcaption> </figure> <figure> <img src="img/hot6.jpg" alt="巴厘島 6 日半游"> <figcaption>巴厘島 6 日半游</figcaption> </figure> <figure> <img src="img/hot7.jpg" alt="塞舌爾迪拜 9 日游"> <figcaption>塞舌爾迪拜 9 日游</figcaption> </figure> <figure> <img src="img/hot8.jpg" alt="花樣土耳其 10 日游"> <figcaption>花樣土耳其 10 日游</figcaption> </figure> </div> </div> <div class="sidebox treasure"> <h2>旅游百寶箱</h2> <div class="box"> <a href="###" class="trea1">天氣預報</a> <a href="###" class="trea2">火車票查詢</a> <a href="###" class="trea3">航空查詢</a> <a href="###" class="trea4">地鐵線路查詢</a> </div> </div> </aside> <div class="list"> list </div></div>//CSS 部分#container { width: 1263px; margin: 30pxauto;}#container .sidebar { width: 340px; float: right;}#container .sidebox { border: 1px solid #eee; margin: 0 0 10px 0; text-align: center;}#container .sidebox h2 { font-size: 20px; font-weight:normal; letter-spacing: 1px; height: 40px; line-height:40px; text-indent:10px; background-color: #fafafa; color: #666; text-align: left;}#container .tag { padding: 10px 0;}#container .tag a { display: inline-block; margin: 2px 0; width: 100px; height: 35px; line-height:35px; color: #999; background-color: #eee; text-align: left; text-indent:8px;}#container .tag a:hover { background-color: #458b00; color: #fff;}#container .figure { padding: 10px 0;}#container .hot figure { display: inline-block; color: #666; padding: 4px;}#container .box { padding: 10px 0;}#container .box a { display: inline-block; margin: 2px 0; width: 150px; height: 40px; line-height:40px; color: #999; background-color: #eee; text-align: left; text-indent:35px;}#container .box a.trea1 { background: #eee url(../img/trea1.png) no-repeat 10px center;}#container .box a.trea2 { background: #eee url(../img/trea2.png) no-repeat 10px center;}#container .box a.trea3 { background: #eee url(../img/trea3.png) no-repeat 10px center;}#container .box a.trea4 { background: #eee url(../img/trea4.png) no-repeat 10px center;}#container .list { width: 900px; float: left;}

上一篇：HTML5 drag

下一篇：node.js(express)連接mongoDB入門指導