七 使用并美化网页超链接

 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="">首&nbsp;&nbsp;页</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>
行内标签
原文地址:https://www.cnblogs.com/hudaxian/p/14244760.html