html/css常用技巧

作者：Jasmine - 2018年10月30日

1.禁止鼠标双击选中文本

<div onselectstart="return false;" style="-moz-user-select:none;">不被双击选中文字的区域</div>

2.自定义li样式

li:{
list-style: none;
}
li:before{
content: "◆";
display: block;
float: left;
font-size: 1rem;
margin-right: 0.5rem;
}

3. IE条件注释

加载CSS2
<!--[if lt IE 9]>
加载CSS1(可以把要重写的写在这里).
<![endif]-->

4. 图片base64表示法

编写插件需要使用图片资源又不适合直接引入时使用base64图片编码进css或js插件

5. 不固定宽度的块状元素居中法门

//html
<div class="parent">
<div class="children">这算什么呢</div>
</div>
//css
.parent {
text-align: center;
width: 100%;
background: #eee;
}
.children {
display: inline-block;
border: 1px solid #666;
border-radius: 5px;
padding: 10px;
}

如果大家有其他看法欢迎发表看法~~

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/607

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！