zoukankan      html  css  js  c++  java
  • 教你小三角,适用移动端等,解决移动端a标签的默认样式

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

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#demo {
    				 0;
    				height: 0;
    				/*边框的宽20px*/
    				border- 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;将其变为块级标签。

        

  • 相关阅读:
    PHP面试题4
    php面试题2
    php基础面试题1
    mysql添加索引命令
    lnmp初步学习知识整理
    代码运行的自由
    Lein droid
    关于Domain Sepcific Lang
    JavaScript倒计时类
    三国小记
  • 原文地址:https://www.cnblogs.com/cyj-dz/p/7124407.html
Copyright © 2011-2022 走看看