Css技巧记录

1、calc

div.class_name {
    width: calc(100% - 36px);
}

2、vh, vw. vmax vmin

.box {
    height: 100vmax;
    width: 100vmax;
}

.box {
    height: 100vmin;
    width: 100vmin;
}

.slide {
    height: 100vh;
    width: 100vw;
}

3、li下面虚线

效果：cshall.alipay.com/lab/cateQue…

#help-list-article ul li {
    margin: ;
    padding: 8px 0 8px 27px;
    font-size: 14px;
    background: url(https://i.alipayobjects.com/e/201312/1nHwddc3yJ.png) no-repeat -391px -907px;
    border-bottom: 1px #EAEAEA dashed;
}
li {
    list-style: none;
}

4、li下面虚线 span 为label

<ul class="tpt-b cl">
<li><span>04-11</span><a href="/boke/003/thread-1-8.html">三大运营商推出的不限量卡，哪个性价比更高？</a></li>
<li><span>04-11</span><a href="/boke/003/thread-1-7.html">家庭网络布线有什么好的建议吗？</a></li>
<li><span>04-11</span><a href="/boke/003/thread-1-2.html">朋友圈的消息占内存太多，如何删掉半个月前的消息？</a></li>
<li><span>04-03</span><a href="/boke/003/thread-1-1.html">为什么有人请求加你为微信好友，通过之后却一句话也不再说？</a></li>
</ul>

.tpt-b {
    margin-top: 10px;
    padding: 0 20px 10px;
}

.tpt-b li {
    line-height: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
}
li {
    list-style: none;
}
.tpt-b li span {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    background: #4caf50;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    margin-right: 10px;
}

5、layui-input 线式表单

.layui-form-line .layui-input.layui-unselect{
	color: #000; 
	cursor:pointer!important; 
	border-color: #fff!important;
}
.layui-form-line .layui-input{
	border-color: #fff!important;
}
.layui-form-line .layui-input,
.layui-form-line .layui-input.layui-unselect{
	border-bottom-color:#000!important;
}
.layui-form-line .layui-input[readonly],
.layui-input[readonly]:hover{
	color: #000;cursor: not-allowed;
}
.layui-form-line .layui-form-label:after
{
	content: '：';
	position: absolute;
	right: 0px;
}

fly.layui.com/jie/52265/

6、li focus show other color 鼠标停留的时候显示其他颜色

li:hover {
    color: #00f;
}
li {
    padding: 0 0 5px 0;
    font-size: 15px;
    margin: 0;
    line-height: 28px;
    color: #008;
    list-style-type: disc;
}

7、layui-card, layui-form-item hover to change inner label color , layui-input hover style

<div class="layui-card app-border-card">
    <div class="layui-card-header"><i class="fa fa-user"></i> 用户登录</div>
    <div class="layui-card-body">
        <form class="layui-form" action="/login?username=locoroco&password=default123" method="post">
            <input type="hidden" name="token" id="token" value="{{.}}">

            <div class="layui-form-item" pane="">
                <label class="layui-form-label">爱好</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like[]" value="write" lay-skin="primary" title="写作" checked="">
                    <input type="checkbox" name="like[]" value="read" lay-skin="primary" title="阅读">
                    <input type="checkbox" name="like[]" value="game" lay-skin="primary" title="游戏">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" for="username">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入用户名" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" for="password">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" id="password" placeholder="请输入密码" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

.app-border-card {
    margin-top: 25px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 #01aaed;
}
.app-border-card .layui-card-header {
    color: #009688;
}

.app-border-card .layui-form-item:hover label {
    color: #9C27B0;
    font-size: 14px;
    font-weight: bold;
}
.app-border-card .layui-input:hover, .layui-textarea:hover {
    /* border-color: rgba(91, 192, 222, 0.8) !important; */
    border-color: #3baced !important;
    -webkit-box-shadow: 0 0 3px rgba(91, 192, 222, .5);
    -moz-box-shadow: 0 0 3px rgba(91, 192, 222, .5);
    box-shadow: 0 0 3px rgba(91, 192, 222, .5);
}

8、很好看的下划线以及tag

<div>
    <div class="ModTitlePc-wrap border-radius-top fliggyBlockTitle page1190-fliggyPromotionTitle">
        <div class="title">优惠</div>
        <div class="sub-title"></div>
    </div>
</div>

<div class="promotioin-tag-wrap">
    <div class="tag" data-spm-anchor-id="181.12199575.hotelpromotion.i1.6a716bdbbQikTO">里程赠送</div>
</div>

<div class="mod-protocols-wrap" data-spm="hotelprotocols">
    <div class="item-choice">
        <div class="agree-name" style="display: inline-block; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1SSL9d4naK1RjSZFtXXbC2VXa-60-60.png&quot;);">入离时间</div>
        <span class="protocol-list"></span>
    </div>
    <p class="sub-title">
        15:00后办理入住：早到店可能需要等待
        11:00前办理退房：续住及行李寄存请联系酒店前台
    </p>
</div>

.ModTitlePc-wrap {
    border-bottom: solid 2px #ffc900;
    background: #fff;
    height: 50px;
    line-height: 50px;
    padding-left: 18px;
}

.ModTitlePc-wrap .title {
    float: left;
    font-size: 18px;
    color: #333333;
}

.ModTitlePc-wrap .sub-title {
    float: left;
    font-size: 12px;
    color: #666;
    padding-left: 12px;
}

.promotioin-tag-wrap .tag {
    border: 1px solid;
    display: inline-block;
    color: #FF5000;
    padding: 2px;
    margin-right: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 2px;
}

.mod-protocols-wrap {
    margin-top: 12px;
    font-size: 12px;
}
.mod-protocols-wrap .item-choice {
    cursor: pointer;
}
.mod-protocols-wrap .sub-title {
    color: #a5a5a5;
    padding-left: 18px;
    line-height: 18px;
    white-space: pre-line;
}

9 layui-input里面加图标

.apple-form .layui-form-item .layui-input-inline {
    width: 200px;
}
.apple-input-icon i {
    position: absolute;
    right: 12px;
    cursor: pointer;
    top: 32%;
}

<div class="layui-fluid">
    <div class="layui-card" style="height: 98vh;">
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane apple-form" action="" method="POST">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">供应商<i class="required"> *</i></label>
                        <div class="layui-input-inline apple-input-icon">
                            <input autocomplete="off" class="layui-input" id="SupName" lay-verify="required" name="SupName" type="text" value="">
                            <i class="fas fa-search text-success" lay-tips="点击搜索"></i>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">采购人员</label>
                        <div class="layui-input-inline apple-input-icon">
                            <input class="layui-input" id="PurUserName" lay-verify="required" name="PurUserName" type="text" value="">
                            <i class="fas fa-search text-success"></i>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" data-submit="bill" id="Remark" name="Remark" type="text" value="">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

10 tips

.page-container .tip {
    padding: 8px 16px;
    background-color: #ECF8FF;
    border-radius: 4px;
    border-left: #50bfff 5px solid;
    margin: 20px 0;
}