PC端固定布局[7]

2017年10月17日07:00:41 发表评论

本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现。

一.侧栏制作

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

//实际上,还去掉了高度,让其自适应

#container {
    width: 1263px;
    margin: 30px auto;
}
#container .sidebar {
    width: 340px;
    float: right;
}
//自适应后,footer 需要 clear:both
#footer {
    clear:both;
    position: relative;
    top: 20px;
}

以下三张图片,是连续在一列的,为了方便观看,分别截图。

PC端固定布局[7]

二.详细代码

//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="PC端固定布局[7]" alt="曼谷-芭提雅 6 日游">
<figcaption>曼谷-芭提雅 6 日游</figcaption>
</figure>
<figure>
<img src="img/hot2.jpg" alt="PC端固定布局[7]" alt="马尔代夫双鱼 6 日游">
<figcaption>马尔代夫双鱼 6 日游</figcaption>
</figure>
<figure>
<img src="img/hot3.jpg" alt="PC端固定布局[7]" alt="海南双飞 5 日游">
<figcaption>海南双飞 5 日游</figcaption>
</figure>
<figure>
<img src="img/hot4.jpg" alt="PC端固定布局[7]" alt="富山大阪东京 8 日游">
<figcaption>富山大阪东京 8 日游</figcaption>
</figure>
<figure>
<img src="img/hot5.jpg" alt="PC端固定布局[7]" alt="法瑞意德 12 日游">
<figcaption>法瑞意德 12 日游</figcaption>
</figure>
<figure>
<img src="img/hot6.jpg" alt="PC端固定布局[7]" alt="巴厘岛 6 日半游">
<figcaption>巴厘岛 6 日半游</figcaption>
</figure>
<figure>
<img src="img/hot7.jpg" alt="PC端固定布局[7]" alt="塞舌尔迪拜 9 日游">
<figcaption>塞舌尔迪拜 9 日游</figcaption>
</figure>
<figure>
<img src="img/hot8.jpg" alt="PC端固定布局[7]" 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: 30px auto;
}
#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;
}
注:本章为第47课。本次教程共63节课(由大庆seo工程师整理发布),循序渐进地教您响应式网站的制作。1-13课时为html5内容,14-40课时为css3内容,41-51课时为pc端固定布局网站制作实例,52-57课时为移动端流体布局网站制作实例,58-63课时为响应式网站制作实例。最贴心的是每节课示例代码提供免费下载。小白从第一节课开始学起,将走向前端开发,特别是目前最为流行的响应式网站高手之路......
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: