Correction status:Uncorrected
Teacher's comments:
css布局案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;} .qq{width: 50px;height: 120px;background: #ccc;position: absolute;right: 5px;top:50%;} ul li{font-size: 14px;line-height: 24px;text-align: center} .title{text-align: center;line-height: 30px;} p{font-size: 14px;line-height: 24px;text-indent: 2em;} img{float: left;width: 100px;} .box{width: 500px;margin: 0 auto} .box2,.box3{margin-top: 40px;} .header, .footer { width: 100%;height: 60px;background: lightgray;} .footer {clear: both;} .container{width: 1000px;margin:0 auto;overflow: hidden;background: yellow;} .content {width: 1000px;min-height: 100%;background: gray;margin: auto;text-align: center;line-height: 60px;} .wrap {width: 100%;background: cyan;float: left;} .main {min-height:600px;margin: 0 200px; background: wheat;} .left {width: 200px;min-height:600px;float:left;margin-left:-100%;background: lightskyblue;} .right {width: 200px;min-height:600px;float:left;margin-left:-200px; background: lightgreen;} .container1 {width: 600px;background-color: yellow;margin:auto;overflow: hidden;padding:0 200px;} .container1 .main1 {min-height: 650px;width: 100%;float:left;background-color: wheat;} .container1 .left1 {width: 200px;min-height: 650px;float:left;margin-left: -100%;position: relative;left: -200px;background-color: lightskyblue;} .container1 .right1 {width: 200px;min-height: 650px;float:left;margin-left:-200px;position: relative;right:-200px;background-color: lightgreen;} </style> </head> <body> <div class="qq"><!--qq客定位布局--> <ul> <li>客 服1</li> <li>客 服2</li> <li>客 服3</li> <li>客 服4</li> <li>客 服5</li> </ul> </div> <div class="box"><!--浮动图文混排--> <h2 class="title">FF91启动整车组装待售 车主:豪圈200万元售价很好卖</h2> <img src="https://inews.gtimg.com/newsapp_match/0/4917869295/0"> <p>FF 91首台白车身已运抵美国汉福德基地,并正式启动了整车组装工作,预计2019年第一季度FF 91将按时达成量产。</p> </div> <div class="box2"><!--双飞翼布局--> <div class="header"> <div class="content">网站头部</div> </div> <!-- 主体 --> <div class="container"> <div class="wrap"> <div class="main">主体内容区</div> </div> <div class="left">左侧</div> <div class="right">右侧</div> </div> <!-- 底部 --> <div class="footer"> <div class="content">网站底部</div> </div> </div> <div class="box3"><!--圣杯布局--> <div class="header"> <div class="content">网站头部</div> </div> <!-- 内容区 --> <div class="container1"> <div class="main1">主体</div> <div class="left1">左侧</div> <div class="right1">右侧</div> </div> <!-- 底部 --> <div class="footer"> <div class="content">网站底部</div> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例