教你小三角,适用移动端等,解决移动端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;将其变为块级标签。

    

时间: 2024-08-02 11:02:29

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

css直接写出小三角

在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!先看看如何写出各种小三角! 1 /*箭头向上*/ 2 .arrow-up { 3 width:0; 4 height:0; 5 border-left:30px solid transparent; 6 border-right:30px solid transparent; 7 border-bottom:30px solid #000; 8 } 9 10 /*箭头向下*/ 11 .arrow

第19天:京东头部小三角制作

京东头部小三角制作方法: 1.在需要小三角的地方加入"<i><s>◇</s></i>",如下: <div class="dt">送至:北京 <i><s>◇</s></i></div> 2.设置css样式如下.dt{ position: relative; padding:0 20px 0 10px;}.dt i{ font: 400 15px/15

css3实现小三角

利用css3的新特性可以完成很多图形的构建,下面演示如何利用border的特性构建一个小三角. 我们首先新建一个div,给这个div设置class="demo",然后给demo设置如下属性: .demo{ width: 0; height: 0; border-top: 50px solid black; border-bottom: 50px solid red; border-left: 50px solid blue; border-right: 50px solid green

用CSS3做网页中的小三角,以及transition的用法

自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了,css3的部分也看过了,但是觉得讲得不太好,全部都是点到为止.无意中找到了传智播客的视频讲了一些css3的小技巧,今天就写一下用CSS3做网页中的小三角. 大致网上关于小三角的做法无非三种: 直接用背景图片,这个没什么好说的: 用块元素设置宽高都为0,三角的高用一条边框宽度,其他三条边框用dashe

CSS创建三角形(小三角)的几种方法

你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并制作一个三角形,在本文中,我将介绍: 点此查看实例展示 编码 图片 假如你已经有了三角形的图片,并且减少HTTP请求,那么将这个图片转换成一个BASE64字符串是最好的解决方案. 有用的工具(用于图片转换成BASE64编码): http://webcodertools.com/imagetobase

CSS通过边框border-style来写小三角

<!DOCTYPE html> /*直接复制代码即可在浏览器验证*/ <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } /*盒子的样式*/ .box { position: relative; margin: 20px auto; he

一个常见下拉菜单的样式:一体化小三角(纯css手写解决)

类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用border属性:2.利用正方形选择45度. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <style> *{

用CSS制作小三角提示符号

今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 1 <div class="wrap"> 2 <div class="up-arr1"></div> 3 <div class="up-arr2"></div> 4 </div> css 结构如下: .wrap { position: relative; } .up-arr1 { po

聊天小三角

绘制聊天小三角 1.先创建一个UIView, 并添加在父视图上 let blankView = UIView(frame: CGRectMake(100, 100, 100, 100)) blankView.backgroundColor = UIColor.greenColor() blankView.layer.mask = test(blankView) self.view.addSubview(blankView) 2.创建一个方法 //设置小三角 func test(showView: