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>运行实例 »
点击 "运行实例" 按钮查看在线实例
