html css blockquote,3个Blockquote的css样式【css3实现】
有关Blockquote的css样式,上一篇已经介绍了《5个Blockquote的css样式》,不过,那是使用css1的写法,要借助双引号的图片和span、div等标签来完成。今天将介绍3个使用css3来实现的Blockquote样式,代码更简洁,并且无需借助图片,推荐使用。
1、Blockquote样式一
效果图:
Blockquote-样式一
css代码:blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
/*字体*/
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.2;
color: #666;
text-align: justify;
/*边框 - (选项)*/
border-left: 15px solid #c76c0c;
border-right: 2px solid #c76c0c;
/*盒子阴影 - (选项)*/
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
blockquote::before{
content: "\201C"; /*左双引号的Unicode编码*/
/*字体*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999;
/*位置*/
position: absolute;
left: 10px;
top:5px;
}
blockquote::after{
content: ""; /*如果要显示右双引号,则写 content: "\201D"; */
}
html代码:
html里使用select控件,非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因,div+css实现的下拉菜单便大量被网页设计师使用。通过div+css,可以随心所欲的实现自己想要的样式效果,使得下拉菜单与网页整体布局搭配的更美观和谐。
2、Blockquote样式二
效果图:
Blockquote-样式二
css代码:blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
html代码:
html里使用select控件,非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因,div+css实现的下拉菜单便大量被网页设计师使用。通过div+css,可以随心所欲的实现自己想要的样式效果,使得下拉菜单与网页整体布局搭配的更美观和谐。
3、Blockquote-样式三
效果图:
Blockquote-样式三
css代码:blockquote {
background-color: #eae6f3;
border-left: 1em solid #5236a0;
margin: 1.0em 0 1.0em;
padding: 1em 1em 1em 1em;
position: relative;
color: #888;
}
blockquote:before {
color: #392570;
content: "\201C";
font-size: 5em;
line-height: 0em;
margin-right: 0em;
vertical-align: -0.4em;
}
blockquote:after {
color: #392570;
content: "\201D";
font-size: 5em;
position:absolute;
right:3px;
bottom: 0em;
line-height: 0.1em;
}
html代码:
html里使用select控件,非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度,不能更改高度和颜色等样式,因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因,div+css实现的下拉菜单便大量被网页设计师使用。通过div+css,可以随心所欲的实现自己想要的样式效果,使得下拉菜单与网页整体布局搭配的更美观和谐。
下载本文实例源码文件:
相关文章推荐:
总结
上面三个Blockquote样式,均使用css3来实现,无需图片,即可在左上角和右下角同时出现双引号,这如果是用css1是不能实现的。
css1的写法,要借助双引号的图片和span、div等标签来完成,可参考上一篇写的《5个Blockquote的css样式》。
也许大家会问,我们使用的主流浏览器支持css3?支持css3的浏览器有哪些?
其实,现在流行浏览器的最新版本都支持CSS3了,例如IE, Chrome, FireFox, Safari, Opera这5大浏览器,除了IE8以下版本不支持外,IE9、IE10、IE11都支持得很好了。360浏览器也当然支持,它用的是Chrome内核。
其中,支持最好的应该是Chrome和FireFox。
html css blockquote,3个Blockquote的css样式【css3实现】相关推荐
- css 矩形切角,特殊border的样式 -- CSS3实现三种切角效果
效果一: 代码: corner cutcorner cutcorner cutcorner cut CSS: .cornerCut{ width:200px; margin: 10px 20px; h ...
- 外链引入css有哪些方式_引入CSS样式表的方式有哪些?
CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表.引入样式表的常用方式有三种,即行内式.内嵌式.外链式,具体介绍如下. 1.行内式 行内式也称内联样式 ...
- css 圆形背景icon_我写CSS的常用套路(附demo的效果实现与源码)
前言 本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗.1.交错动画 有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇.那么如 ...
- CSS综合征病例,医药-churg-strauss 综合征 (css) 变应性嗜酸性肉芽肿.ppt
医药-churg-strauss 综合征 (css) 变应性嗜酸性肉芽肿 Churg-Strauss 综合征 (css) 变应性嗜酸性肉芽肿血管炎 刘林 概念 是一类病因不明.主要累及中小动脉的系统性 ...
- CSS特效(1)——css伪类实现表单验证样式
css伪类实现表单验证样式 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
- 10 个 GitHub 上超火的 CSS 技巧项目,找到写 CSS 的灵感!
大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧 ???? ~ 简介 一般人没事的时候刷刷朋友圈.微博.电视剧.知乎,而有些人是没事的时候 ...
- HTML字体怎么显示,教你如何用CSS来控制网页字体的显示样式
教你如何用CSS来控制网页字体的显示样式 更新时间:2007年02月27日 00:00:00 作者: HTML对于<font>内容</font>卷标只有: <font ...
- CSS(1)——如何使用css选择器
CSS(Cascading Style Sheet)层叠样式表,它可以用来美化我们的页面 它有三中引用方式,如下: (1)直接在标签里面引用(我们一般不用这个方法),也就是我前面发的一篇博客中如下的代 ...
- css教程–十步学会用css建站(全)
css教程–十步学会用css建站(全) 转载于:https://www.cnblogs.com/reommmm/articles/1195548.html
- js css加载器,webpack的CSS加载器的使用
什么是loader loader用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webp ...
最新文章
- 采购AI/ML安全工具前要先回答这11个问题
- 蓟门边studio-码农创业路的起点
- 洛谷——P1068 分数线划定
- Angular jasmine spyOn函数的实现原理
- 牛客练习赛26 D	xor序列 (线性基)
- 移动端页面不需要在meta加_移动端适配viewport缩放方案
- 浅析Kerberos原理,及其应用和管理
- 带可变参数的宏函数和普通函数实现
- 01c-1: 主流长远
- 忘记root密码,怎么办
- (8)Spring框架----面向切面编程(AOP)的那些基础知识
- Android开发Tips(5)
- Mysql出现 “ERROR 1062” 的解决方法
- 备份数据库、恢复数据库
- java8新特性学习笔记之唠唠“匿名内部类与lambda”
- 如何更简单的使用Polly
- 云效codeup使用
- 2006电子商务大盘点
- ATmega8/16/32/64/128中文参考手册
- python版权是哪个国家的品牌,panpuri是什么牌子?panpuri是哪个国家的?
热门文章
- 【全栈软件测试】二、Windows服务器(2-2)搭建web服务器(2-2-1)架设一个网站--使用四种方法
- Base64的编码与解码的实现方法(超详细,每一行代码都含注释)
- 阿里中台搞了3年,搞凉了?网传:副总裁玄难“背锅”,辞职创业!
- 太阳高度角与方位角计算
- Git Error---bad signature 0x00000000 index file corrupt
- vscode 程序员鼓励师_把软萌程序猿鼓励师装进VScode?最强交互彩虹屁,GitHub2.5k星标...
- 结合Zemax浅谈几何光学和信息光学中的成像,孔径光阑,视场光阑
- 初次软件开发(总结篇 之二)_-Chaz-_新浪博客
- flash debug版本
- BLE 配对流程梳理