时间：2023-07-06 01:33:01 | 来源：网站运营
时间：2023-07-06 01:33:01 来源：网站运营
Web前端培训 定位属性、列表的高级应用及带有图片列表的网页制作（上）：我们在前面学过文档流，文档流分为普通文档流和抽离文档流，我们讲过浮动可以使元素抽离文档流，那还有什么属性可以抽离文档流呢？那就是定位属性。<!DOCTYPE html>显示效果：
<html>
<head>
<meta charset="UTF-8">
<title>定位属性-position</title>
<style>
.box{
width:100px;
height:100px;
background:red;
position: fixed;
left:50%;
top:50%;
margin: -50px 0 0 -50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>显示效果：
<html>
<head>
<meta charset="UTF-8">
<title>定位属性-position</title>
<style>
body{
height: 2000px;
}
.war1{
position: fixed;
left:10px;
top:20px;
}
.war2{
position: fixed;
right:10px;
top:20px;
}
</style>
</head>
<body>
<div class="war1">
<img src="img/war.png" />
</div>
<div class="war2">
<img src="img/war.png" />
</div>
</body>
</html>
<!DOCTYPE html>显示效果：
<html>
<head>
<meta charset="UTF-8">
<title>定位属性-position</title>
<style>
div{
width: 300px;
height: 100px;
}
.box1{
background: red;
}
.box2{
background: yellow;
position: relative;
left: 100px;
top:150px;
}
.box3{
background: cyan;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>
<!DOCTYPE html>显示效果：
<html>
<head>
<meta charset="UTF-8">
<title>定位属性-position</title>
<style>
div{
width: 300px;
height: 100px;
}
.box1{
background: red;
}
.box2{
background: yellow;
position: absolute;
left: 100px;
top:150px;
}
.box3{
background: cyan;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>
<!DOCTYPE html>显示效果：
<html>
<head>
<meta charset="UTF-8">
<title>定位属性-position</title>
<style>
.parent{
width: 600px;
height: 300px;
background: greenyellow;
margin: 0 auto;
}
.parent div{
width: 300px;
height: 100px;
}
.box1{
background: red;
}
.box2{
background: yellow;
position: absolute;
left: 100px;
top:150px;
}
.box3{
background: cyan;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
<!DOCTYPE html>显示效果：
<html>
<head>
<meta charset="UTF-8">
<title>定位属性-position</title>
<style>
.parent{
width: 600px;
height: 300px;
background: greenyellow;
margin: 0 auto;
position: relative;
}
.parent div{
width: 300px;
height: 100px;
}
.box1{
background: red;
}
.box2{
background: yellow;
position: absolute;
left: 100px;
top:150px;
}
.box3{
background: cyan;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
<!DOCTYPE html>显示效果：
<html>
<head>
<meta charset="UTF-8">
<title>定位属性-position</title>
<style>
.parent{
width: 600px;
height: 300px;
background: greenyellow;
margin: 0 auto;
position: relative;
}
.parent div{
width: 300px;
height: 100px;
}
.box1{
background: red;
position: absolute;
left: 100px;
top:50px;
}
.box2{
background: yellow;
position: absolute;
left: 150px;
top:100px;
}
.box3{
background: cyan;
position: absolute;
left: 200px;
top:150px;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
<!DOCTYPE html>显示效果：
<html>
<head>
<meta charset="UTF-8">
<title>定位属性-position</title>
<style>
.parent{
width: 600px;
height: 300px;
background: greenyellow;
margin: 0 auto;
position: relative;
}
.parent div{
width: 300px;
height: 100px;
}
.box1{
background: red;
position: absolute;
left: 100px;
top:50px;
z-index: 3;
}
.box2{
background: yellow;
position: absolute;
left: 150px;
top:100px;
z-index: 2;
}
.box3{
background: cyan;
position: absolute;
left: 200px;
top:150px;
z-index: 1;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
<!DOCTYPE html>显示效果：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.banner{
width: 730px;
height: 454px;
margin: 0 auto;
position: relative;
}
ul{
list-style: none;
position: absolute;
left: 50%;
bottom: 20px;
}
li{
float: left;
width: 20px;
height: 20px;
background: #3e3e3e;
border-radius: 50%;
text-align: center;
line-height: 20px;
font-size: 12px;
color: #fff;
margin-right: 5px;
}
.active{
background: #b61b1f;
}
</style>
</head>
<body>
<div class="banner">
<img src="img/w.jpg" width="730" height="454"/>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
关键词：图片,培训,定位,属性,高级
在线咨询
