CSS3如何標注引用的出處和來源-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、成都做網(wǎng)站、撫遠網(wǎng)絡(luò)推廣、成都小程序開發(fā)、撫遠網(wǎng)絡(luò)營銷、撫遠企業(yè)策劃、撫遠品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供撫遠建站搭建服務(wù)，24小時服務(wù)熱線：13518219792，官方網(wǎng)址：muchs.cn

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

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

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

 　　HTML代碼

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

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

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

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

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

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

大家注意到blockquote元素上的cite屬性。我們沒有使用單獨的元素來顯示出處，而是利用了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; 
 　　}

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

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

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

網(wǎng)頁標題：CSS3如何標注引用的出處和來源-創(chuàng)新互聯(lián)
URL鏈接：http://muchs.cn/article0/dejoio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、企業(yè)建站、網(wǎng)站制作、Google、服務(wù)器托管、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)