CSS blockquote美化效果[8147阅/2回]
ＩＤ：1 , 等级：大虾
blockquote相信大家都不陌生
吧，在Word叫“文本框”，其实在网
页了可叫它文本框吧，如果在一段文
本的两头加上blockquote标签的话，
那么文本将会接出来显示，而且其内
的文本将含有blockquote的格式，所
以只要用CSS定义好了blockquote的
各个属性，你会发现这会是个好东
西。注意，IE不支持本CSS代码中的
部分定义，火狐或Chrome将显示最
佳效果。
<html>
<head>
<title>CSS blockquote标签的定义</title>
<style>
blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:“\201C““\201D““\2018““\2019“;
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
*:inline;
}
</style>
<body>
<blockquote>WAP开源论坛！站长的家园！</blockquote>
</body>
</html>
吧，在Word叫“文本框”，其实在网
页了可叫它文本框吧，如果在一段文
本的两头加上blockquote标签的话，
那么文本将会接出来显示，而且其内
的文本将含有blockquote的格式，所
以只要用CSS定义好了blockquote的
各个属性，你会发现这会是个好东
西。注意，IE不支持本CSS代码中的
部分定义，火狐或Chrome将显示最
佳效果。
<html>
<head>
<title>CSS blockquote标签的定义</title>
<style>
blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:“\201C““\201D““\2018““\2019“;
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
*:inline;
}
</style>
<body>
<blockquote>WAP开源论坛！站长的家园！</blockquote>
</body>
</html>
WAP开源论坛