• 技术文章 >Web开发 >css教程

    css超链接是什么

    小妮浅浅小妮浅浅2021-10-19 09:50:47原创4029

    1、超链接可以跳转到其他页面,或者可以跳转到本页面的其他位置。

    其他页面:网上链接,自己写的页面

    2、形式:<a></a> 级联元素

    3、属性有href、url、target、_self和_blank。

    href:目标位置的url

    url:协议名://ip[:端口号/文件夹名/文件名]

    target:跳转到目标的方式

    _self:在页面打开链接 (默认方式)

    _blank:在新的空白页面打开链接

    实例

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>在html中的超链接讲解</title>

    </head>

    <style>

    @import url("style.css");

    </style>

    <body>

    <!--

             描述:在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>

    以上就是css超链接的介绍,希望对大家有所帮助。更多css学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css 超链接
    上一篇:css盒子模型的属性介绍 下一篇:css选择器之间的关系

    相关文章推荐

    • css中背景定位有哪些方法• css首行缩进text-indent的实现• css文本修饰text-decoration的使用• css文字间距的使用• css中flex是什么• css overflow属性有什么用• css中z-index属性• css样式的组成• css选择器是什么意思• css浮动产生的负作用• css盒子模型的属性介绍

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网