[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;
}