1.定义超链接及热点区域
1.1 超链接
用通俗化的话来说,超链接就是比如说你在浏览网页的时候,网页里有个什么地方,你把鼠标放上去以后,鼠标箭头会变成一只小手,你点一下,就会转到另一个地方或是跳出一个新的网页的话,那么刚刚你鼠标点一下的那个地方,就是超链接。
<a href=""></a> <!-- href为要链接的网址或者文件路径,比如图片、声音文件、视频文件、word、ftp、电子邮件等
-->1.2.连接的目标窗口
target属性:
_blank:在新窗口中显示超链接页面
_self:在自身窗口中显示超链接页面
1.3.热点区域
<img src="../../图片/16.jpg" usemap="#map"alt=""> <!-- 插入图片设置usemap属性,记得"#" --> <map name="map"> <!-- 创建map标签,添加name属性,属性值等于usemap属性值去掉'#' --> <area shape="rect" coords="30,30,150,150" href="../../图片/01.jpg" alt="矩形"> <!-- 设置矩形区域,四个数分别为左上角xy,右下角xy--> <area shape="circle" coords="200,200,80" href="../../图片/02.jpg" alt="圆形"> <!-- 设置圆形区域,三个数分别为圆心xy,半径 --> </map>
2.锚点超链接
2.1 建立锚点超链接
<a href="#a"></a> <!-- 锚链接 --> <div id="a"></div> <!-- 锚点 -->
2.2 超链接同一页面上的锚点
1.给链接目标添加id或name属性,超链接的href属性设置成’#‘加id或name值即可
<!-- 创建锚链接 --> <a href="#a">html</a> <br> <br> <br> <br> <br> <br> <br> <br> <!-- 创建锚点 --> <div id="a">第一章</div> <img src="../../图片/02.jpg" alt="">
2.3 超链接其他页面上的锚点
只需要在锚链接前边加上该页面名字即可
<!-- 链接另一个名称为‘页面.html’文件中id为outside的元素, --> <a href="页面.html#outside">外部文件锚链接</a>
3.按钮式超链接
<style> * { margin: 0 ; padding: 0 ; } .main { position: absolute; /*为什么取消绝对定位第一个a标签就会直接到main最顶端,选中margin-top=50就会实现,a标签设置margin-top不应该是a标签与main的距离吗?*/ 100%; height: 584px; text-align: center; background: grey; } a { display:block; /*将a标签(行内标签)转为块级标签,行内标签由内容撑起,不能设置高宽,*/ 400px; height:100px; line-height: 100px; background:#2DD2F0; color:white; font-size:30px; font-weight:bold; text-decoration:none; /*去掉超链接的下划线*/ text-align: center; letter-spacing: 8px; /*字符间距*/ border-radius: 10px; margin: 50px auto; /*margin设置auto可对块状标签设置居中,text-align更多是对文本和行内标签*/ } </style> </head> <body> <div class="main"> <a href="">首 页</a> <a href="">列表页</a> <a href="">详情页</a> </div>
4.立体超链接样式
a { display: block; 200px; height: 50px; line-height: 50px; background:grey; color: white; font-size: 20px; font-weight: bold; text-align: center; text-decoration: none; letter-spacing: 8px; border-radius: 10px; border-top:#F01C4F 10px solid; border-right:#EA1CCB 10px solid; border-left: #F01C4F 10px solid; border-bottom:#EA1CCB 10px solid; /*立体通过设置border-top、right、bottom、left实现*/ } </style> </head> <body> <a href="https://www.baidu.com">跳转</a>
5.图像交换超链接样式
a { display: block; 200px; height: 50px; line-height: 50px; background:grey; color: white; font-size: 20px; font-weight: bold; text-align: center; text-decoration: none; letter-spacing: 8px; border-radius: 10px; background-image: url(../../图片/01.jpg); /*插入背景图*/ } /*鼠标指针悬浮超链接时显示图片的下半部分*/ a:hover { background-position:center bottom; } </style> </head> <body> <a href="https://www.baidu.com">首页</a>
7.css伪类超链接在不同阶段显示效果
a:link { background:green; } /*a标签已被访问后的样式*/ a:visited { background:purple; } /*鼠标在a标签上悬停时的样式*/ a:hover {background: yellow} /*单机未被松开时的样式*/ a:active {background: red} </style> </head> <body> <a href="https://www.xiaomi.com">首页</a>
8.文章中的超链接样式
实现将文中不一样颜色字体的文字超链接
div {height: 200px; 400px;} h2 { margin: auto; /*没什么实质性意义,去点后浏览器自带的margin:19px增大上下间距反而更好看了*/ 400px; /*只是为了和下半部分保持一样的宽度*/ text-align: center; /*没有以上两个,h2一样居中实现好看样式*/ } a { font-size: 16px; text-decoration: none; background: yellow; border-radius: 3px; } a:hover { text-decoration: underline black ; /*下划线*/ background: red; border-radius: 10px; color: white; } </style> </head> <body> <div> <h2>一剪梅<br><a href="">李清照</a></h2> 红藕香残玉簟秋。轻解罗裳,独上兰舟。云中谁寄锦书来?雁字回时,<a href="">月满</a>西楼。花自飘零水<a href="">自流</a>.一种<a href="">相思</a>,两处闲愁。<a href="">此情</a>无计可消除,才下眉头,却上心头。 </div>
行内标签