作业1：
固定定位实现在线ke服
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ在线ke服实例</title>
<style>
body{
margin: 0px;
height: 2000px;
}
.box1{
width: 150px;
height: 200px;
background-color: lightblue;
position: fixed;
bottom: 100px;
right: 0px;
border-radius: 5px ;
margin: 5px ;
}
.text{
text-align: center;
}
</style>
</head>
<body>
<div class="box1">
<h3 class="text">在线ke服</h3>
<ul>
<li><a href=""><img src="tengxun12.jpg" style="width:20px;">售前ke服</a></li>
<li><a href=""><img src="tngxun12.jpg" style="width:20px;">售后ke服</a></li>
<li><a href=""><img src="tengxun12.jpg" style="width:20px;">技术支持</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
作业2：
实例
<!-- 双飞翼DOM结构布局 -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<style>
.header, .footer {
width:100%;
height:60px;
background-color:lightgrey;
}
.content {
width:1000px;
min-height:100%;
background-color:gray;
}
.container {
width:1000px;
margin:auto;
background-color:yellow;
}
.warp {
width:100%;
background-color:cyan;
float:left;
}
.main {
min-height:600px;
background-color:wheat;
margin-left:200px;
margin-right:200px;
}
.left {
width:200px;
min-height:600px;
background-color:lightblue;
float:left;
margin-left:-100%;
}
.right {
width:200px;
min-height:600px;
background-color:lightgreen;
float:left;
margin-left:-200px;
}
</style>
</head>
<body>
<!-- 双飞翼DOM结构 -->
<!-- 头部区块 -->
<div class="header">
<div class="content">头部</div>
</div>
<!-- 主体区块 -->
<div class="container">
<div class="warp">
<div class="main">主体内容</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer">
<div class="content">底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
