教你小三角,适用移动端等,解决移动端a标签的默认样式,标签样式

1.小三角,通过给一个div设置足够大的边框,让它的上边框,右边框,左边框,的背景颜色设置成透明的,来实现,如下:

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #demo {
    width: 0;
    height: 0;
    /*边框的宽20px*/
    border-width: 20px;
    /*边框样式,实线*/
    border-style: solid;
    /*边框颜色*/
    border-color: transparent transparent red transparent;
   }
  </style>
 </head>

 <body>
  <!--小三角,transparent透明的,-->

  <div id="demo">

  </div>
 </body>

</html>

  2.a标签的移动端问题:

     1》当再点击a标签的时候,它会有默认的背景颜色,解决办法

     1
-webkit-tap-highlight-color:transparent; 

   2》当点击时可能会出现下划线,解决方法

    

1 text-decoration: none; //或者
2 
3          border: none;//或者
4 
5          outline:none;

    3>当鼠标放上去时显出下划线,解决办法;

  

a:hover{

text-decoration:none;
}

  a标签是一个行内标签,如果要设置它的宽高或多个样式可通过display:block;将其变为块级标签。

    

http://www.bkjia.com/Javascript/1217727.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1217727.htmlTechArticle教你小三角,适用移动端等,解决移动端a标签的默认样式,标签样式
1.小三角,通过给一个div设置足够大的边框,让它的上边框,右边框,…

1.小三角,通过给一个div设置足够大的边框,让它的上边框,右边框,左边框,的背景颜色设置成透明的,来实现,如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #demo {
                width: 0;
                height: 0;
                /*边框的宽20px*/
                border-width: 20px;
                /*边框样式,实线*/
                border-style: solid;
                /*边框颜色*/
                border-color: transparent transparent red transparent;
            }
        </style>
    </head>

    <body>
        <!--小三角,transparent透明的,-->

        <div id="demo">

        </div>
    </body>

</html>

  2.a标签的移动端问题:

     1》当再点击a标签的时候,它会有默认的背景颜色,解决办法

     1
-webkit-tap-highlight-color:transparent; 

   2》当点击时可能会出现下划线,解决方法