案例1：回到首页
<html ><head><meta charset="utf-8"><title></title><style type="text/css"> *{border: 0;margin: 0; padding: 0;}.box1, .box2{height: 3000px; width: 200px;background-color: green;}</style></head><body> <p id="content1">目录1</p><div class="box1"></div><p id="content2">目录2</p><div class="box2"></div><a href="#content1">点击此处可以跳转到目录1</a><a href="#content2">点击此处可以跳转到目录2</a></body>
</html>
案例2 图片翻滚
如下图所示，依次点击1,2,3,4进行图片的切换(这里用矩形框进行了替代)
其实图片是很长的。只是存放图片的容器设定了大小，并且将overflow设定了hidden，因此导致其他图片看不见。
<html ><head><meta charset="utf-8"><title></title><style type="text/css"> *{border: 0;margin: 0; padding: 0;}.box{height: 500px; width: 500px;border: 1px black solid;margin: 20px auto;position: relative;}.botton{position : absolute; right: 5px; bottom:5px;}a{height: 30px; width: 20px;text-decoration: none; text-align: center; line-height: 30px;background-color: rgba(0, 0, 0, 0.3); color:red; /*rgba的第四个参数是透明度*/margin: 2px;padding: 2px;float: left;}a:hover{background-color: rgba(0, 0, 0, 0.8);}.image_list div{height: 500px; width: 500px;}.image_list{height: 500px; width: 500px;overflow: hidden;}</style></head><body> <div class='box'><div class='botton'><a href="#image1">1</a><a href="#image2">2</a><a href="#image3">3</a><a href="#image4">4</a></div><div class="image_list"><div id = "image1" style="background-color: red";></div><div id = "image2" style="background-color: blue";></div><div id = "image3" style="background-color: yellow";></div><div id = "image4" style="background-color: green";></div> </div></div></body>
</html>
