}

传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© AMay 中级黑马   /  2019-1-14 16:20  /  43 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

【简介】
         在开发中,有一些代码段的使用频率是非常高,或者有些只是偶尔用到,但是属性又很难记,那么这里把它做一个总结,方便查阅。
【将超出的部分变成 ...
代码:
[CSS] 纯文本查看 复制代码
.line1 {

        width: 100px;

        display: block;

        word-break: keep-all;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }
效果:
1.png
2.png
【超出3行显示省略号】
[CSS] 纯文本查看 复制代码
.line2{

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

}
效果:
3.png
【美化checkboxradio
Css代码
[CSS] 纯文本查看 复制代码
.label {

            font-size: 12px;

            cursor: pointer;

        }

        label i {

            font-size: 12px;

            font-style: normal;

            display: inline-block;

            width: 12px;

            height: 12px;

            text-align: center;

            line-height: 12px;

            color: #fff;

            vertical-align: middle;

            margin: -2px 2px 1px 0px;

            border: #2489c5 1px solid;

        }

        input[type="checkbox"], input[type="radio"] {

            display: none;

        }

        input[type="radio"] + i {

            border-radius: 7px;

        }

        input[type="checkbox"]:checked + i, input[type="radio"]:checked + i {

            background: #2489c5;

        }

        input[type="checkbox"]:disabled + i, input[type="radio"]:disabled + i {

            border-color: #ccc;

        }

        input[type="checkbox"]:checked:disabled + i, input[type="radio"]:checked:disabled + i {

            background: #ccc;

        }
Html代码:
[HTML] 纯文本查看 复制代码
<label><input type="checkbox"><i>✓</i>复选框</label><br>

<label><input type="checkbox" checked><i>✓</i>复选框</label><br>

<label><input type="checkbox" disabled><i>✓</i>复选框禁用</label><br>

<label><input type="checkbox" disabled checked><i>✓</i>复选框禁用已选</label><br>

<label><input type="radio" name="abc"><i>✓</i>单选框</label><br>

<label><input type="radio" name="abc" checked><i>✓</i>单选框</label><br>

<label><input type="radio" name="abc" disabled><i>✓</i>单选框禁用</label><br>

<label><input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选</label><br>
效果:
按钮.gif
【清除浮动】
[CSS] 纯文本查看 复制代码
.clearfix:after,

.clearfix:before {

        content: ".";

        display: block;

        clear: both;

        visibility: hidden;

        line-height: 0;

        height: 0;

}

/* IE 6/7 */ 

.clearfix { zoom: 1; }

分享至 : QQ空间
收藏

1 个回复

倒序浏览
看一看。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /5 下一条