CSS3如何標注引用的出處和來源

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

疫情呆家里都快發霉了，打開電腦動動大腦，今天給大家分享一篇關于CSS3標注引用的出處和來源的方法。

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

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

 　　HTML代碼

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

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

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

　　行者在里邊叫道：“張開口，等我出來!”那怪真個把口張開。行者變

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

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

　　大家注意到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如何標注引用的出處和來源”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。