用html+css可以很方便的进行网页的排版布局,但不是每一种属性或者代码都会记得。下面接着分享一些常用的代码块。有网站建设需要的可咨询。

1.自定义文本选择
::selection { background: #e2eae2; }2.图片边框偏光
img.polaroid {
    background:#000; 
    border:solid #fff;
    border-width:6px 6px 20px 6px;
    box-shadow:1px 1px 5px #333; 
    -webkit-box-shadow:1px 1px 5px #333;
    -moz-box-shadow:1px 1px 5px #333;
    height:200px; 
    width:200px;  
}3.锚链接伪类
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }4.全屏背景图
html { 
    background: url('bg.jpg') no-repeat center center fixed; 
    background-size: cover;
}5.内容垂直居中
.center {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}
6.强制出现垂直滚动条
html { height: 101% }7.CSS3渐变模板
.bg {
    background: #629721;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
    background-image: linear-gradient(top, #83b842, #629721);
}8.@font-face引用
@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') 
    url('webfont.woff') format('woff'), 
    url('webfont.ttf')  format('truetype'),
    url('webfont.svg#svgFontName') format('svg');
}
body {
    font-family: 'MyWebFont', Arial, sans-serif;
}9.CSS斑马线
tbody tr:nth-child(odd) {
    background-color: #ccc;
}10.css&符号
.amp {
    font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    font-style: italic;
    font-weight: normal;
}









