【记录】css样式
记录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样式的更多相关文章
- (转载)记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
- css 样式 记录
/* Track */::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-bo ...
- jquery操作CSS样式全记录
$(this).click(function(){ if($(this).hasClass(“zxx_fri_on”)){ $(this).removeClass(“zxx_fri_on”); ...
- 对于一些css样式的巧妙方法进行总结。
针对之前遇到过的一些特殊样式的实现,我今天做个总结,目的有二:一是将这些方法记录下来,以便将来需要用到时查找使用.二为将这些大神们智慧的结晶发扬光大,让广大前端程序猿们能够少走弯路.此贴为更新帖,以后 ...
- HTML标记语言和CSS样式的简单运用(Nineteenth Day)
曾经励志下去要坚持把每天所学的知识记录下来,可是坚持了几天后,就觉得自己坚持不下去了....这几天自己好好的想了想,觉得不能坚持也得要坚持,因为要对自己负责,所以得学会逼着自己去做,只有这样才能把一件 ...
- PHP使用echo输出标签设置CSS样式问题
使用php是可以输出HTML标签的,这为页面设计带来很大方便. 在此记录php输出标签设置CSS样式的问题: echo可使用''.""或你不用引号,如果想要输出带CSS样式的HTM ...
- 常用css样式(布局)
兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项 ...
- IIS发布,无法显示CSS样式和图片
描述: 最近给同事安装web程序时,把IIS安装好后,发布网站时,图片和css样式不显示. 程序没问题,发布也没问题. 后来网上一查,出错的原因可能是IIS的配置问题. 果然,按照网上的方法,顺利显示 ...
- 靠谱的CSS样式
0. 引言 记录一些用到的CSS样式,只要可以使用CSS3的地方都可以使用. 1. CSS样式 flex布局:引用 阮一峰的网络日志http://www.ruanyifeng.com/blog/201 ...
随机推荐
- TCP/IP,HTTP,HTTPS,WEBSocket协议
我看看着挺多的,我暂时没时间自己写,有需要的请借鉴 http://mp.weixin.qq.com/s?__biz=MzI0MDQ4MTM5NQ==&mid=2247486927&id ...
- Alpha冲刺阶段博客汇总
第一篇(冲刺前安排):http://www.cnblogs.com/Aragaki-Yui/p/8893752.html 第二篇(冲刺第一天):http://www.cnblogs.com/Araga ...
- Beta阶段冲刺前的准备
Beta阶段冲刺前的准备 凡事预则立,在Beta开始前,以小组为单位,在敏捷冲刺前发布一篇博客,描述: 1. 讨论组长是否重选的议题和结论 经过我们小组在周二下午的会议中有重新认真的考虑了是否要更换组 ...
- 6th Alpha阶段的postmortem报告
组名:好好学习(代组长发布) 会议重要内容记录: 1. 尝试在beta阶段实现的功能,与alpha阶段相比的优势 (1)更改软件现有的bug: 1)软件的账目只能输入,但是一旦发生失误却无法更改和 ...
- CentOS 7.2修改网卡名称
#!/bin/bash #Centos7.2修改网卡名称ens33为eth0 #2017/05/19 if [ -f /etc/sysconfig/grub ];then cd cp /etc/sys ...
- jmeter 多线程组间变量共享
jmeter的线程组之间是相互独立的,各个线程组互不影响,所以线程组A中输出的参数,是无法直接在线程组B中被调用的. 但是有时为了方便管理,我们可能是把各个接口单独存放在不同的线程组中.拿Cookie ...
- [转帖]SSD的工作原理、GC和TRIM、写入放大以及性能评测
SSD的工作原理.GC和TRIM.写入放大以及性能评测 https://blog.csdn.net/scaleqiao/article/details/50511279 SSD的物理结构和工作原理 ...
- 使用Fiddler后谷歌浏览器访问https不安全
今天初次接触java爬虫,师兄给了一个软件加一个demo,软件是Fiddler,在网上找资料稍微学习了一下,自己一顿乱配...然后gg,谷歌浏览器访问https协议时都提示不安全,“您的链接不是一个私 ...
- 笔记:delphi 与 Query
以下不保存证正确 Query用SQL语言执行过的,没有必要Cancel.Post,因为其会对数据库直接操作:执行Update.Insert.Delete请用SQL语句: 用Table使用对当前记录直接 ...
- DispatcherServlet的url mapping为“/”时,对根路径访问的处理
背景 众所周知,Tomcat的Default Servlet的servlet-mapping为 <servlet-mapping> <servlet-name>default& ...