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实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
用CSS3画一个爱心
Apr 27 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 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 a simple smtp class
2007/11/26 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
修复ie8&chrome下window的resize事件多次执行
2011/10/20 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
python re模块findall()函数实例解析
2018/01/19 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
Python如何将模块打包并发布
2020/08/30 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
投标承诺书怎么写
2014/05/24 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
公司委托书格式范文
2014/10/09 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
国庆阅兵观后感
2015/06/15 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
解决Python字典查找报Keyerror的问题
2021/05/26 Python
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js