HTML 超鏈接文本修飾背景屬性

本文轉載自查看原文 2017-03-28 15:37 1616 HTML

１鏈接偽類

a:link{屬性:值;} a{屬性:值}效果是一樣的。

a:link{屬性:值;} 鏈接默認狀態

a:visited{屬性:值;} 鏈接訪問之后的狀態

a:hover{屬性:值;} 鼠標放到鏈接上顯示的狀態 a:active{屬性:值;} 鏈接激活的狀態

a:focus{屬性:值；} 獲取焦點

文本修飾

text-decoration: none | underline | line-through

         a{
             color:red;
             text-decoration: none;        //設置無下划線
         }
            a:focus{
                color:orange;
            }
            a:hover{
                color:yellow;
                text-decoration: underline;       //設置加入下划線
            }

案例：

        <style type="text/css">
        .nav{
        height:40px;
         background-color=#aaa;
         text-align:center;
        }
         a{
             display: inline-block;
             width:80px;
             height:40px;
             text-decoration: none;
             color:#000;
             font-weight:700;
         }
         a:hover{
           background-color:#eee;
           text-decoration: underline;

         }
          a.public{

               font-weight:700;
               color:#f14400;
          }

        </style>
    </head>
    <body>
    <div class="nav">
     <a href="#" class="public">天貓</a>
     <a href="#" class="public">聚划算</a>
     <a href="#"  class="public">超市</a>
     <a href="#"  class="public">頭條</a>
     <a href="#">阿里旅行</a>
     <a href="#">電器城</a>
     <a href="#">淘搶購</a>
     <a href="#">蘇寧</a>
     <a href="#">智能生活</a>

==================================================

背景屬性

１.1 background-color 背景顏色

１.2 background-image 背景圖片

１.3 Background-repeat repeat(默認) | no-repeat | repeat-x | repeat-y 背景平鋪

１.4 Background-position left | right | center | top | bottom 背景定位

    <style type="text/css">
      .box{
          height:500px;
          background-color:#999;
          background-image:url("2.png");
          background-repeat:repeat-y;
      }

    </style>
</head>
<body>
    <div class="box"></div>