CSS blockquote美化效果
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:"1C""1D""18""19";
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}
</style>
<body>
<blockquote>blockquote相信大家都不陌生吧,在Word叫“文本框”,其实在网页了可叫它文本框吧,如果在一段文本的两头加上blockquote标签的话,那么文本将会接出来显示,而且其内的文本将含有blockquote的格式,所以只要用CSS定义好了blockquote的各个属性,你会发现这会是个好东西。注意,IE不支持本CSS代码中的部分定义,火狐或Chrome将显示最佳效果。</blockquote>
</body>
</html>
相关文章
- DIV的CSS height:100%无效的解决办法
在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。 方法就是在css当中增加上
- 手机站底部很好看的导航条效果
手机站底部很好看的导航条效果,采用了html5的一些新特性,拨打电话图片呈现动态效果。 代码打包下载: 手机站底部很好看的导航条效果 效果截图:
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果,未使用任何js代码,简单方便。 效果截图:
- CSS仿Win7对话框黑色阴影效果
CSS仿Win7对话框黑色阴影效果,采用了CSS3的一个新属性,对所有新版本浏览器都支持,老版本的浏览器部分不支持。 兼容IE新版、Google浏览器、火狐浏览器,分别对应着三个属性:box-shadow、-webkit-box-shadow、-moz-box-shadow。 效果图:
- CSS改变选中文本背景色和文字颜色
CSS改变选中文本背景色和文字颜色。 效果截图:
随机推荐
- DIV的CSS height:100%无效的解决办法
在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。 方法就是在css当中增加上
- 手机站底部很好看的导航条效果
手机站底部很好看的导航条效果,采用了html5的一些新特性,拨打电话图片呈现动态效果。 代码打包下载: 手机站底部很好看的导航条效果 效果截图:
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果,未使用任何js代码,简单方便。 效果截图:
- CSS仿Win7对话框黑色阴影效果
CSS仿Win7对话框黑色阴影效果,采用了CSS3的一个新属性,对所有新版本浏览器都支持,老版本的浏览器部分不支持。 兼容IE新版、Google浏览器、火狐浏览器,分别对应着三个属性:box-shadow、-webkit-box-shadow、-moz-box-shadow。 效果图:
- CSS改变选中文本背景色和文字颜色
CSS改变选中文本背景色和文字颜色。 效果截图: