html作业：淘宝部分界面，回到顶部功能的实现，锚点和超链接，找到自己写的界面的方法
或打开从hellobuilder软件中拖出来的文件夹：
图片素材：
自己辛苦写的源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/tb.css">
<title>淘宝界面</title>
</head>
<body>
<div id="all" >
<div class="one"><p ><img src="img/tb.jpg" alt="" width="150px" height="70px">您好，欢迎来到淘宝网! </p>
<br><b> 淘宝网>>商品展示 </b> <a href="#a">跳转到三星界面</a></b>
<a href="#b">跳转到诺基亚界面</a>
</div>
<a name="a"><div class="two"><img src="img/三星.png" alt="" width="100px" height="150px">
<br>品牌:三星Galaxy S4 I9500 16G版3G手机(皓月白)</div></a>
<a name="b"><div class="three"><img src="img/诺基亚.jpg" alt="" width="100px" height="150px">
<br>品牌，诺基亚Lumia 900体验wp系统</div></a>
<div class="top">
<a href="#"><img src="img/top.png" alt=""> 回到顶部
</a>
</div> </div>
</body>
</html>
#all{
width: 900px;
height: 1800px;
/*border:2px solid green;*/
}
.one{
width: 900px;
height: 600px;
/*border:2px solid green;
*/
}
.one a {
color: orange;
text-decoration: none;
}
.two{
width: 900px;
height: 600px;
/*border:2px solid green;*/
}
.three{
width:900px;
height: 600px;
/*border:2px solid green;*/
}
.top img{
width: 80px;
height: 80px;
}
.top p{
width: 80px;
/*text-align: center;*/
}
.top a{
color: blue;
text-decoration: none;
}
.top {
width: 80px;
height: 100px;
position: fixed;
right: 30px;
bottom: 100px;
}
/*position是相对定位*/
/*.top {
margin-top: 20px;
}*/
向下滑动后：
点回到顶部后：
