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 弹性布局快速入门
Jun 06 HTML / CSS
CSS3教程:边框属性border的极致应用
Apr 02 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 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 和 COM
2006/10/09 PHP
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
python挖矿算力测试程序详解
2019/07/03 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
给领导的致歉信范文
2014/01/13 职场文书
新郎婚礼致辞
2015/07/27 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
python 学习GCN图卷积神经网络
2022/05/11 Python