教你小三角,适用移动端等,解决移动端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 ...
随机推荐
- C#-★结构体★
结构体: 结构体类型是用户自己定义的一种类型,它是由其他类型组合而成的,可包含构造函数.常数.字段.方法.属性.索引器.运算符.事件和嵌套类型的值类型. 结构体在几个方面不同于类:结构体为值类型而不是 ...
- 自己写的第一个Schema文件
<Schema name="FinSchema" description="财务模式" measuresCaption="财务模式"& ...
- excel批量中英翻译单元格
英 ==> 中 =FILTERXML(WEBSERVICE("http://fanyi.youdao.com/translate?&i="&H1&&q ...
- USART列子
#include "stm32f10x.h" void USART_INit(void) { GPIO_InitTypeDef GPIO_Initstructe; USART_In ...
- CF1063F. String Journey(后缀数组+线段树)
题目链接 https://codeforces.com/contest/1063/problem/F 题解 虽然本题有时间复杂度较高但非常好写的做法...... 首先,若答案为 \(k\),则一定存在 ...
- 233 Matrix(矩阵快速幂+思维)
In our daily life we often use 233 to express our feelings. Actually, we may say 2333, 23333, or 233 ...
- pyinstaller打包工具简单使用
python脚本如果在没有安装python的机器上不能运行,所以将脚本打包成exe文件将可跨平台使用,那么怎么打包了,python提供了专门的模块:pyinstaller,下面就介绍下怎么用 1.安装 ...
- java多线程-ThreadLocal
大纲: 用法 源码 一.用法 ThreadLocal是一个容器,顾名思义就是把一个变量存到线程本地. class Test { public static void main(String[] arg ...
- 数据备份及恢复(mongodump/mongorestore)
说明 1.mongodump创建高保真的BSON文件,mongorestore可以用其恢复数据库.对于小型数据库的备份和恢复,这两个工具非常简单和高效,但对于大型数据库的备份并不理想.2.mongod ...
- java实现HTTP请求的三种方式
目前JAVA实现HTTP请求的方法用的最多的有两种:一种是通过HTTPClient这种第三方的开源框架去实现.HTTPClient对HTTP的封装性比较不错,通过它基本上能够满足我们大部分的需求,Ht ...