前端常用的CSS代码块(二)

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

前端常用的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;
}

前端常用的CSS代码块(二)

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;
}
发表评论

相关文章