html作業(yè)：淘寶部分界面，回到頂部功能的實(shí)現(xiàn)，錨點(diǎn)和超鏈接，找到自己寫的界面的方法
或打開從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">您好，歡迎來到淘寶網(wǎng)! </p>
<br><b> 淘寶網(wǎng)>>商品展示 </b> ? <a? href="#a">跳轉(zhuǎn)到三星界面</a></b>??
<a? href="#b">跳轉(zhuǎn)到諾基亞界面</a>
</div>
<a? name="a"><div class="two"><img src="img/三星.png" alt="" width="100px" height="150px">
<br>品牌:三星Galaxy S4 I9500 16G版3G手機(jī)(皓月白)</div></a>
<a? name="b"><div? class="three"><img src="img/諾基亞.jpg" alt="" width="100px" height="150px">
<br>品牌，諾基亞Lumia 900體驗(yàn)wp系統(tǒng)</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是相對(duì)定位*/
/*.top {
margin-top: 20px;
}*/
向下滑動(dòng)后：
點(diǎn)回到頂部后：
