疫情呆家里都快发霉了,打开电脑动动大脑,今天给大家分享一篇关于CSS3标注引用的出处和来源的方法。
新技术的出现往往意味着新的生产力的提高。随着HTML5和CSS3的流行和普及,越来越多的新方法能让我们简洁又轻松的解决以前用很复杂的代码才能完成的事情。比如HTML5中的download和placeholder,CSS3中的计算器和计数器,都使我们Web开发人员的工作量大大降低,因为这些功能的出现使我们省去了很多力气。这里,我将给大家介绍一个运用CSS3中的content和attr技术巧妙标注语录的作者或引言的出处的方法。
如果在文章中引用别人的话,或引用了某本书里的某段文章,应该将人名或书名在引用后标注出来,这不仅仅是出于礼貌,也属于出于尊重。通常我们的做法是使用float:right,让出处在引言的右下角出现。但CSS3中的content和attr技术让我们能更巧妙的实现它。下面是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 标注出处和来源内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
至上一回分解完淘宝详情页( 点击查看 )后,再写了一篇关于商城基础模板装修首页...
一只小奶狗会有名字、品种以及一堆可爱的特点作为其属性。如果将其建模为一个类...
css-vars-ponyfill 通过css变量来实现网页换肤的过程中,会出现兼容性问题。 为...
大家都知道网页中必须要有图片,那么具体的该如何在网页设计中加入图片呢?下面...
前言 现在不管是桌面客户端还是移动客户端,都会夹杂着一部分H5页面,这种混合式...
CSS 是样式、布局和表示的领域。它充斥着颜色、大小和动画。但是你知道吗,它还...
qq空间有欢迎动画,想要给网页制作一个开场动画效果,该怎么制作呢?下面我们就...
企业内部H5微应用开发 分为 服务端API和前端API的开发,主要涉及到进入应用免登...
一、反常的SQL语句 某周四午休时分,我正在工位上小憩,睡梦中仿佛看到了自己拿...
默认uni-app打包出来的H5在Android上是没法播放.m3u8直播流的,控制台或报错 Unc...