CSS遗忘项
Table of Contents

bg 用图片做背景自适应屏幕

如果采用background-image设置不是很理想, 即便设置了background-positionbackground-size以及background-repeat, 仍不能做到完美自适应屏幕。

body{
    background-image: url('img/fake.jpg');
    background-position: center;
    background-attachment: fixed;
    background-size: auto;
    background-repeat: no-repeat;
}

额外补充几个background属性:

background-size: length|percentage|cover|contain;

background-attachment: scroll|fixed|inherit;

background-repeat: repeat|repeat-x|repeat-y|no-repeat|inherit;

所以可以采用div作为底层图层来填充, code如下:

<div id="wb-bg">
    <img src="img/fake.jpg" class="bg-img" />
</div>
body{
    margin: 0;
}
#wb-bg{
    position: fixed; 
    width:100%; 
    height:100%; 
    z-index:-1
}
.bg-img{
    height: 100%; 
    width: 100%
}

ul li 元素横排显示

ul{
    list-style-type: none;
}
li{
    list-style: none;
    display: inline;
}

margin padding 区别

margin用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离

body{
    margin: .5em .5em 0 1.5em;
}

padding用来设置元素内容到元素边界的距离。

body{
    padding: 1em .5em .5em 1em;
}

icon 圆形图标

border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。

用法:border-radius: 1-4 length|% / 1-4 length|%;, sample 参照下面两种写法。

border-radius:2em;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
border-radius: 2em 1em 4em / 0.5em 3em;
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
.icon{
    padding-top: .5em;
    border-radius: 50%;
    -webkit-background-size: 96px 96px;
    height: 96px;
    width: 96px;
}

a 超链接变色

PS: rgb颜色参数

a:link {
 color: #0000ff;
 text-decoration: none
}
a:visited {
 color: #990099;
 text-decoration: none
}
a:hover {
 color: #ff0000;
 text-decoration: underline;
}
a:active {
 color: #ff7f24;  
 text-decoration: underline;
}