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标签的默认样式的更多相关文章

  1. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  2. css直接写出小三角

    在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!先看看如何写出各种小三角! /*箭头向上*/ .arrow-up { ; ; border-lef ...

  3. 如何把select默认的小三角替换成自己的图片

    不同的浏览器默认的select的选项图标是不同的,例如: 在chrome中,是这样的: 未点击时    点击时  在Firefox中是这样的: 未点击时  点击时   在IE9中是这样的: 未点击时  ...

  4. CSS实现小三角小技巧

    <style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...

  5. css实现小三角（原理）

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  6. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

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

    <!DOCTYPE html> /*直接复制代码即可在浏览器验证*/ <html> <head lang="en"> <meta char ...

  8. CSS创建三角形（小三角）的几种方法

    你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...

  9. css3旋转小三角

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 高阶篇：4.2.2）DFMEA层级分明的失效模式、失效后果、失效原因

    本章目的:明确失效模式.失效后果.失效原因的定义,分清楚层次关系,完成DFMEA这部分的填写. 1.失效模式,失效后果,失效原因的定义: 这是FEMEA手册第四册中的定义. 1.1 潜在失效模式 (b ...

  2. Angular material mat-icon 资源参考_Toggle

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

  3. wordpress 后台页面无法显示绑定的台湾语言

    问题:当前切换到的语言是English,然后在页面的列表中,分别显示的语言有中文和香港,没有出现台湾的图标,如上图所示 原因:在polylang插件的设置里面,可以看到台湾语言的 Language c ...

  4. iview modal对话框的一个小知识点

    我在做一个项目的一个页面的时候有两个弹窗,发现点击一个弹窗的右上角关闭按钮后,打开另一个弹窗的时候,另一个弹窗里面带有上一个弹窗里的样式内容,说明上一个弹窗并没有被销毁. 后来发现modal源码里的c ...

  5. selenium 多窗口(windows)及ITargetLocator使用总结

    1. selenium能实现窗口切换的原理 2. 常见命令 2.1 WindowHandle 2.2 WindowHandles 2.3 SwitchTo 3. 使用JavaScript新建窗口 4. ...

  6. Android Notification 的四种使用方式

    实现通知步骤 一般实现通知需要如下步骤: 1.获取 NotificationManager 实例管理通知: 2.实例 Notification 对象: 3.管理事件 Intent: 4.发送通知. 注 ...

  7. (转)Linux服务器SNMP常用OID

    原文:https://www.haiyun.me/archives/linux-snmp-oid.html 收集整理一些Linux下snmp常用的OID,用做服务器监控很不错.服务器负载: 1 2 3 ...

  8. springboot 上传图片与回显

    在网上找了很多例子,不能完全契合自己的需求,自行整理了下.需求是这样的:项目小,所以不需要单独的图片服务器,图片保存在服务器中任意的地方,并且可以通过访问服务器来获取图片.话不多说上代码: 1.依赖 ...

  9. Oracle 数据库管理员及管理员的作用

    以下测试实例均在Oracle11gr2下测试!!! 一.简介:每个Oracle数据库应该至少有一名数据库管理员(dba),对于一个小的数据库,一个dba就够了,但是对于一个大的数据库,可能需要多个db ...

  10. 基于Metronic4.1的Bootstrap脚本样式说明

    虽说Bootstrap作为当下最流行的响应式的UI,但是对于一些在Bootstrap基础上扩展的UI的资料算是少之又少.这里楼主结合这一个月的辛酸把那些脚本跟样式整理一下下... 关于Metronic ...