码迷,mamicode.com
首页 > Web开发 > 详细

css样式总结

时间:2017-05-10 15:44:21      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:缩进   pre   lips   indent   元素   ica   设置   position   ide   

  1. 文本较多时,只显示n行多余的用代替(以下代码直接在less中封装好的) @num---想要显示的行数

.font-hide(@num){
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: @num; /** 显示的行数 **/
  overflow: hidden;  /** 隐藏超出的内容 **/
}

 2.    固定一个样式

position:fixed;
z-index:3;
left:0;
right:0;
bottom:0;

 3.  两栏自适应

#left-1 {

    float: left;

    background-color: red;

}

#right-1 {

    overflow: hidden;

    background-color: blue;

}

4.    首行缩进

text-indent:25px

5.    背景固定

background:url(‘../images/bg.jpg‘);
background-repeat:no-repeat;
background-size:100% ;
background-attachment: fixed;//固定不动

6.    取消input默认样式

-webkit-appearance: none;

css样式总结

标签:缩进   pre   lips   indent   元素   ica   设置   position   ide   

原文地址:http://www.cnblogs.com/wangyuyuan/p/6836120.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!