css实现排序升降图标

效果图:

code:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>

  <style type="text/css">

    .on {      border-bottom: 2px solid #e61773;      width: 150px;      height: 40px;      display: table-cell;      position: relative;    }

    .on a {      display: block;      overflow: hidden;      width: 100%;      height: 30px;      line-height: 30px;      text-align: center;      color: #5e5e5e;    }

    .angle_top {      content: '';      width: 0;      height: 0;      display: block;      border-style: solid;      border-width: 0 6px 6px;      border-color: transparent transparent #5e5e5e;      position: absolute;      transform: rotate(180deg);      bottom: 14px;      right: 17px;    }

    .angle_bottom {      content: '';      width: 0;      height: 0;      display: block;      border-style: solid;      border-width: 0 6px 6px;      border-color: transparent transparent #5e5e5e;      position: absolute;      top: 10px;      right: 17px;    }  </style></head><body>

<div class="on">  <a href="javascript:void(0)" data-category="price" data-orderby="asc" class="js_category">价格    <i class="angle_top"></i>    <i class="angle_bottom"></i>  </a></div></body></html>

转载于:https://www.cnblogs.com/zxk5625/p/9405370.html

css实现排序升降图标相关推荐

html排序图标,css实现排序升降图标
效果图: code: Title 价格
Web前端开发最佳实践（8）：还没有给CSS样式排序？其实你可以更专业一些
前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...
把svg图标制作成字体图标_让我们用SVG符号和CSS变量制作彩色图标
把svg图标制作成字体图标 by Sarah Dayan 通过莎拉·达扬让我们用SVG符号和CSS变量制作彩色图标 (Let's make multi-colored icons with SVG ...
直接在 CSS 中引用 FONTAWESOME 图标（附码表）
直接在 CSS 中引用 FONTAWESOME 图标(附码表) 因此我们如果不想用 Fontawesome 提供的类,只想在 css 里面引用图标的话,可以这样子,请自行脑补: .icon:befor ...
css与jquery、图标字体、常用数据
常用数据 *)按钮常用颜色:#008cBA/#169fe6;(字母大小写没有区别) css与jquery.图标字体. *)还能这样选择 header #search input[type=" ...
利用css画三角箭头图标
利用css画三角箭头图标方式单独设置正方形的两条相邻的边框,通过transform的rotate属性值旋转实现箭头图标(注意单位为deg) div {width: 50px;height: 50px ...
css信号强度显示,纯css实现wifi信号图标及强弱/链接/加密状态
分享一段自己写的纯css实现的wifi连接的各种状态代码,希望能帮助到一些学习的朋友.默认图标大小为20px,已经通过transform放大,具体的可以见详细代码及预览. 运行代码纯css实现wif ...
css鼠标滑过图标显示_CSS和jQuery教程：苹果风格的花式图标滑出导航
css鼠标滑过图标显示 View demo 查看演示Download Source 下载源 Today I want to show you, how to create an Apple-style ...
自定义icon，在iconfont.css中引入自定义图标
现有需求将png图标直接引入iconfont.css中,例如在el-input的icon中直接使用,解决办法如下: 第一步:找到icons中的iconfont.css 第二步:引入图标,iconfon ...

css实现排序升降图标

css实现排序升降图标相关推荐

最新文章

热门文章