记录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. ASP.net四则运算《《《策略模式

    Calculator.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; / ...

  2. Teamwork(The third day of the team)

    在确定了第一个spring后我们就开始了各自的工作,不过由于大家都在专注于自己的工作并且由于近段时间的作业及各方面的事情都很多,没有来得及每天都更新一个博客,因此,我们现在把落下的博客都补上,很多事情 ...

  3. H5页面的滚动条在windows浏览器下始终看到(灰色的不可用的)

    一般这种情况是在某些相关的div上设置了overflow:scroll属性,在mac系统的浏览器下均没有滚动条显示而在windows下的各个浏览器上均可以看到灰色的不可用的滚动条,这种情况我们需要在b ...

  4. 【Leetcode】109. Convert Sorted List to Binary Search Tree

    Question: Given a singly linked list where elements are sorted in ascending order, convert it to a h ...

  5. .NET4.0 加密通讯协议下TLS 的兼容支持问题.

    Study From https://stackoverflow.com/questions/28286086/default-securityprotocol-in-net-4-5 The defa ...

  6. [转帖]Cgroups 与 Systemd

    Cgroups 与 Systemd 大神的文章很牛B .. https://www.cnblogs.com/sparkdev/p/9523194.html 看不太懂 , 转帖一下 自己留着好好看呢. ...

  7. poj 1966(顶点连通度)

    题意:给出一个n个节点和m条边的图,求该图的顶点连通度. 分析: 顶点连通度的求解可以转换为网络最大流问题. (1)原图G中的每个顶点v变成网络中的两个顶点v‘和v’‘,顶点v’至v''有一个条弧(有 ...

  8. Dapper 事务处理

    例子: using (var connection = GetOpenConnection()) using (var transaction = connection.BeginTransactio ...

  9. Redis 基础:Redis 事件处理

    Redis 事件处理 Redis服务器是一个事件驱动程序,服务器需要处理以下两类事件: 文件事件(file event):Redis服务器通过套接字与客户端(或其他Redis服务器)进行连接,而文件事 ...

  10. AFO NOI2018退役——菜鸡一直是菜鸡

    游记DAY -INF连续几天的模拟让我确信我就是菜鸡.以及相信yxd,sjq,cyl神犇一定能够稳了. DAY 0报道,天很热热热热热热热热热. DAY 1开幕式,杜子德很热热热热热热热热热. DAY ...