第31章项目实战-pc端固定布局

31-PC端固定布局学习要点

主讲教师：本课程由北风网和瓢城 一．侧栏制作片，而主要部分也会包含，那么侧栏放在左边可能会和主栏的导致不协调，所以，我们把侧栏更换到右边。#container{width:1263px;margin:30pxauto;}{width:340px;float:right;}//自适应后，footer需要clear:both#footer{top:20px;}以下三 ，是连续在一列的，为了方 ，分别截图二．详细代码//HTML部<div<aside<div <h2>景点推荐<div<ahref="###"><ahref="###"><ahref="###">麦<divclass="sidebox<h2>热卖旅游<div<figcaption>曼谷-芭提雅6日游<figcaption>马尔代夫双鱼6日游<figcaption>海南双飞5日游<figcaption>富山大阪东京8日游<figcaption>法瑞意德12日游<figcaption>巴厘岛6日半游<figcaption>塞舌尔迪拜9日游<figcaption>花样土耳其10日游<divclass="sidebox<h2>旅游百宝箱<div""//CSS部#containerwidth:1263px;margin:30pxauto;}{width:340px;float:right;}#container{border:1pxsolid#eee;margin:000;text-align:}#container.sidebox{font-size:20px;font-weight:normal;letter-spacing:1px;height:40px;line-height:40px;text-indent:color:#666;text-align:}#container{padding:10px}#container.tag{disy:inline-block;margin:2px0;width:100px;height:35px;color:#999;text-align:left;text-indent:}#container.tag{background-color:#458b00;color:#fff;}{padding:10px}#container.hot{disy:inline-block;color:#666;padding:}#container{padding:10px}#container.box{disy:inline-block;margin:2px0;width:150px;height:40px;color:#999;text-align:left;text-indent:}#container.boxa.trea1background:#eeeurl(../img/trea1.png)no-repeat10px}#container.boxa.trea2background:#eeeurl(../img/trea2.png)no-repeat10px}#container.boxa.trea3background:#eeeurl(../img/trea3.png)no-repeat10px}#container.boxa.trea4background:#eeeurl(../img/trea4.png)n