成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

content 內(nèi)容生成技術(shù)1

tinysun1234 / 1645人閱讀

摘要：最近在看張鑫旭的世界看了這個書感覺打開了世界的大門建議前端工程師人手一本針對字符內(nèi)容生成這一技術(shù)用的最多的應(yīng)該就是配合實(shí)現(xiàn)字體圖標(biāo)了吧因?yàn)榫瓦\(yùn)用了這一技術(shù)進(jìn)入之后默認(rèn)是點(diǎn)擊紅線里面就是連接了可以直接打開看到源碼與上面所寫無二在

最近在看張鑫旭的《css世界》, 看了這個書感覺打開了css世界的大門. 建議前端工程師人手一本

針對content 字符內(nèi)容生成 這一技術(shù)用的最多的應(yīng)該就是配合@font-face實(shí)現(xiàn)字體圖標(biāo)了吧. 因?yàn)閔ttp://www.iconfont.cn 就運(yùn)用了這一技術(shù)

@font-face {
  font-family: "iconfont";  /* project id 243181 */
  src: url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.eot");
  src: url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.eot?#iefix") format("embedded-opentype"),
  url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.woff") format("woff"),
  url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.ttf") format("truetype"),
  url("http://at.alicdn.com/t/font_243181_20ev5oif1gduz0k9.svg#iconfont") format("svg");
}
.icon-search:before {
  font-size: 24px; font-family: iconfont; content: "e657"; color: #000;
}

進(jìn)入iconfont之后默認(rèn)是Unicode 點(diǎn)擊Font class 紅線里面就是連接了, 可以直接打開看到源碼. 與上面所寫無二.

在上面:before中content中的字符是Unicode, 由此延伸出下一個功能 動態(tài)加載頁面內(nèi)容的時候時常用到"正在加載中..."這幾個字, 可以利用這一技術(shù)實(shí)現(xiàn)動態(tài)...

html
正在加載中...

css
dot {
    display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden;
}
dot {
    display: block; content: "...a..a."; white-space: pre-wrap; animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em) }
    66% { transform: translateY(-1em) }
}

效果可以查看張鑫旭博客查看, ie6~ie9是靜態(tài)的, 支持animation動畫的瀏覽器都是動態(tài)的.
動畫原理為: 插入3行內(nèi)容是 3個點(diǎn)、2個點(diǎn)和一個點(diǎn), 然后通過transform控制垂直位置.
這里需要注意的有這么幾點(diǎn)

元素

為什么是::before, 而不是:before, 可不可以使用::after

從content屬性來看, 是3個點(diǎn)在第一行, 而1個點(diǎn)反而在最后一行, 為什么這么處理

這里white-space值為何是pre-wrap 而不是pre

對這幾個答案一一做回答:

是自定義的一個標(biāo)簽元素, 除了簡約、語義化明顯外, 更重要的是方便向下兼容, ie8等低版本瀏覽器不認(rèn)識自定義的HTML標(biāo)簽, 就會顯示默認(rèn)的3個點(diǎn), 且對css代碼忽略.

:before是偽類, ::before則為偽元素. 偽元素使用::before 同時display設(shè)置為block, 是為了在現(xiàn)代瀏覽器下把原來的3個點(diǎn)推到最下面, 不會影響content的3行內(nèi)容顯示, 如果使用::after就很難實(shí)現(xiàn)效果

3個點(diǎn)在第一行是為了兼容ie9, 應(yīng)為ie9認(rèn)識以及::before, 但是不支持animation, 所以 為了ie9才把3個點(diǎn)放在第一行.

pre-wrap換成pre效果一樣.

content開啟閉合符號生成
CSS中有個quotes屬性, 可以指定open-quote和close-quote字符具體是什么. 例如, 針對不同語言指定不同的前后符號:

css世界是一本好書


css世界是一本好書


css世界是一本好書

/* 為不同語言指定引號 */
:lang(ch) > q { quotes: """ """; }
:lang(en) > q { quotes: """ """; }
:lang(no) > q { quotes: "<" ">"; }

/* 在q標(biāo)簽的前后插入引號 */
q:before { content: open-quote; }
q:after { content: close-quote; }


在此基礎(chǔ)上演變更多好玩的:

.ask {
    quotes: "提問: "" """;
}
.answer {
    quotes: "回答: "" """;
}
.ask:before,
.answer:before {
    content: open-quote;
}
.ask:after,
.answer:after {
    content: close-quote;
}


你問我愛你有多深?


月亮代表我的心

content attr屬性值內(nèi)容生成
這個功能比較常用, 作者常用, 我也很常用.

img::after {
    /* 生成alt信息 */
    content: attr(alt); 
}

除了原生屬性, 自定義的HTML屬性也是可以的

.icon:before {
    content: attr(data-title);
}

需要注意的是, attribute中的屬性名不要加引號!

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116701.html

相關(guān)文章

  • content 內(nèi)容生成技術(shù)2

    摘要：計數(shù)器效果可是說是的重中之重此功能非常強(qiáng)大實(shí)用且不具有可替代性甚至可以實(shí)現(xiàn)連都不好實(shí)現(xiàn)的效果這個地方放慢節(jié)奏細(xì)細(xì)品味先來個例子體驗(yàn)一下計數(shù)器第一個第二個第三個所謂計數(shù)器效果指的是使用代碼實(shí)現(xiàn)隨著元素數(shù)目增多數(shù)值也跟著變大的效果圖中紅色阿 計數(shù)器效果可是說是content的重中之重, 此功能非常強(qiáng)大、實(shí)用, 且不具有可替代性, 甚至可以實(shí)現(xiàn)連js都不好實(shí)現(xiàn)的效果. 這個地方放慢節(jié)奏, 細(xì)...

    wow_worktile 評論0 收藏0

  • 手把手教你如何用Crawlab構(gòu)建技術(shù)文章聚合平臺(二)

    摘要：上一篇文章手把手教你如何用構(gòu)建技術(shù)文章聚合平臺一介紹了如何使用搭建的運(yùn)行環(huán)境，并且將與集成，對掘金進(jìn)行技術(shù)文章的抓取，最后可以查看抓取結(jié)果。本篇文章將繼續(xù)講解如何利用編寫一個精簡的聚合平臺，將抓取好的文章內(nèi)容展示出來。 上一篇文章《手把手教你如何用Crawlab構(gòu)建技術(shù)文章聚合平臺(一)》介紹了如何使用搭建Crawlab的運(yùn)行環(huán)境，并且將Puppeteer與Crawlab集成，對掘金、...

    zhunjiee 評論0 收藏0

  • Repractise架構(gòu)篇一: CMS的重構(gòu)與演進(jìn)

    摘要：重構(gòu)系統(tǒng)是一項(xiàng)非常具有挑戰(zhàn)性的事情。架構(gòu)與說起來，我一直是一個黨。如下圖是采用的架構(gòu)這與我們在項(xiàng)目上的系統(tǒng)架構(gòu)目前相似。而這是大部分所不支持的。允許內(nèi)容通過內(nèi)容服務(wù)更新使用于是，有了一個名為的框架用于管理內(nèi)容，并存儲為。 重構(gòu)系統(tǒng)是一項(xiàng)非常具有挑戰(zhàn)性的事情。通常來說，在我們的系統(tǒng)是第二個系統(tǒng)的時候才需要重構(gòu)，即這個系統(tǒng)本身已經(jīng)很臃腫。我們花費(fèi)了太量的時間在代碼間的邏輯，開發(fā)新的功能變得...

    William_Sang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<