zoukankan      html  css  js  c++  java
  • HTML 超链接 文本修饰 背景属性

    1 链接伪类

    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.1   background-color     背景颜色

    1.2   background-image    背景图片

    1.3   Background-repeat    repeat(默认)  |  no-repeat |   repeat-x   |  repeat-y     背景平铺

    1.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>

    ★方位值只写一个的时候,另外一个值默认居中。

    ★写2个方位值的时候,顺序没有要求。

     ★写2个具体值的时候,第一个值代表水平方向,第二个值代表垂直方向。

     Background-attachment   背景是否滚动   scroll  |  fixed

       背景属性连写

    ★:连写的时候没有顺序要求,url为必写项。

  • 相关阅读:
    浏览器相关,回流和重绘
    Vue相关,Vuex 通俗版教程
    关于Base64
    【1801日語听解4】第7回:4月14日
    【日語听解2】第6回:4月13日
    【日語視聴説2】第6回:4月13日
    【1701日本語新聞編集】第6回:4月10日
    【1801日語写作】第6回:4月8日
    【1801日本語新聞選読】第6回:4月7日
    【1801日語听解4】第6回:4月7日
  • 原文地址:https://www.cnblogs.com/yimian/p/6635144.html
Copyright © 2011-2022 走看看