[07]项目实战-PC端固定布局(7)

一．侧栏制作

本节主要设计一下内容页面的侧栏部分，分三个小块。经过思考，侧栏会包含一些图片，而主要部分也会包含图片，那么侧栏放在左边可能会和主栏的图片冲突导致不协调，所以，把侧栏更换到右边。

//实际上，还去掉了高度，让其自适应 #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; }