html锚点链接小案例

案例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>

html锚点链接小案例相关推荐

HTML标签——锚点链接小学习（懒癌患者的摸索之路）
我是灼灼,一只初学Java的大一金渐层. 向往余秀华和狄兰·托马斯的疯狂,时常沉溺于将情感以诗相寄:追逐过王尔德.王小波的文字,后陷于毛姆和斯蒂芬·金不可自拔:热爱文学的浪潮,白日梦到底却总在现实里清 ...
利用HTML所学内容完成小案例
一.圣诞节简介网页 1.环境: Visual Studio Code 2.代码: <!DOCTYPE html> <html lang="en"><h ...
10.15 iptables filter表小案例10.16/10.17/10.18 iptables nat表应用
2019独角兽企业重金招聘Python工程师标准>>> 10.15 iptables filter表小案例 iptables 命令.语法总结 iptables-nvL //查看ipt ...
iptables nat表含义_十（4）iptables语法、iptables filter表小案例、iptables nat表应用
iptables语法 filter表: INPUT链:作用于进入本机的包 OUTPUT链:作用于送出本机的包 FORWARD链:作用于和本机无关的包 nat表: PREROUTING链:作用是包在刚刚 ...
SpringMVC简单小案例
SpringMVC简单小案例导入spring-webmvc下的所有包采用Maven导入 <dependency><groupId>org.springframework&l ...
click 点击图片不起作用_JavaScript 练手小案例：基于SVG的图片切换效果
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...
python电视剧口碑分析_小案例(七)：口碑分析（python）
微信公众号:机器学习养成记搜索添加微信公众号:chenchenwings <菜鸟侦探挑战数学分析>小案例,python实现第七弹案件回顾商业街口碑分析 1,顾客在网络上会发表对商品或 ...
Mybatis案例升级版——小案例大道理
纯Mybatis案例升级版--小案例大道理前言: 这几天看了一本书<原则>,在上面看到了一句话叫"每个人都把自己眼界的局限当成世界的局限",大学生是?,大学就是鱼缸, ...
web前端学习26（锚点链接）
文章目录 4.7.2 链接分类 4.7.2 链接分类锚点链接:点我们点击链接,可以快速定位到页面中的某个位置. 在链接文本的href属性中,设置属性值为#名字的形式,如< a href=&qu ...

html锚点链接小案例

html锚点链接小案例相关推荐

最新文章

热门文章