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;}

• 数码
• 男装
• 女装
• 电影
• 音乐会
• 通信
• 阅读
• 美容
• 旅游
• 链接标题

数码

男装

女装

电影

音乐会

通信

阅读

美容

旅游

链接标题