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样式linear-gradient的使用实例
Jan 16 HTML / CSS
CSS3制作日历实现代码
Jan 21 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 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
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
PHP中的日期及时间
2006/11/23 PHP
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
CI框架常用方法小结
2016/05/17 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
js module大战
2019/04/19 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
基于python实现对文件进行切分行
2020/04/26 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
技术岗位竞聘演讲稿
2014/05/16 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
Redis高并发缓存架构性能优化
2022/05/15 Redis