CSS3如何標(biāo)注引用的出處和來源

這篇文章將為大家詳細(xì)講解有關(guān)CSS3如何標(biāo)注引用的出處和來源，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

疫情呆家里都快發(fā)霉了，打開電腦動(dòng)動(dòng)大腦，今天給大家分享一篇關(guān)于CSS3標(biāo)注引用的出處和來源的方法。

新技術(shù)的出現(xiàn)往往意味著新的生產(chǎn)力的提高。隨著HTML5和CSS3的流行和普及，越來越多的新方法能讓我們簡潔又輕松的解決以前用很復(fù)雜的代碼才能完成的事情。比如HTML5中的download和placeholder，CSS3中的計(jì)算器和計(jì)數(shù)器，都使我們Web開發(fā)人員的工作量大大降低，因?yàn)檫@些功能的出現(xiàn)使我們省去了很多力氣。這里，我將給大家介紹一個(gè)運(yùn)用CSS3中的content和attr技術(shù)巧妙標(biāo)注語錄的作者或引言的出處的方法。

　　如果在文章中引用別人的話，或引用了某本書里的某段文章，應(yīng)該將人名或書名在引用后標(biāo)注出來，這不僅僅是出于禮貌，也屬于出于尊重。通常我們的做法是使用float:right，讓出處在引言的右下角出現(xiàn)。但CSS3中的content和attr技術(shù)讓我們能更巧妙的實(shí)現(xiàn)它。下面是CSS3實(shí)現(xiàn)的效果圖。

 　　HTML代碼

　　卻說三藏著妖精送出洞外，沙和尚近前問曰：“師父出來，師兄何在?”

　　八戒道：“他有算計(jì)，必定貼換師父出來也?！比赜檬种钢溃骸?/p>

　　你師兄在他肚里哩?！卑私湫Φ溃骸半缗K殺人!在肚里做甚?出來罷!”

　　行者在里邊叫道：“張開口，等我出來!”那怪真?zhèn)€把口張開。行者變

　　得小小的，瑀在咽喉之內(nèi)，正欲出來，又恐他無理來咬，即將鐵棒取出

　　，吹口仙氣，叫：“變!”

　　大家注意到blockquote元素上的cite屬性。我們沒有使用單獨(dú)的元素來顯示出處，而是利用了blockquote自身的屬性。這樣語法上更清晰簡單，語義上更有意義。

　　CSS代碼

　　下面我們需要使用一小段CSS讓cite屬性里的內(nèi)容顯示到合適的地方，這就需要用到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; 
 　　}

　　我們實(shí)際上使用了:after偽元素來顯示出處信息。沒有增加額外的網(wǎng)頁元素。使用絕對(duì)定位，將其定位到右下角，而且還有一定的層次感表現(xiàn)出來。非常的漂亮。

　　如果不是要求特別高，這種顯示引用的出處或來源的方法非常的有效。但也有不實(shí)用的地方，比如你需要在出書上加鏈接。這種用法在現(xiàn)代瀏覽器里都支持，包括火狐、谷歌瀏覽、蘋果瀏覽器，IE9是完全支持這種方法的。

關(guān)于“CSS3如何標(biāo)注引用的出處和來源”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。