【记录】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 ...
随机推荐
- 第1阶段冲刺成果—简单运算game(APP)
第1阶段冲刺成果 由于我们团队都没有Android的基础,所以在这一块花了很长的时间去学习探索,就连简单的Android的电脑配置也花了很长的时间,所以其他的DONE的都没有完成,这是失败的地方.但是 ...
- JavaBean 与 EJB 的区别
JavaBean在一般情况下指的是实体类,在大部分情况下和POJO是同义词,基本构成就是一些字段和与之对应的 setter.getter方法,如果一个JavaBean需要在不同的JVM的进程中进行传递 ...
- tomcat介绍
Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由java语言编写,需要运行在jvm虚拟机中.之所以Java的应用 ...
- vue 笔记1
created 钩子可以用来在一个实例被创建之后执行代码: new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 co ...
- poj 2299 Ultra-QuickSort(树状数组求逆序数)
链接:http://poj.org/problem?id=2299 题意:给出n个数,求将这n个数从小到大排序,求使用快排的需要交换的次数. 分析:由快排的性质很容易发现,只需要求每个数的逆序数累加起 ...
- 浏览器本地存储(browser-storage)
https://www.baidufe.com/component/browser-storage/api.html 首页 | API参考 | 升级日志 BrowserStorage.api.set( ...
- ZOJ3435_Ideal Puzzle Bobble
把L,H,W分别减一就变成上面一个题目了. 不多说,也不召唤代码君了.
- RF相关知识
前言:下文中的总结都是来自于网络,有的来自与博客,有的来自于维基百科/百度百科,仅仅是为了方便查看. ASK: ASK:幅移键控调制的简写,例如二进制的,把二进制符号0和1分别用不同的幅度来表示, ...
- Atcoder arc080E Young Maids(线段树+优先队列)
给出一个n排列,每次可以选择相邻的两个数字放在新的排列首部,问最后形成的新的排列字典序最小是? 考虑新排列的第一个数字,则应是下标为奇数的最小数,下标不妨设为i.第二个数字应该下标大于i且为偶数的最小 ...
- Qt 5.9.1 连 MYSQL 5.7数据库
Qt程序报错: QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: available drivers: QSQLITE QMYSQL QMYSQ ...