记录css的样式设置,方便以后使用。

1、绝对定位,自适应父级大小css:

.search-icon-delete {
background: url('../../assets/images/search_icon_deleteGray.png') no-repeat left center;
width: 40px;
height: 40px;
position: absolute;
right:;
top:;
}

html:

 <input type="text" name="search" id="search" value="" placeholder="" style="padding-left:45px;"/>
<span class="search-icon-delete" style="display:none"></span>

效果:

2、图片放置到文本框中:

#phone {
background: url('../image/me_icon_kefu@2x.png') no-repeat left center;
background-size: 30px;
}

效果:

3、按钮颜色渐变:

#add_tourist {
background-image: linear-gradient(-90deg, #FF8126 0%, #F74A1C 100%);
}

效果:

4、内容超过两行隐藏

.text-box {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:;
overflow: hidden;
}

效果:

【记录】css样式的更多相关文章

  1. (转载)记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

  2. css 样式 记录

    /* Track */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-bo ...

  3. jquery操作CSS样式全记录

    $(this).click(function(){  if($(this).hasClass(“zxx_fri_on”)){    $(this).removeClass(“zxx_fri_on”); ...

  4. 对于一些css样式的巧妙方法进行总结。

    针对之前遇到过的一些特殊样式的实现,我今天做个总结,目的有二:一是将这些方法记录下来,以便将来需要用到时查找使用.二为将这些大神们智慧的结晶发扬光大,让广大前端程序猿们能够少走弯路.此贴为更新帖,以后 ...

  5. HTML标记语言和CSS样式的简单运用(Nineteenth Day)

    曾经励志下去要坚持把每天所学的知识记录下来,可是坚持了几天后,就觉得自己坚持不下去了....这几天自己好好的想了想,觉得不能坚持也得要坚持,因为要对自己负责,所以得学会逼着自己去做,只有这样才能把一件 ...

  6. PHP使用echo输出标签设置CSS样式问题

    使用php是可以输出HTML标签的,这为页面设计带来很大方便. 在此记录php输出标签设置CSS样式的问题: echo可使用''.""或你不用引号,如果想要输出带CSS样式的HTM ...

  7. 常用css样式(布局)

    兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项 ...

  8. IIS发布,无法显示CSS样式和图片

    描述: 最近给同事安装web程序时,把IIS安装好后,发布网站时,图片和css样式不显示. 程序没问题,发布也没问题. 后来网上一查,出错的原因可能是IIS的配置问题. 果然,按照网上的方法,顺利显示 ...

  9. 靠谱的CSS样式

    0. 引言 记录一些用到的CSS样式,只要可以使用CSS3的地方都可以使用. 1. CSS样式 flex布局:引用 阮一峰的网络日志http://www.ruanyifeng.com/blog/201 ...

随机推荐

  1. 关于JoptionPane提示框

    import java.util.*; import javax.swing.JOptionPane; import javax.swing.UIManager; public class Main ...

  2. sql经常出现死锁解决办法

    文章:sql server在高并发状态下同时执行查询与更新操作时的死锁问题

  3. ACM Shenyang Onsite 2016 题目

    A. Thickest Burger 1000ms 262144K   ACM ICPC is launching a thick burger. The thickness (or the heig ...

  4. VirtualBox安装及Linux基本操作(操作系统实验一)

    VirtualBox安装教程博客链接(转载)https://blog.csdn.net/u012732259/article/details/70172704 实验名称:Linux的基本操作 实验目的 ...

  5. 树莓派与Arduino Leonardo使用NRF24L01无线模块通信之基于RF24库 (三) 全双工通信

    设计思路 Arduino Leonardo初始化为发送模式,发送完成后,立即切换为接收模式,不停的监听,收到数据后立即切换为发送模式,若超过一定时间还为接收到数据,则切换为发送模式. 树莓派初始化为接 ...

  6. QtCreator源码分析—2.启动主程序(4篇)

    QtCreator采用插件体系结构.主程序启动插件管理器(PluginManager),再通过插件管理器加载其插件,QtCreator的所有功能均使用插件实现. 我们先来分析主程序对插件管理器的主要操 ...

  7. PHP中的PEAR是什么?

    PEAR也就是为PHP扩展与应用库(PHP Extension and Application Repository),它是一个PHP扩展及应用的一个代码仓库. 补充:php中扩展pecl与pear ...

  8. 子类使用父类的方法 或属性时候 里面的this 代表的是自己

  9. P2303 [SDOi2012]Longge的问题

    题目描述 Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数N,你需要求出∑gcd(i, N)(1<=i <=N). 输入输出格式 输入格式: 一 ...

  10. mysql二进制日志的开启和使用

    二进制日志(BINLOG)记录了所有的ddl和dml语句,但不包括数据查询语句.语句以“事件”的形式保存,描述数据更改过程. 环境:win8   mysql5.6.23 1.mysql开启二进制日志 ...