zoukankan      html  css  js  c++  java
  • a标签

    a标签作用

    <a href="http://www.w3school.com.cn">W3School</a>

    超链接

    用于从一个页面链接到另一个页面,通过href 属性指定链接的目标。

    当无href属性时,a标签只是普通文本,移上去光标是文本光标。有href属性时,可上焦点,移上去是默认的手势光标。

    href值为#,点击会在本页地址上加上#,如http://localhost:63342/practice/test.html#

    提示:

    1、如果不使用 href 属性,则不可以使用如下属性:download, hreflang, media, rel, target 以及 type 属性。

    2、被链接页面通常显示在当前浏览器窗口中,除非规定了另一个目标(target 属性)。

     

    锚点

    定位到本页面某个位置,比如点击导航让页面自动滚动到指定位置,如:电商网站的楼层。这就涉及到<a>标签的锚点应用,把它称为“锚点标签”。

    锚点标签运用

    1、两个a标签配合,根据a标签的name属性定位

    <a href="#mao" target="_blank" rel="nofollow">点击此处到目标位置</a>
    。。。。省略长篇内容 <a name="mao" target="_blank">目标位置</a>

    2、a标签和其他标签配置,根据其他标签的id定位

    <a href="#mao" target="_blank" rel="nofollow">点击此处到目标位置</a>
    。。。。省略长篇内容
    <div  id="mao">目标位置</div>

    可以从一个页面链接到另一个页面的锚记位置,代码如下:

    页面1
    <a href="maodian2.html#other_page" target="_blank">另一个页面传送门</a>
    页面2
    <div id="other_page">这里是另一个页面的位置</div>
    提示:
    定位的锚点能居顶可能是因为后面还有内容,要是定位的锚点后面内容不足再滑一屏,定位的锚点是不会居顶的 
    要想使它距离顶部一定距离
    设置一个容器加margin或者paading——失效
    给元素本身设置margin——失效
    给元素本身设置padding——成功

    a标签属性

    a标签样式

     链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

    a:link {color: #FF0000}        /* 未访问的链接 */
    a:visited {color: #00FF00}    /* 已访问的链接 */
    a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
    a:active {color: #0000FF}    /* 选定的链接 */

    提示:

     a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

    a:active 必须被置于 a:hover 之后,才是有效的。

    顺序巧记:lvha

    其余样式杂记

    text-decoration:none代 不显示下划线

    改变鼠标一上去的样式,使用cursor属性,cursor取值:

     1   auto                     :标准光标   
     2   default               :标准箭头   
     3   hand                     :手形光标   
     4   wait                     :等待光标   
     5   text                     :I形光标   
     6   vertical-text   :水平I形光标   
     7   no-drop               :不可拖动光标   
     8   not-allowed       :无效光标   
     9   help                     :?帮助光标   
    10   all-scroll         :三角方向标   
    11   move                     :移动标   
    12   crosshair           :十字标   
    13   e-resize   
    14   n-resize   
    15   nw-resize   
    16   w-resize   
    17   s-resize   
    18   se-resize   
    19   sw-resize   

     

  • 相关阅读:
    Binary Tree Maximum Path Sum
    ZigZag Conversion
    Longest Common Prefix
    Reverse Linked List II
    Populating Next Right Pointers in Each Node
    Populating Next Right Pointers in Each Node II
    Rotate List
    Path Sum II
    [Leetcode]-- Gray Code
    Subsets II
  • 原文地址:https://www.cnblogs.com/yaoyao-sun/p/10365208.html
Copyright © 2011-2022 走看看