实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2018年8越17号作业</title>
</head>
<body>
<!-- 在线 -->
<div class="box">
<ul>
<li><a href="">电话<br>咨询</a></li>
<li><a href="">售前<br>咨询</a></li>
<li><a href="">申请<br>体验</a></li>
</ul>
</div>
<!-- 在线 -->
<!-- 图文混排 -->
<h3>图文混排</h3>
<hr>
<div class="box1">
<img src="img/img1.jpg" alt="">
<p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</div>
<!-- 图文混排 -->
<!-- 双飞翼布局 -->
<hr>
<h3>双飞翼布局</h3>
<div class="box2">
<div class="center"><div class="content">center</div></div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<!-- 双飞翼布局 -->
<!-- 圣杯布局 -->
<hr>
<h3>圣杯布局</h3>
<div class="box3">
<div class="center1">center</div>
<div class="left1">left</div>
<div class="right1">right</div>
</div>
<!-- 圣杯布局 -->
<style>
*{margin: 0;padding: 0}
h3{line-height: 40px;text-align: center;}
hr{margin-bottom: 20px;}
.box{width: 80px;background: #1f77e7;position: fixed;right: 0;top:50%;z-index: 1;}
.box ul{width:80px;margin: 0;}
.box ul li{width: 80px;color: #FFF;padding: 15px 0;list-style: none;text-align: center;border-bottom:1px solid #0058d8; }
.box ul li a{color: #FFF;}
.box1{width: 1000px;margin:10px auto auto;overflow: hidden; padding-bottom: 20px;}
.box1 img{width: 200px;height: 200px;float:left;padding-right: 15px;}
.box1 p{line-height: 32px;padding-top: 10px;text-indent: 2em;text-align: justify;}
.box2{width: 1000px;margin:auto;color: #fff;font-size: 30px;text-align: center;overflow: hidden;padding-bottom: 20px}
.center,.left,.right{float:left;height: 200px;}
.center{width:100%;background:wheat;}
.left,.right{width:200px;height: 200px;line-height: 200px;}
.left{margin-left: -100%;background: green;}
.right{margin-left: -200px;background: yellow;}
.content{padding: 0 200px;line-height: 200px;}
.box3{padding: 0 200px 0 120px;min-width: 1000px;}
.center1{width:100%;height: 300px;background: rgb(33,201,218);float: left;}
.left1{width:100px;height:300px;background: rgb(231,92,229);margin-left: -100%;float: left;
position: relative;left: -120px;
}
.right1{width:180px;height:300px;background: rgb(182,237,113);margin-left: -180px;float: left;
position: relative;right: -200px;
}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
