关键字:
  • div内容垂直居中

    作者: king       发表时间: 2017-09-23 17:21
    1.单行内容可以设置height和line-height相同: div { height:30px; line-height:30px; width:100px; overflow:hidden; } 2.多行内容使用css3的transform属性 .center-vertical{ position: relative; top:50%; transform:translateY(-50%); } transform在嵌套中可能50%取值为非预期,而导致不居中。 3.多行内容使用display:table 将子元素设置为display:table-cell 和vertical-align:middle .wrapper{ display: table; } .cell { display: table-cell; vertical-align: middle; } html结构如下: <div class="wra...
  • div半透明背景效果 div背景颜色渐变 背景图占满div 背景适应窗体大小

    作者: king       发表时间: 2017-09-23 17:04
    div 半透明背景效果: background:rgba(255,255,255,0.5)   div背景颜色渐变(从左到右90deg 开始颜色#00b9fe 结束颜色transparent):   background-image: linear-gradient(90deg, #00b9fe, transparent), linear-gradient(90deg, #00b9fe, transparent);   div背景图铺满div大小:     background-size: cover;/*100%*/     -webkit-background-size: cover;     -moz-background-size: cover;     -o-background-size: cover;   页面背景图片适应窗体大小: css代码...
  • div内容超长显示省略号

    作者: king       发表时间: 2017-09-23 15:37
    div 省略号  要设置width最大值      overflow: hidden;      text-overflow: ellipsis;      white-space: nowrap;           div 两行省略号  要设置width最大值    text-overflow: -o-ellipsis-lastline;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 3;    -webkit-box-orient: vertical;
  • CSS+Js快速实现仿CSDN和博客园页面布局

    作者: king       发表时间: 2014-11-23 19:17
    一、Css+Js实现2列CSDN页面布局 1.功能说明  页面分左右两列宽度固定的内容区域,页面左右两侧留有相等宽度的边距。 当改变浏览器窗体大小时,页面随着窗体宽度的变化自动调整左右边距的宽度,同时保持2列内容区域占据的宽度固定不变。 2. 关键代码 主要用到css样式的float属性和margin属性。通过float:left属性使第1列内容区域向左浮动,float:right属性使第2列内容区域向右浮动。 使用margin-left和margin-right属性分别设置2个div的左右边距。左右边距的设置通过Js在页面加载设置一次,窗体变化时实时动态修改。     <script src="./jquery-1.7.1.min.js" type="text/javascript"></script>     <style>       ...