夏目友人帐


CSS常用代码

页面内容居中

body {
    margin:0 auto;
}

单行文字图标居中

height和line-height设置同样的高度,再用margin-bottom来微调。

div {
    height:25px;
    line-height:25px;
}

IE6双倍margin的BUG

#box {
    float:left;
    width:100px;
    margin:0 0 0 100px; /* IE6会产生200px的距离 */
    display:inline; /* 解决方法 */
}

给网页更换鼠标指针

body {
    cursor:url('指针路径'),auto;
}

CSS Sprites用法

span {
    display:inline-block;
    height:16px; width:16px;
    background:url(icon.png) x坐标 y坐标 no-repeat;
}

子容器增长时父容器不自动增长

父容器 {
    overflow:auto;
    zoom:1; /* 兼容IE6 */
}

IE6 IE7下li高度异常

IE6 IE7将字体高度也算入行高 导致li高度异常 只需给li定义以下样式即可

li {
    font-size:0px;
}

DIV水平垂直居中

<div></div>
div {
    width:600px;
    height:400px;
    position:absolute; /* 设置绝对定位 */
    top:50%; /* 距离顶部50% */
    left:50%; /* 距离左侧50% */
    margin-top:-200px; /* 向上移动div高度的一半 */
    margin-left:-300px; /* 向左移动div宽度的一半 */
}

子容器margin-top后父容器下移

<div id="header">
    <div id="logo" style="margin-top:10px"></div>
</div>

header也会下移10px,可以给header设置样式:

#header {
    overflow:hidden;
}

去除input框Focus时有颜色的边框

input{
    outline:none;
}

CSS3改变文本选中颜色

::selection {
    background:#000;
    color:#FFF;
}

IE6 IE7 display:inline-block属性无效

<div></div>
<div></div>
div {
    display:inline-block;
    width:100px;
    height:100px;
    background:red;
}

在IE6 IE7下显示为两行,解决方法:

div {
    *display:inline;
}

IE6 IE7空div占空间

IE6 IE7下空白的div标签会占用一行高度,解决方法:

div {
    height:0;
    overflow:hidden;
}

CSS3页面淡入效果

@keyframes fade-in {
    0% {opacity: 0;}
    30% {opacity: 0;}
    100% {opacity: 1;}
}
body {
    animation: fade-in;
    animation-duration: 1s;
}

CSS长文本显示省略号

.cut {
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
<p class="cut">我是一段很长很可爱的文字</p>
随机文章推荐:

讨论区:

精彩评论
  1. 收藏,努力学习CSS样式代码。

  2. 努力学习,加油

δ