«
超链接
MitSeek 发布于
阅读：49
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
width:500px;
height: 800px;
}
.img{
display: block;/* 块元素 */
width:800px ;
height: 1000px;
background-color: #f66fcd;
color: white;
text-align: center;
line-height: 800px;
font-size: 50px;
text-decoration: none;
font-family: 华文仿宋;
font-weight: bold;
border-radius: 30px;
/* 立体样式 */
border-right: #555555 10px solid;
border-bottom: #222222 10px solid;
border-left: #dddddd 10px solid;
border-top: #dddddd 10px solid;
margin-top: 100px;
letter-spacing: 38px;/* 字符间距 */
}
/* 鼠标悬停显示样式,比如一段文字，用a标签阔住，空的链接，当鼠标点上去时，会显得
格外不同*/
.img:hover{
background: yellow;
text-decoration: underline black;/* 添加下划线 */
color: red;
border-radius: 50px;
}
</style>
</head>
<body>
<!-- 锚点相当于，#链接到id的地方，点一下，直接跳转到链接的地方 -->
<!-- 外部链接，href="页面.html#outside" id="outside" -->
<a href="#inside" class="img">第一美女</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="index.html" target="_blank"></a><!-- 在新窗口打开 -->
<a href=""></a><!-- 这里可以使图片，可以是其他的东西 -->
<img id="inside" src="02.jpg" alt="" usemap="#map" />
<map name="map">
<!-- 热点区域：就是在看到喜欢的地方点一下，就可以放大图片，看的仔细 -->
<area shape="rect" coords="20,20,150,150" href="02.jpg" alt="矩形" /><!-- 矩形热点区域 -->
<area shape="circle" coords="120,120,50" href="#" alt="圆形" /><!-- 圆形热点区域 -->
</map>
</body>
</html>
HTML