zoukankan      html  css  js  c++  java
  • 【记录】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: 0;
            top: 0;
        }

    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: 2;
         overflow: hidden;
    }

    效果:

  • 相关阅读:
    【BZOJ2067】[Poi2004]SZN
    BZOJ4675
    [bzoj3522][bzoj4543][POI2014]HOTEL
    bzoj2969矩形粉刷
    bzoj2969矩形粉刷
    1419: Red is good
    【BZOJ2698】染色
    BZOJ5084[hashit]
    [WC2014]紫荆花之恋
    齐次常系数递推关系式
  • 原文地址:https://www.cnblogs.com/miskis/p/8669387.html
Copyright © 2011-2022 走看看