码迷,mamicode.com
首页 > 其他好文 > 详细

选中内容橙色边框,右下角小图标

时间:2016-08-15 12:49:10      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:

效果如图:

技术分享

首先,选择元素是一个行元素,span之类的,在行元素内部嵌一个空的<i>标签,将行元素转成块元素,把空间撑起来,再给<i>标签设置背景图片,定位。这个地方,父元素,即行元素要设置成相对定位,<i>标签则设置成绝对定位。

1 <span class="active">出现图标<i></i></span>
2 <span class="">点击出现图标<i></i></span>

cssdai

 1 <style>
 2 span{
 3 position:relative;
 4 width:120px;
 5 height:30px;
 6 lineheight:30px;
 7 text-align:center;
 8 display:inline-block;
 9 border:1px solid #e4e4e4;
10 }
11 span.active{
12 border:1px solid #FC923F;
13 color:#FC923F;
14 }
15 span.active i{
16 position:absolute;
17 right:0px;
18 bottom:0px;
19 width:10px;/*图标宽度*/
20 height:10px;/*图标高度*/
21 background: url("img/u763.png") no-repeat;
22 display: inline-block;
23 }
24 </style>

 

选中内容橙色边框,右下角小图标

标签:

原文地址:http://www.cnblogs.com/sirlhuang/p/5772441.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!