CSS blockquote美化效果

模板网 2014-10-01

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

效果截图:

CSS blockquote美化效果

<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>

相关文章

  1. 手机站底部导航条效果自适应手机屏幕大小

    手机站底部导航条效果自适应手机屏幕大小 代码打包下载: 手机站底部导航条效果自适应手机屏幕大小 效果截图:

  2. 手机站底部很好看的导航条效果

    手机站底部很好看的导航条效果,采用了html5的一些新特性,拨打电话图片呈现动态效果。 代码打包下载: 手机站底部很好看的导航条效果 效果截图:

  3. CSS blockquote美化效果

    blockquote相信大家都不陌生吧,在Word叫文本框,其实在网页了可叫它文本框吧,如果在一段文本的两头加上blockquote标签的话,那么文本将会接出来显示,而且其内的文本将含有blockquote的格式,所以只要用CSS定义好了blockquote的各个属性,你会发现这会是个

  4. 常用CSS重置代码

    CSS重置(CSS reset),也就是重置默认样式。在不同浏览器,HTML中标签的默认样式有一个默认属性值,渲染出来的效果不尽相同,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式,以方便统一,从而提高开发效率,提高样式代码的重用,

  5. 手机站常用的底部导航条,宽度自适应

    手机站常用的底部导航条,宽度自适应。 代码打包下载: 手机站常用的底部导航条,宽度自适应 效果截图:

随机推荐

  1. 手机站底部导航条效果自适应手机屏幕大小

    手机站底部导航条效果自适应手机屏幕大小 代码打包下载: 手机站底部导航条效果自适应手机屏幕大小 效果截图:

  2. 手机站底部很好看的导航条效果

    手机站底部很好看的导航条效果,采用了html5的一些新特性,拨打电话图片呈现动态效果。 代码打包下载: 手机站底部很好看的导航条效果 效果截图:

  3. CSS blockquote美化效果

    blockquote相信大家都不陌生吧,在Word叫文本框,其实在网页了可叫它文本框吧,如果在一段文本的两头加上blockquote标签的话,那么文本将会接出来显示,而且其内的文本将含有blockquote的格式,所以只要用CSS定义好了blockquote的各个属性,你会发现这会是个

  4. 常用CSS重置代码

    CSS重置(CSS reset),也就是重置默认样式。在不同浏览器,HTML中标签的默认样式有一个默认属性值,渲染出来的效果不尽相同,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式,以方便统一,从而提高开发效率,提高样式代码的重用,

  5. 手机站常用的底部导航条,宽度自适应

    手机站常用的底部导航条,宽度自适应。 代码打包下载: 手机站常用的底部导航条,宽度自适应 效果截图: