首页 > 代码库 > 2016-10-13笔记
2016-10-13笔记
<!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="http://www.mamicode.com/tupians/fafafaf.html #bottom" target="blank"><img src="" alt="点我啊"></a> -->
<div style="width:500px;height:50px;margin: 0 auto;">
<ul>
<a href="http://www.mamicode.com/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
2016-10-13笔记