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>
行内标签