标签：background center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>COM</title>
<style>
body{
margin: 0;
}
ul{
list-style: none;
}
li{
line-height:50px;
text-align: center;
width: 50px;
height:50px;
float:left;
margin-left: 5px;
background: red;
</style>
</head>
<body>
<!-- .我（当前页面）当前所在文件夹
..我（当前页面）当前所在文件夹的上一个目录example:"../1.jpg"-->
<!-- #bottom锚点 -->
<!-- href:链接！ -->
<!-- target="blank"新建空白页打开 -->
<!-- <a href="tupians/fafafaf.html #bottom" target="blank"><img src="" alt="点我啊"></a> -->
<div style="width:500px;height:50px;margin: 0 auto;">
<ul>
<a href="tupians/1012.html #bottom" target="_blank_"><li>1</li></a>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
</html>
第一个红色1可链接
链接效果图
绿色图形叠加到红色图形上面。
方法一 用了position，瞎用的，效果倒是达到了
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin:0;
}
.uni{
float:left;
}
</style>
</head>
<body>
<div style="width: 1000px;height: 2000px;margin:0 auto;">
<div style="width: 1000px;height: 300px;background: red;position: relative;top:0px"></div>
<div style="width: 1000px;height: 150px;background: green;position: relative;top: -150px"></div>
<div style="width: 1000px;height: 300px;background: black;position: relative;top:0px"></div>
</div>
</body>
</html>
方法二 用的margin-top float
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin:0;
}
.uni{
float:left;
}
</style>
</head>
<body>
<div style="width: 1000px;height: 300px;margin:0 auto;">
<div style="width: 1000px;height: 150px;background: green;margin-top: 150px;" class="uni"></div>
<div style="width: 1000px;height: 300px;background: red;"></div>
</div>
</body>
</html>
本文出自 “12145919” 博客，请务必保留此出处http://12155919.blog.51cto.com/12145919/1861655
标签：background center
原文地址：http://12155919.blog.51cto.com/12145919/1861655
