25个强大的CSS代码,据说这些是开发者经常遇到比较棘手的代码.doc
文本预览下载声明
今天介绍给大家我收藏的25个非常有用的CSS代码片段，在你开发基于CSS的网站时，这些代码是经常用到的，比方说一些特殊的效果，圆角边框，CSS透明度，梯形环绕，CSS小三角等，希望对你有用
1简单又好的 Blockquote 样式
CSS代码如下
1 blockquote {
2 background:#f9f9f9;
3 border-left:10px solid #ccc;
4 margin:1.5em 10px;
5 padding:.5em 10px;
6 quotes:\201C\201D\2018\2019;
7 }
8 blockquote:before {
9 color:#ccc;
10 content:open-quote;
11 font-size:4em;
12 line-height:.1em;
13 margin-right:.25em;
14 vertical-align:-.4em;
15 }
16 blockquote p {
17 display:inline;
18 }
?
?2图像在水平或者垂直方向的绝对定位
?
css代码?
1 img {
2 position: absolute;
3 top: 50%;
4 left: 50%;
5 width: 500px;
6 height: 500px;
7 margin-top: -250px; /* Half the height */
8 margin-left: -250px; /* Half the width */
9 }
?
? 3用PHP压缩CSS代码
?
1 ?php
2 ob_start (ob_gzhandler);
3 header(Content-type: text/css; charset: UTF-8);
4 header(Cache-Control: must-revalidate);
5 $offset = 60 * 60 ;
6 $ExpStr = Expires: .
7 gmdate(D, d M Y H:i:s,
8 time() + $offset) . GMT;
9 header($ExpStr);
10 ?
11
12 body { color: red; }
?
4如何用css实现小三角形符号
具体代码如下 ?首先是html代码
1 div class=arrow-up/div
2 div class=arrow-down/div
3 div class=arrow-left/div
4 div class=arrow-right/div
?
?css代码
1 .arrow-up {
2 width: 0;
3 height: 0;
4 border-left: 5px solid transparent;
5 border-right: 5px solid transparent;
6
7 border-bottom: 5px solid black;
8 }
9
10 .arrow-down {
11 width: 0;
12 height: 0;
13 border-left: 20px solid transparent;
14 border-right: 20px solid transparent;
15
16 border-top: 20px solid #f00;
17 }
18
19 .arrow-right {
20 width: 0;
21 height: 0;
22 border-top: 60px solid transparent;
23 border-bottom: 60px solid transparent;
24
25 border-left: 60px solid green;
26 }
27
28 .arrow-left {
29 width: 0;
30 height: 0;
31 border-top: 10px solid transparent;
32 border-bottom: 10px solid transparent;
33
34 border-right:10px solid blue;
35 }
?
?5.翻转图片
?
?
CSS代码
1
显示全部