建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)CSS3如何標(biāo)注引用的出處和來(lái)源，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、日土ssl等。為超過(guò)千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的日土網(wǎng)站制作公司
疫情呆家里都快發(fā)霉了，打開(kāi)電腦動(dòng)動(dòng)大腦，今天給大家分享一篇關(guān)于CSS3標(biāo)注引用的出處和來(lái)源的方法。
新技術(shù)的出現(xiàn)往往意味著新的生產(chǎn)力的提高。隨著HTML5和CSS3的流行和普及，越來(lái)越多的新方法能讓我們簡(jiǎn)潔又輕松的解決以前用很復(fù)雜的代碼才能完成的事情。比如HTML5中的download和placeholder，CSS3中的計(jì)算器和計(jì)數(shù)器，都使我們Web開(kāi)發(fā)人員的工作量大大降低，因?yàn)檫@些功能的出現(xiàn)使我們省去了很多力氣。這里，我將給大家介紹一個(gè)運(yùn)用CSS3中的content和attr技術(shù)巧妙標(biāo)注語(yǔ)錄的作者或引言的出處的方法。
如果在文章中引用別人的話，或引用了某本書(shū)里的某段文章，應(yīng)該將人名或書(shū)名在引用后標(biāo)注出來(lái)，這不僅僅是出于禮貌，也屬于出于尊重。通常我們的做法是使用float:right，讓出處在引言的右下角出現(xiàn)。但CSS3中的content和attr技術(shù)讓我們能更巧妙的實(shí)現(xiàn)它。下面是CSS3實(shí)現(xiàn)的效果圖。
HTML代碼
卻說(shuō)三藏著妖精送出洞外，沙和尚近前問(wèn)曰：“師父出來(lái)，師兄何在?”
八戒道：“他有算計(jì)，必定貼換師父出來(lái)也。”三藏用手指著妖精道：“
你師兄在他肚里哩。”八戒笑道：“腌臟殺人!在肚里做甚?出來(lái)罷!”
行者在里邊叫道：“張開(kāi)口，等我出來(lái)!”那怪真?zhèn)€把口張開(kāi)。行者變
得小小的，瑀在咽喉之內(nèi)，正欲出來(lái)，又恐他無(wú)理來(lái)咬，即將鐵棒取出
，吹口仙氣，叫：“變!”
大家注意到blockquote元素上的cite屬性。我們沒(méi)有使用單獨(dú)的元素來(lái)顯示出處，而是利用了blockquote自身的屬性。這樣語(yǔ)法上更清晰簡(jiǎn)單，語(yǔ)義上更有意義。
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偽元素來(lái)顯示出處信息。沒(méi)有增加額外的網(wǎng)頁(yè)元素。使用絕對(duì)定位，將其定位到右下角，而且還有一定的層次感表現(xiàn)出來(lái)。非常的漂亮。
如果不是要求特別高，這種顯示引用的出處或來(lái)源的方法非常的有效。但也有不實(shí)用的地方，比如你需要在出書(shū)上加鏈接。這種用法在現(xiàn)代瀏覽器里都支持，包括火狐、谷歌瀏覽、蘋(píng)果瀏覽器，IE9是完全支持這種方法的。
關(guān)于“CSS3如何標(biāo)注引用的出處和來(lái)源”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
本文名稱(chēng)：CSS3如何標(biāo)注引用的出處和來(lái)源
文章轉(zhuǎn)載：http://www.ef60e0e.cn/article/pgodii.html
