最终效果：
Html页面代码：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>项目实战 PC端固定布局</title> <link rel="stylesheet" href="css/basic.css"> <link rel="stylesheet" href="css/column.css"> </head> <body> <!-- 导航了部分 --> <!-- body nav section 需要h1~h6标题大纲 div header不需要 --> <header id="header"> <div class="center"> <!-- 一个页面最好就一个h1 让搜索引擎能更好的抓取关键字 --> <h1 class="logo">旅行社</h1> <nav class="link"> <h2 class="none">网站导航</h2> <ul> <li><a href="index.html">首页</a></li> <li class="active"><a href="infomation.html">旅游咨询</a></li> <li><a href="###">机票订购</a></li> <li><a href="###">风景欣赏</a></li> <li><a href="###">公司简介</a></li> </ul> </nav> </div> </header> <div id="headline"> <div class="center"> <hgroup> <h2>旅游咨询</h2> <h3>介绍各种最新的旅游信息，咨询要问,景点攻略</h3> </hgroup> </div> </div> <div id="container"> <aside class="sidebar"> <div class="sidebox recommend"> <h2>景点推荐</h2> <div class="tag"> <ul> <li><a href="###">曼谷(12)</a></li> <li><a href="###">曼谷(12)</a></li> <li><a href="###">曼谷(12)</a></li> <li><a href="###">曼谷(12)</a></li> <li><a href="###">曼谷(12)</a></li> <li><a href="###">曼谷(12)</a></li> <li><a href="###">曼谷(12)</a></li> <li><a href="###">曼谷(12)</a></li> <li><a href="###">曼谷(12)</a></li> <li><a href="###">曼谷(12)</a></li> <li><a href="###">曼谷(12)</a></li> <li><a href="###">曼谷(12)</a></li> <li><a href="###">曼谷(12)</a></li> <li><a href="###">曼谷(12)</a></li> <li><a href="###">曼谷(12)</a></li> </ul> </div> </div> <div class="sidebox hot"> <h2>热门旅游</h2> <figure class="figure"> <img src="img/hot1.jpg" alt="曼谷芭提雅6日游"> <figcaption>曼谷芭提雅6日游</figcaption> </figure> <figure class="figure"> <img src="img/hot2.jpg" alt="曼谷芭提雅6日游"> <figcaption>曼谷芭提雅6日游</figcaption> </figure> <figure class="figure"> <img src="img/hot3.jpg" alt="曼谷芭提雅6日游"> <figcaption>曼谷芭提雅6日游</figcaption> </figure> <figure class="figure"> <img src="img/hot4.jpg" alt="曼谷芭提雅6日游"> <figcaption>曼谷芭提雅6日游</figcaption> </figure> <figure class="figure"> <img src="img/hot5.jpg" alt="曼谷芭提雅6日游"> <figcaption>曼谷芭提雅6日游</figcaption> </figure> <figure class="figure"> <img src="img/hot6.jpg" alt="曼谷芭提雅6日游"> <figcaption>曼谷芭提雅6日游</figcaption> </figure> <figure class="figure"> <img src="img/hot7.jpg" alt="曼谷芭提雅6日游"> <figcaption>曼谷芭提雅6日游</figcaption> </figure> <figure class="figure"> <img src="img/hot8.jpg" alt="曼谷芭提雅6日游"> <figcaption>曼谷芭提雅6日游</figcaption> </figure> </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"> <div class="infor"> <ul class="left"> <li><a href="###">限时特价</a></li> <li><a href="###">热门推荐</a></li> </ul> <ul class="right"> <li><a href="###" class="selected">推荐</a></li> <li><a href="###">折扣</a></li> <li><a href="###">价格</a></li> </ul> </div> <figure class="tour"> <img src="img/tour1.jpg" alt="曼谷芭提雅6日游"> <figcaption> <article> <header> <hgroup> <h2>曼谷-芭提雅6日游</h2> <h3>抱团特惠，超丰富景点 升级1晚国五 无自费 赠送600成人卷。。。</h3> </hgroup> </header> <ol> <li><mark>交通</mark>：春秋航空:杭州出发，无需转机</li> <li><mark>团期</mark>：11/01、11/03、11/08...</li> </ol> <div class="buy"> <div class="price"> ￥<strong>2864</strong> <s>￥3600</s> </div> <div class="reserve"> <a href="###">立即抢购</a> </div> </div> <div class="type">国内长线</div> <div class="disc"><span>4.7折</span></div> <footer>本团旅游中旅赞助截止时间<time>2050-05-05</time></footer> </article> </figcaption> </figure> <div class="more">加载更多...</div> </div> </div> <!-- 页脚部分 --> <footer id="footer"> <div class="top"> <div class="block left"> <h2>合作伙伴</h2> <!-- 水平线 --> <hr> <ul> <li>途牛旅游网</li> <li>驴妈妈旅游网</li> <li>携程旅游网</li> <li>去哪旅游网</li> </ul> </div> <div class="block center"> <h2>旅游咨询QA</h2> <!-- 水平线 --> <hr> <ul> <li>旅游合同签订方式</li> <li>儿童机票价格</li> <li>旅游线路定制</li> <li>单房差是什么</li> <li>旅游保险种类</li> </ul> </div> <div class="block right"> <h2>联系方式</h2> <!-- 水平线 --> <hr> <ul> <li>微博:weibo.com/lvyou</li> <li>邮件:lvyou@lvyou.com</li> <li>地址:沈阳铁西金桂路123号</li> </ul> </div> </div> <div class="bottom"> Copyright© jjjj | ICP 备 131313312112号 | 旅行社经营许可证 : L-YC-BB12313212 </div> </footer> </body> </html>
CSS 代码 内容：column.css
@charset "utf-8"; /*-------------------------------咨询页面 侧栏主页---------------------------------------*/ #headline { width: 100%; /*缩小页面滚动条右侧出现白色区域*/ min-width: 1263px; height: 300px; /*渐变 方位 颜色 透明度 rgba */ /*向右下方 黑色渐变 透明度0.7 - 全透明*/ background: linear-gradient(to right bottom, rgba(0,0,0,0.7), rgba(0,0,0,0)), url(../img/headline.jpg) no-repeat center; } #headline .center { width: 1263px; height: 300px; margin: 0 auto; } #headline hgroup { padding: 100px 0 0 50px; } #headline h2 { color: #eee; font-size: 36px; letter-spacing: 1px; } #headline h3 { color: #eee; font-size: 20px; letter-spacing: 1px; } #container { width: 1263px; margin: 30px auto; } #container .sidebar { width: 340px; /*background-color: #eee;*/ float: right; } #container .sidebox { border: 1px solid #eee; /*下面的边距10px 上右下左*/ margin: 0 0 10px 0; text-align: center; } #container .sidebox h2 { font-size: 20px; font-weight: normal; letter-spacing: 1px; /*首行缩进*/ text-indent: 8px; height: 40px; line-height: 40px; background-color: #fafafa color: #666; text-align: left; } #container .tag { margin: 10px 0; } #container .tag li { background-color: #eee; display: inline-block; width: 100px; height: 35px; line-height: 35px; margin: 2px 0; color: #999; } #container .tag a { display: block; color: #999; } #container .tag a:hover { background-color: #458b00; color: white; } #container .figure { padding: 10px 0; } #container figure { display: inline-block; padding: 4px; color: #666; } #container .box { margin: 10px 0; } #container .box a { background-color: #eee; display: inline-block; width: 157px; height: 40px; line-height: 40px; margin: 2px 0; color: #999; } #container .box a:hover { color: green; } /*旅游百宝箱背景图片*/ #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: 910px; /*background-color: #ccc;*/ float: left; } #container .infor { height: 45px; line-height: 45px; background-color: #eee; margin: 0 0 20px 0; } #container .left { display: inline-block; float: left; } #container .left li { display: inline-block; width: 150px; height: 43px; line-height: 43px; text-align: center; } #container .left li:first-child { background-color: #fff; border-top: 2px solid #458b00; /*向右偏移1像素 做边框线*/ position: relative; left: 1px; } #container .left a { color: #666; } #container .right { display: inline-block; float: right; padding: 0 20px 0 0; } #container .right li { display: inline-block; width: 60px; height: 45px; line-height: 45px; text-align: center; } #container .right a { padding: 3px 8px; color: #666; } #container .right a.selected, #container .right a:hover { background-color: #458b00; color: #fff; } #container .tour { width: 910px; /*background-color: #eee;*/ padding: 0; margin: 0 0 20px 0; position: relative; border: 1px solid #eee; } #container .tour img { float: left; } #container .tour figcaption { width: 530px; height: 230px; /*background-color: red;*/ float: right; } #container .tour hgroup { width: 300px; } #container .tour h2 { font-size: 24px; color: #333; font-weight: normal; padding: 10px 0 10px 25px; } #container .tour h3 { font-size: 16px; color: #666; line-height: 1.5; font-weight: normal; padding: 10px 0 10px 25px; } #container .tour ol { padding: 0 0 0 25px; color: #666; line-height: 2; } #container .tour mark { background-color: #fff; border: 1px solid #458b00; border-radius: 4px; padding: 0 4px; color: #458b00; } #container .tour .buy { position: absolute; top: 55px; right: 30px; } #container .tour .price { color: #f60; font-size: 20px; } #container .tour .price strong { font-size: 36px; } #container .tour s { font-size: 16px; color: #999; } #container .tour .reserve { margin: 10px 0 0 0; } #container .tour .reserve a { display: block; height: 40px; widows: 152px; font-size: 20px; line-height: 40px; border-radius: 4px; color: #fff; background-color: #f60; text-align: center; } #container .tour .type { width:90px; height: 25px; line-height: 25px; text-align: center; background-color: #59b200; position: absolute; color: white; font-size: 14px; top:0; left: 0; } #container .tour .disc { position: absolute; right: 0; top: 0; width: 52px; height: 52px; background: url(../img/disc.png) no-repeat ; } #container .tour .disc span { /*折扣旋转45度 对内联没有用 只对区块有用*/ display: block; transform: rotate(45deg); width: 52px; height: 52px; padding: 5px 0 0 0; text-indent: 7px; font-size: 14px; color: #ff7a4d; } #container .tour footer { width: 530px; height: 30px; line-height: 30px; letter-spacing: 1px; text-indent: 25px; background-color: #fafafa; position: absolute; bottom: 0; } #container .more { width: 200px; height: 50px; border-radius: 10px; line-height: 50px; margin: 0 auto; text-align: center; background-color: #fafafa; border: 1px solid #eee; cursor: pointer; font-size: 18px; color: #666; } #container .tour time { color: #458b00; }