</div>
<div class="goTop">
^
</div>
<!--<div class="rela">
<h1>>_<</h1>
</div>-->
<div class="abso">
<img src="news.jpg" />
<p>喵喵喵</p>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动float</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
body{
background-color: #bbb;
}
.headerwrap{
background-color: #fff;
}
.header{
width: 1200px;
height: 80px;
margin: 0 auto;
}
.logo{
width: 150px;
}
.nav{
float: right;
}
h1{
float:left;
}
/*float:包裹性 向上性 不重叠*/
.nav li{
float: left;
margin-right: 20px;
line-height: 80px;
}
.nav li a{
color: #000;
}
.goTop{
width:30px;
height:30px;
border:1px solid #ccc;
background-color:#fff;
color:blue;
position:fixde;
right:0;
top:300px;
font-size:20px;
text-align:center;
line-height:30px;
cursor:pointer;
}
.goTop:hover{
color:white;
background-color:blue;
}
/*.rela{
width:100px;
height:100px;
background-color:red;
position:relative;
left:100px;
top:100px;
text-align:center;
}*/
.abso{
width:450px;
height:279px;
position:relative;
margin:0 autu 400px;
borber:1xp solid red;
}
.abso p{
width:450px;
height:50px;
position:absolute;
bottom:-50px;
background-color:rgba(0,0,255,0.5);
/*opacity: 0.5;*//*不透明度*/
transition:1s;/*过渡*/
/*display: none;*/
}
</style>
</head>
<body>
<!-- 文档流:普通流/浮动流(float)/
定位流(fixed固定定位 relative相对定位 absolute绝对定位 stacti) -->
<div class="headerwrap">
<div class="header">
<h1>
<img class="logo" src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</h1>
<ul class="nav">
<li>
<a href="">百度首页</a>
</li>
<li>
<a href="">消息</a>
</li>
<li>
<a href="">日历</a>
</li>
<li>
<a href="">设置</a>
</li>
<li>
<a href="">用户名</a>
</li>
</ul>
</div>
</div>
<div style="">
</div>
<div class="goTop">
^
</div>
<!--<div class="rela">
<h1>>_<</h1>
</div>-->
<div class="abso">
<img src="news.jpg" />
<p>喵喵喵</p>
</div>
</body>
</html>