CSS3标注引用的出处和来源的方法


Posted in HTML / CSS onFebruary 25, 2020

疫情呆家里都快发霉了,打开电脑动动大脑,今天给大家分享一篇关于CSS3标注引用的出处和来源的方法。

新技术的出现往往意味着新的生产力的提高。随着HTML5和CSS3的流行和普及,越来越多的新方法能让我们简洁又轻松的解决以前用很复杂的代码才能完成的事情。比如HTML5中的download和placeholder,CSS3中的计算器和计数器,都使我们Web开发人员的工作量大大降低,因为这些功能的出现使我们省去了很多力气。这里,我将给大家介绍一个运用CSS3中的content和attr技术巧妙标注语录的作者或引言的出处的方法。

如果在文章中引用别人的话,或引用了某本书里的某段文章,应该将人名或书名在引用后标注出来,这不仅仅是出于礼貌,也属于出于尊重。通常我们的做法是使用float:right,让出处在引言的右下角出现。但CSS3中的content和attr技术让我们能更巧妙的实现它。下面是CSS3实现的效果图。

CSS3标注引用的出处和来源的方法

 

HTML代码

却说三藏着妖精送出洞外,沙和尚近前问曰:“师父出来,师兄何在?”

八戒道:“他有算计,必定贴换师父出来也。”三藏用手指着妖精道:“

你师兄在他肚里哩。”八戒笑道:“腌脏杀人!在肚里做甚?出来罢!”

行者在里边叫道:“张开口,等我出来!”那怪真个把口张开。行者变

得小小的,?在咽喉之内,正欲出来,又恐他无理来咬,即将铁棒取出

,吹口仙气,叫:“变!”

大家注意到blockquote元素上的cite属性。我们没有使用单独的元素来显示出处,而是利用了blockquote自身的属性。这样语法上更清晰简单,语义上更有意义。

CSS代码

下面我们需要使用一小段CSS让cite属性里的内容显示到合适的地方,这就需要用到CSS3中的content和attr:

blockquote[cite]:after { 
 
background-color: #666666; 
 

border: 1px solid #000000; 
 

color: #EEEEEE; 
 

content: attr(cite); 
 
display: block; 
 
font-size: smaller; 
 
font-style: normal; 
 
padding: 0 0.2em; 
     position: absolute; 
 
right: 0.5em; 
 
} 

我们实际上使用了:after伪元素来显示出处信息。没有增加额外的网页元素。使用绝对定位,将其定位到右下角,而且还有一定的层次感表现出来。非常的漂亮。

如果不是要求特别高,这种显示引用的出处或来源的方法非常的有效。但也有不实用的地方,比如你需要在出书上加链接。这种用法在现代浏览器里都支持,包括火狐、谷歌浏览、苹果浏览器,IE9是完全支持这种方法的。

总结

到此这篇关于CSS3标注引用的出处和来源的巧妙方法的文章就介绍到这了,更多相关css3 标注出处和来源内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 HTML / CSS
css样式important规则的正确使用方式
Jun 10 HTML / CSS
box-shadow单边阴影的实现
May 21 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 #HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 #HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 #HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 #HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 #HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 #HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 #HTML / CSS
You might like
php中explode与split的区别介绍
2012/10/03 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
python装饰器常见使用方法分析
2019/06/26 Python
Python实现自动签到脚本功能
2020/08/20 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
酒店副总岗位职责
2013/12/24 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
关于感恩的作文
2019/08/26 职场文书
配置nginx负载均衡
2022/05/06 Servers