根据上周五的所学的知识进行图文混排和固定定位的练习。
以下是我的代码。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位制作QQ在线kefu、浮动的图文混排</title>
<style>
body{
margin: 0;
padding: 0;
height: 2000px;
}
.gd{
width: 170px;
border: 1px solid black;
border-radius: 8px;
position: fixed;
bottom: 1px;
right: 0;
}
.gd1{
width: 10px;
height: 19px;
line-height:30px;
float: left;
margin-left: 25px;
}
.gd2{
width: 170px;
text-align: center;
border: 1px solid black;
}
a{
text-decoration: none;
}
.bt{
position: fixed;
bottom: 75px;
right: 10px;
}
.box2{
width: 800px;
text-align: center;
background: lightgray;
border-radius: 20px;
}
.twhp{
overflow: hidden;
}
.images{
width: 200px;
height: 200px;
background: #0388f1;
float: left;
}
.wz{
width: 400px;
float: left;
line-height: 30px;
text-indent: 32px;
}
.images1{
width: 200px;
height: 100px;
background: #0388f1;
margin-left: 600px;
}
</style>
</head>
<body>
<div class="box1">
<div class="bt"><h3>固定定位QQkefu</h3></div>
<div class="gd">
<div class="gd1">
<img src="image/qq.jpg" >
</div>
<div class="gd2">
<a href="http://www.qq.com">:QQ在线kefu1</a>
</div>
<div class="gd1">
<img src="image/qq.jpg" >
</div>
<div class="gd2">
<a href="http://www.qq.com">:QQ在线kefu2</a>
</div>
<div class="gd1">
<img src="image/qq.jpg" >
</div>
<div class="gd2">
<a href="http://www.qq.com">:QQ在线kefu3</a>
</div>
<div class="gd1">
<img src="image/qq.jpg" >
</div>
<div class="gd2">
<a href="http://www.qq.com">:QQ在线kefu4</a>
</div>
</div>
</div>
<div class="box2">
<h2>图文混排</h2>
<div class="twhp">
<div class="images"><img src="image/tupian.jpg">我是图片</div>
<div class="wz" >这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</div>
<div class="images1"><img src="image/tupian.jpg">我还是一张图片</div>
</div>
</div>
<hr>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例