教你小三角,适用移动端等,解决移动端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 ...
随机推荐
- 最新的PHP trait使用方法详解
说通俗点,PHP中使用trait关键字是为了解决一个类既想集成基类的属性和方法,又想拥有别的基类的方法,而trait一般情况下是和use搭配使用的. 具体案例,查看php中文网这篇文章.http:// ...
- sqlalchemy中使用event设置条件触发短信与邮件通知
一.原因 近期在做短信与邮件通知系统.使用到了这一块.例如,当订单完成以后进行邮件短信的通知.虽然可以采用直接调用接口的方式实现,但有几个原因让我希望使用条件触发的方式 1.由于系统中支持线上线下以及 ...
- SPOJ - TTM 主席树
给你一个系列\(a[1...n]\),要求可以区间求和,区间更新,也可以回溯过去 经典的主席树板子题,很久以前做的题了,代码太丑回炉重写 PS.题目标题To The Moon也是我最喜欢的游戏之一 这 ...
- 街机模拟.samsho2
1.sdyrugal https://www.douyu.com/599516 2.红中哥:西瓜视频 搜索 "红中哥游戏解说" 我搜索到的地址:https://live.ixig ...
- Android deeplink和AppLink原理
APP开发中经常会有这种需求:在浏览器或者短信中唤起APP,如果安装了就唤起,否则引导下载.对于Android而言,这里主要牵扯的技术就是deeplink,也可以简单看成scheme,Android一 ...
- (转)linux内存源码分析 - 内存回收(lru链表)
原文:http://www.cnblogs.com/tolimit/p/5447448.html 概述 对于整个内存回收来说,lru链表是关键中的关键,实际上整个内存回收,做的事情就是处理lru链表的 ...
- 我的Python升级打怪之路【六】:面向对象(二)
面向对象的一些相关知识点 一.isinstance(obj,cls) 检查实例obj是否是类cls的对象 class Foo(object): pass obj = Foo() isinstance( ...
- ios UITableView 异步加载图片并防止错位
UITableView 重用 UITableViewCell 并异步加载图片时会出现图片错乱的情况 对错位原因不明白的同学请参考我的另外一篇随笔:http://www.cnblogs.com/lesl ...
- JavaScript自适应调整文字大小
JavaScript自适应调整文字大小 今天有个任务,发现页面上的数字由于太长而与其他数字重叠了.这个数字还不能像文字那样只显示一部分,必须全部显示.想了一些办法都不行,最后把超过1000变成1K,大 ...
- Mybatis 关联查询(二
一对多的管理查询结果映射 1.进行一对多的查询时候,要在主查询表对应的Po中加入关联查询表对应PO的类的list集合作为属性. public class Orders { private Inte ...