教你小三角,适用移动端等,解决移动端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标签的时候,它会有默认的背景颜色,解决办法
-webkit-tap-highlight-color:transparent;
2》当点击时可能会出现下划线,解决方法
text-decoration: none; //或者
border: none;//或者
outline:none;
3>当鼠标放上去时显出下划线,解决办法;
a:hover{
text-decoration:none;
}
a标签是一个行内标签,如果要设置它的宽高或多个样式可通过display:block;将其变为块级标签。
教你小三角,适用移动端等,解决移动端a标签的默认样式的更多相关文章
- css border制作小三角形状及气泡框(兼容IE6)
先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...
- css直接写出小三角
在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!先看看如何写出各种小三角! /*箭头向上*/ .arrow-up { ; ; border-lef ...
- 如何把select默认的小三角替换成自己的图片
不同的浏览器默认的select的选项图标是不同的,例如: 在chrome中,是这样的: 未点击时 点击时 在Firefox中是这样的: 未点击时 点击时 在IE9中是这样的: 未点击时 ...
- CSS实现小三角小技巧
<style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...
- css实现小三角(原理)
效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...
- 【学】CSS3基础实例1 - 用CSS3做网页中的小三角,以及transition的用法
自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...
- CSS通过边框border-style来写小三角
<!DOCTYPE html> /*直接复制代码即可在浏览器验证*/ <html> <head lang="en"> <meta char ...
- CSS创建三角形(小三角)的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
- css3旋转小三角
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- css ie6双倍margin现象
IE6双倍margin bug 当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign. 解决方案: 1)使浮动的方向和margin的方向,相反. 所以,你就会发现, ...
- [短期持续更新]Codeforces 构造题一览
说实话我觉得做这种题很没意思(不够硬核), 可是人有短板终究是要补的...起码这种类型补起来相对简单 所以还是把先前准备好的专题放下吧,做点实现上比较休闲的题 ps.为了精简篇幅,代码全部丢到ubun ...
- json处理工具类
需要的jar包 <!-- Jackson Json处理工具包 --><dependency><groupId>com.fasterxml.jackson.core& ...
- jquery ajax的getJSON使用
getJSON的定义和用法 通过 HTTP GET 请求载入 JSON 数据. 在 jQuery 1.2 中,您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据,如 " ...
- .Net C# 泛型序列化和反序列化JavaScriptSerializer
项目添加引用System.Web.Extensions /// <summary> /// 泛型序列化 /// </summary> public class JsonHelp ...
- es第四篇:Query DSL
Query and filter context Match All Query 最简单的search请求,匹配所有文档,文档的_score值都是1,示例: get twitter/_search{ ...
- dubbo示例
Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案. 我也不明白这是什么意思,使用了之后大概就是提供一个将多个项目进行联合的一种分布式,使用的是一 ...
- Mybatis Dao开发方法(二)
使用Mapper代理的方式进行开发 Mapper开发的原理 使用Mybatis的Mapper代理方式进行开发,使用该方式,只需要编写Mapper接口,不再需要编写实现类,由Mybatis框架通过接 ...
- [tools]转载汇总
1. 发送请求工具—Advanced REST Client Advanced REST Client是Chrome浏览器下的一个插件,通过它可以发送http.https.WebSocket请求.
- Getting over the dangers of rm command in Linux---reference
reference:http://www.coolcoder.in/2014/01/getting-over-dangers-of-rm-command-in.html When we want to ...