记录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. css3学习笔记三

    css3有些特殊的元素选择器这和jquery相似.效果图如下

  2. php $_SERVER['HTTP_USER_AGENT']

    //获取浏览器 function getBrowse() { global $_SERVER; $Agent = $_SERVER['HTTP_USER_AGENT']; $browseinfo='' ...

  3. 网页正文提取,降噪的实现(readability/Document)

    安装: pip install readability-lxml 使用: # encoding:utf-8import html2textimport requestsimport refrom re ...

  4. Java并发知识点总结

    前言:Java语言一个重要的特点就是内置了对并发的支持,让Java大受企业和程序员的欢迎.同时,如果想要提升自己的技术,Java并发知识必不可少,这里简单整理了一些相关内容,希望可以起到抛砖引玉的作用 ...

  5. 解决还原数据库是出现system.data.sqlclient.sqlerror filestream功能被禁用的问题

    在master数据库下新建查询 输入如下语句: USE master GO RECONFIGURE 执行 成功还原数据库

  6. 【uoj#209】[UER #6]票数统计 组合数+乱搞

    题目描述 一个长度为 $n$ 的序列,每个位置为 $0$ 或 $1$ 两种.现在给出 $m$ 个限制条件,第 $i$ 个限制条件给出 $x_i$ .$y_i$ ,要求至少满足以下两个条件之一: 序列的 ...

  7. java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986

    微信小程序前后台使用get方式传参时报错如图.但在微信开发平台和苹果测试都没事,在安卓手机上就报这个错,猜想原因是get传递了汉字的原因. 尝试了下在后台输出从前台获取的参数,但是后台什么也没有获取到 ...

  8. 将javaweb项目部署到阿里云服务器

    主要步骤:1. 购买阿里云服务器2. 远程连接3. 在云服务器上配javaweb环境:jdk,tomcat,MySQL4. 将项目的war文件放到Tomcat下关于云服务器ECS:如果还想在买服务器之 ...

  9. C#:system.collections.generic(泛型)

    1. array是一个固定长度的,如果要动态的存储的话就不行了,虽然 System.Collections.ArrayList(),是一个动态的存储的容器,但是没有对存储中的数据进行一个约束,所以非泛 ...

  10. [AT2567] [arc074_c] RGB Sequence

    题目链接 AtCoder:https://arc074.contest.atcoder.jp/tasks/arc074_c 洛谷:https://www.luogu.org/problemnew/sh ...