html5对锚的更改,HTML5之锚链接
锚链接一般用于本页面的跳转,比如页面太长,到了尾部要瞬间到顶部,就可以用锚链接。
如下图所示:
示例:点击"数码 男装 女装 电影 音乐会 通信 阅读 美容 旅游"等就能跳转到相关内容,就像船放的一个锚。
代码实现如下:
HTML5之锚链接 --- 测试
*{margin:0px;padding:0px;}
html,body{family:"微软雅黑";font-size:12px;color:#666;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
#nav{width:100%;height:100px;background:#DD2727;}
#nav ul{width:1200px;height:100px;margin:0px auto;}
#nav ul li{float:left;width:100px;height:50px;margin-top:50px;}
#nav ul li a{font-size:20px;color:#fff;}
#digtal{width:100%;height:500px;background:#ff9933;}
#male{width:100%;height:500px;background:#ccff66;}
#female{width:100%;height:500px;background:#ff00cc;}
#movie{width:100%;height:500px;background:#99ff00;}
#music{width:100%;height:500px;background:#006600;}
#cmcc{width:100%;height:500px;background:#0000ff;}
#reading{width:100%;height:500px;background:#ff0000;}
#beautiful{width:100%;height:500px;background:#ff00cc;}
#travel{width:100%;height:500px;background:#339900;}
.box{width:1200px;margin:0px auto;}
.box h1{background:#000;color:#fff;line-height:50px;}
- 数码
- 男装
- 女装
- 电影
- 音乐会
- 通信
- 阅读
- 美容
- 旅游
数码
男装
女装
电影
音乐会
通信
阅读
美容
旅游
第二种:
首先,在 HTML 文档中对锚进行命名(创建一个书签):锚链接
然后,在同一个文档中创建指向该锚的链接:锚链接
name 属性规定锚(anchor)的名称。
可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示。
当使用命名锚(named anchors)时,可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样就无需不停地滚动页面来寻找需要的信息了。
提示:当点击“到下面”后,焦点就会跳到”下面“处,如果想让效果明显,可以在上面代码片断之间加上。
代码如下:
HTML5之锚链接 --- 测试
*{margin:0px;padding:0px;}
html,body{family:"微软雅黑";font-size:12px;color:#666;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
#nav{width:100%;height:100px;background:#DD2727;}
#nav ul{width:1200px;height:100px;margin:0px auto;}
#nav ul li{float:left;width:100px;height:50px;margin-top:50px;}
#nav ul li a{font-size:20px;color:#fff;}
#digtal{width:100%;height:500px;background:#ff9933;}
#male{width:100%;height:500px;background:#ccff66;}
#female{width:100%;height:500px;background:#ff00cc;}
#movie{width:100%;height:500px;background:#99ff00;}
#music{width:100%;height:500px;background:#006600;}
#cmcc{width:100%;height:500px;background:#0000ff;}
#reading{width:100%;height:500px;background:#ff0000;}
#beautiful{width:100%;height:500px;background:#ff00cc;}
#travel{width:100%;height:500px;background:#339900;}
.box{width:1200px;margin:0px auto;}
.box h1{background:#000;color:#fff;line-height:50px;}
- 数码
- 男装
- 女装
- 电影
- 音乐会
- 通信
- 阅读
- 美容
- 旅游
- 链接标题
数码
男装
女装
电影
音乐会
通信
阅读
美容
旅游
链接标题
html5对锚的更改,HTML5之锚链接相关推荐
- html命名锚id name,Html5 锚 的页内跳转, name=abc herf=#abc | 易学教程
锚点是网页制作中超级链接的一种,又叫命名锚记.命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍. 英文名:anchor 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题 ...
- 使用CSS更改HTML5输入的占位符颜色
Chrome支持input[type=text]元素的占位符属性 (其他人也可能这样做). 但是以下CSS对占位符的值没有任何作用: input[placeholder], [placeholder] ...
- 电脑无法上传html文件类型,HTML5 - 限制文件上传(HTML5 - Restrict file upload)
HTML5 - 限制文件上传(HTML5 - Restrict file upload) 上面的代码也允许上传.txt或任何类型的文件. 如何限制 html5中的其他文件类型 ? Above code ...
- html5发展前景-兄弟连,IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生
原标题:IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生 十年磨一剑,正如我们所看到的一样,HTML5大潮正来势汹汹.但也正如我们所知道的一样,HTML5是一种技术标准,它的语义 ...
- html5交互效果,浅谈HTML5 CSS3的新交互特性
本文标题的这副图片,是用Phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...
- html5 的menu的属性,HTML5 menu 标签
实例 HTML5 两个菜单按钮系列选项实例("File" 和 "Edit"): New... Open... Save Cut Copy Paste 尝试一下 ...
- html5通过api调数据库,使用HTML5数据库API [关闭](Using HTML5 Database API [closed])
使用HTML5数据库API [关闭](Using HTML5 Database API [closed]) 我正在开发一个使用phonegap/cordova 2.2的web应用程序,并希望将数据存储 ...
- HTML5/CSS3系列教程:HTML5 区域(Sectioning)的重要性
日期:2013-2-4 来源:GBin1.com 不管你以前在web页面布局中如何称呼它们 - "区域"还是"块",我们一直都在布局中将页面分成可视的不同区域 ...
- php 随机在文章中添加锚文本_SEO站长布局锚文本时的7大注意事项
通过对什么是锚文本链接.锚文本作用的讲解,以及怎样布局网站站内锚文本的介绍.相信大家都有了比较清晰的认识,也会重视网站锚文本的建设.但是菜鸟菌还是不得不再啰嗦点,锚文本虽然好处大大的,在布局锚文本的时 ...
最新文章
- JavaScript写XML
- 独家 | 每个数据科学家应该知道的五种检测异常值的方法(附Python代码)
- cocos2dx 开启控制台
- c语言多维数组基础知识,C语言基础第7章多维数组.ppt
- [vue-cli]vue-cli怎么解决跨域的问题?
- 8.16 记忆增强神经网络:MANN、神经网络图灵机
- 常用的4种黑盒测试方法
- python重复命令_python系列的连接和重复操作
- 万万没想到,低功耗也会烧毁元器件?
- 计算机专业课程设计收获及总结,课程设计的心得体会
- 密码包含大写小写的英文字母数字和特殊字符正则
- 基于模板匹配的知识图谱问答系统
- UnityShader实现较为完整的光照模型(Lambert+Phong+三色环境光+阴影+环境遮蔽(AO))
- ThinkPHP导出百万条数据量
- php+挖矿病毒,Kdevtmpfsi 挖矿病毒处理方式
- linux命令名字由来--整理
- 信息学奥赛一本通 1374:铲雪车(snow)
- 抖音上面用计算机解锁手机,抖音生命计算器
- 28个数据可视化图表的总结和介绍
- 巧遇ORA-00600: 内部错误代码, 参数: [kcratr_nab_less_than_odr]
热门文章
- python爬虫影评_Python爬虫(二十)_动态爬取影评信息
- 计算机二级考试场次是随机的,计算机二级考试知多少
- 不想做直播的数据分析师不是一个好销售
- hdmi接口有什么用_显示器有哪些接口?DP、HDMI、VGA、DVI有什么区别?
- stm32h7能跑linux,STM32H7榨干了Cortex-M7的最后一滴血
- PPT手写笔颜色修改
- jQuery 库学习
- 在电脑上使用考研APP的方法(亲测有效)
- UI设计行业领域知识体系
- mysql5.7 性能优化配置 innodb_buffer_pool_size