CSS blockquote美化效果

blockquote相信大家都不陌生吧，在Word叫“文本框”，其实在网页了可叫它文本框吧，如果在一段文本的两头加上blockquote标签的话，那么文本将会接出来显示，而且其内的文本将含有blockquote的格式，所以只要用CSS定义好了blockquote的各个属性，你会发现这会是个好东西。注意，IE不支持本CSS代码中的部分定义，火狐或Chrome将显示最佳效果。

效果截图：

CSS blockquote美化效果

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;CSS blockquote标签的定义&lt;/title&gt;
&lt;style&gt;
blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:&quot;1C&quot;&quot;1D&quot;&quot;18&quot;&quot;19&quot;;
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}
&lt;/style&gt;
&lt;body&gt;
&lt;blockquote&gt;blockquote相信大家都不陌生吧，在Word叫“文本框”，其实在网页了可叫它文本框吧，如果在一段文本的两头加上blockquote标签的话，那么文本将会接出来显示，而且其内的文本将含有blockquote的格式，所以只要用CSS定义好了blockquote的各个属性，你会发现这会是个好东西。注意，IE不支持本CSS代码中的部分定义，火狐或Chrome将显示最佳效果。&lt;/blockquote&gt;
&lt;/body&gt;
&lt;/html&gt;

随机推荐

JS+CSS简单实现DIV遮罩层显示隐藏
Copy上面的代码到HTML页面即可查看效果。原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display=block or display=none.就可以实现DIV的显示和隐藏。注意两个DIV的z-index，显示在最
手机站头部超赞QQ邀请效果
手机站头部超赞QQ邀请效果，已整理为JS调用代码，方便直接引入网页调用。打包下载：手机站头部超赞QQ邀请效果效果截图：
利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。效果截图：
CSS blockquote美化效果
blockquote相信大家都不陌生吧，在Word叫文本框，其实在网页了可叫它文本框吧，如果在一段文本的两头加上blockquote标签的话，那么文本将会接出来显示，而且其内的文本将含有blockquote的格式，所以只要用CSS定义好了blockquote的各个属性，你会发现这会是个
手机站常用的底部导航条，宽度自适应
手机站常用的底部导航条，宽度自适应。代码打包下载：手机站常用的底部导航条，宽度自适应效果截图：

CSS blockquote美化效果

相关文章

随机推荐