摘要：花了一些时间来做这个效果，还是不太理想，没有把下面返回顶部的文字加上去，应该怎么加上呢，其他的基本都实现了。<!DOCTYPE html> <html> <head> <meta charset="UTF-8" />
花了一些时间来做这个效果，还是不太理想，没有把下面返回顶部的文字加上去，应该怎么加上呢，其他的基本都实现了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>仿爱奇艺首页回到顶部</title>
<link rel="stylesheet" type="text/css" href="static/css/iqiyi.css">
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.css">
<script src="static/js/jquery.js"></script>
</head>
<script>
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()>150) {
$('#back').fadeIn(500)
}else{
$('#back').fadeOut(500)
}
})
$('#back').hover(function(){
$(this).stop().animate({'width':'150px'},1000)
},
function(){
$(this).stop().animate({'width':'50px'},1000)
})
})
</script>
<body>
<div>
<a href=""></a>
<div>
<div>
<img src="static/images/iqiyi.png">
</div>
<div>
<div>
<p>熊出没</p>
<span class="fa fa-camera"></span>
</div>
<div>
<span class="fa fa-search">
</span><p>搜全网</p>
</div>
</div>
</div>
</div>
<div>
</div>
<div>
<p id="back"><a href=""><span class="fa fa-hand-o-up"></span></a></p>
</div>
</body>
</html>*{
margin:0px;
padding:0px;
}
.clr{
clear:both;
}
.top{
background: #000;
height:70px;
}
.header_left{
float:left;
width:300px;
}
.header_left img{
height:50px;
line-height: 50px;
width:110px;
margin:10px 40px 10px;
}
.header_middle{
width:600px;
float:left;
}
.header_middle .header_search{
float:left;
background:#333;
height:50px;
width:450px;
line-height:50px;
margin:10px 0px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
cursor: pointer;
}
.header_middle .header_search:hover{
background:#888;
}
.header_middle .header_search p{
margin-left:20px;
color:#aaa;
float:left;
}
.header_middle .header_search p:hover{
color:#fff;
}
.header_middle .header_search span{
color:#aaa;
float:right;
margin:18px 20px;
font-size: 18px;
}
.header_middle .header_search span:hover{
color:#00BE06;
}
.header_middle .header_searchall{
float:left;
background:#00BE06;
height:50px;
width:115px;
line-height:50px;
margin:10px 0px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.header_middle .header_searchall p{
margin-left:5px;
color:#eee;
float:left;
font-weight:300;
font-size:18px;
}
.header_middle .header_searchall p:hover{
color:#fff;
}
.header_middle .header_searchall span{
color:#eee;
float:left;
margin:18px 2px 18px 20px;
font-size: 18px;
font-weight:300;
}
.header_middle .header_searchall span:hover{
color:#fff;
}
.content{
height:1000px;
background:#000;
}
#back{
border-radius: 25px;
width:50px;
height:50px;
background:#CCC;
position: fixed;
bottom:100px;
right:60px;
display:none;
}
#back a{
font-size:13px;
color:#222;
}
#back span{
margin-top:20px;
margin-right:20px;
float:right;
}
#back:hover{
background:#E5F5E8;
color:#01B909;
}
批改老师：灭绝师太批改时间：2019-02-19 15:22:16
老师总结：我看了一下原网页,就是鼠标移上的效果,在标签中插入文字方法很多种,text html,还是基础知识不扎实,不能学以致用哦
