超详细的css超链接总结

最新推荐文章于 2023-07-26 09:12:56 发布

_沧浪之水_

最新推荐文章于 2023-07-26 09:12:56 发布

阅读量1.2k

点赞数

文章标签： css html web css3 html5

本文链接：https://blog.csdn.net/qq_45973003/article/details/107360693

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在html中的超链接讲解</title>
	</head>
	<style>
		@import url("style.css");
	</style>
	<body>
		<!--
        	作者：tao
        	时间：2020-07-15
        	描述：在html中创建一个超链接使用a标签
        	接下来我们来创建一个超连接
        	与此同时我们还可以设置图片超连接
        -->
        <a href="#">我是一个超链接</a> <!--将超链接的属性值设置为#就是回到顶部的意思-->
        <a href="http://www.baidu.com">百度</a><!--在超链接中放置一个网址就是会实现跳转网址的功能-->
        <!--这是一个图片超链接-->   
        <a href="http://www.baidu.com"><img src="picture/u=3007191037,3154212419&fm=15&gp=0.jpg" width="100px"/></a>                      
        <!--在HTML中我们还可以设置目标窗口的弹出方式使用target属性target属性有两个属性值一个是_self在本窗口弹出
        	一个是_blank在新的窗口弹出
        	接下来我们来演示一下实际的效果
        -->
        <a href="http://www.zcool.cn" target="_self">站酷</a><!--我们现在设置为在本窗口弹出进入站酷的网站-->
        <a href="http://www.google.com" target="_blank">谷歌</a><!--我们现在设置在新的窗口弹出-->
         <!--在html中的描点超链接在html中创建描点超链接分为两步在该属性中我们使用到了id选择器
         	语法：
         	<a href="#id名"></a>
         	<h3 id="one">我是一个三级标题</h3>
         	为描点超链接设置样式准备条件
         -->
         <hr size="3" color="#7FFF00"  />
         <a href="#one">金刚经第一品</a>
         <a href="#two">金刚经第二品</a>
         <a href="#three">金刚经第三品</a>
         
         
         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />  
        
         <p id="one">金刚经 第一品 法会因由分

              如是我闻。一时佛在舍卫国。祗树给孤独园。
              与大比丘众。千二百五十人俱。尔时世尊。
              食时。著衣持钵。入舍卫大城乞食。于其城中。次第乞已。还至本处。
              饭食讫。收衣钵。洗足已。敷座而坐。</p>
         <p id="two">金刚经 第二品 善现启请分

              时长老须菩提。在大众中。即从座起。偏袒右肩。右膝着地。合掌恭敬。
              而白佛言。希有世尊。如来善护念诸菩萨。善付嘱诸菩萨。
              世尊。善男子。善女人。发阿耨多罗三藐三菩提心。应云何住，云何降伏其心。
              佛言。善哉善哉。须菩提。如汝所说。如来善护念诸菩萨。善付嘱诸菩萨。汝今谛听。当为汝说。
              善男子。善女人。发阿耨多罗三藐三菩提心。应如是住，如是降伏其心。唯然。世尊。愿乐欲闻。</p>
         <p id="three">金刚经 第三品 大乘正宗分

              佛告须菩提。诸菩萨摩诃萨。应如是降伏其心。
              所有一切众生之类。若卵生。若胎生。若湿生。若化生。
              若有色。若无色。若有想。若无想。若非有想。非无想。
              我皆令入无余涅盘而灭度之。如是灭度无量无数无边众生。实无众生得灭度者。
              何以故。须菩提。若菩萨有我相。人相。众生相。寿者相。即非菩萨。</p>
        <!--到此描点超链接已经讲述完毕-->
        <!--
        	作者：涛
        	时间：2020-07-15
        	描述：在css中的伪类超链接
        	css中的伪类超链接我们对超链接可以有不同的效果
        	a:link 就是默认的样式为被点击前
        	a:visited 被点击后的效果
        	a:hover 鼠标移入后的效果
        	a:active 就是点击时的效果
        	其中值css样式中还包含两个属性text-decoration:none清除超链接默认的下划线
        	text-decoration：underline鼠标移入是显示出下划线
        -->
        <a href="http://www.baidu.com" target="_blank">百度</a>
        <a href="http://www.souhu.com" target="_self">搜狐</a>
        <a href="http://www.zcool.cn" target="_blank">站酷</a>
	</body>
</html>