大神勿噴,這是小弟自己學習的痕跡。
css3動畫效果核心**
1技術名詞1.height:auto 與 height: 100%@keyframes slideleft
5100% 8}
9@keyframes slidebottom
13100% 16}
17@keyframes zoomin
21100% 24}
25@keyframes rotate
29100%
32}
height:auto,是指根據塊內內容自動調節高度。
height:100%,是指其相對父塊高度而定義的高度,也就是按照離它最近且有定義高度的父層的高度來定義高度。
2. z-index (參考自
z-index是針對網頁顯示中的乙個特殊屬性。
因為顯示器是顯示的圖案是乙個二維平面,擁有x軸和y軸來表示位置屬性。
為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別。表示乙個元素在疊加順序上的上下立體關係。
z-index值 較大 的元素將疊加在z-index值 較小 的元素之上。
對於未指定此屬性的定位物件,z-index 值為正數的物件會在其之上,而 z-index 值為負數的物件在其之下。
★ 只對定位元素有效
z-index屬性適用於定位元素(position屬性值為 relative 或 absolute 或 fixed的物件),
用來確定定位元素在垂直於顯示屏方向(稱為z軸)上的層疊順序,也就是說如果元素是沒有定位的,對其設定的z-index會是無效的。
3.偽元素 ::after 和 ::before
::after是乙個css偽元素,使用::after,你可以從css裡往頁面上新增內容(不再要在html裡有相應的東西)。
雖然最終生成的東西並不是真正的dom裡的內容,但這些內容能像普通內容一樣顯示
::before跟::after完全類似,只是它插入的內容會出現在其它內容之前。
這兩者的區別可以簡單描述為:
想讓插入的內容出現在其它內容前,使用::before,否者,使用::after。
在**順序上,::after生成的內容也比::before生成的內容靠後。如果按堆疊視角,::after生成的內容會在::before生成的內容之上。
content的值可以為:
字串: content: "字串"; – 特殊字串需要轉義或unicode編碼。
:content: url(/path/to/image.jpg); – 會按原尺寸大小的插入,不能改變,因為漸變色實際上也是影象,所以,這些偽元素裡也可以使用漸變色。
空: content: ""; – 可以用於清除左右浮動元素,也能夠用於使用背景(這是可以設定高和寬,甚至使用background-size。)
計數器: content: counter(li); – 在列表時計算行數非常方便。
需要注意的是,你不能用它們插入html(至少這些html**會被轉義輸出)。content: "";
4.background-size: length | percentage | cover | contain;
一:length
該屬性值是設定背景影象的寬度和高度的,第乙個值是寬度,第二個值是設定高度的。如果只設定第乙個值,那麼第二個值會自動轉換為 「auto」;
二:percentage
該屬性是以父元素的百分比來設定的寬度和高度的,第乙個值是寬度,第二個值是高度。如果只設定乙個值,那麼第二個值會被設定為 「auto」;
把背景影象擴充套件至足夠大,以使背景影象完全覆蓋背景區域。
四:contain
把影象擴充套件至最大尺寸,以使寬度和高度 完全適應內容區域。
實際靜態效果圖如下(引自空中網)
函式式程式設計(3) 幻燈片
說明 1.本演示稿對函式式程式設計僅能起到 概念解釋 級別上的作用,可能連 入門 都算不上。如需學習函式式程式設計,可以選擇一門函式式程式語言進行全面學習 2.鑑於我們很少 幾乎沒有 接觸函式式程式設計,本演示稿中的 統一使用c 模仿 3.作者學習過f 但對其他函式式程式語言無了解。4.了解一種新的...
幻燈片製作之不同字型的使用
很久沒寫這個系列的文章了,最近一直在做pdf,對中文和英文排版時的字型進行了一些研究。字型的使用同樣可以應用於幻燈片的製作中,一款合適的字型能夠給你的幻燈片增色不少。中文部分 office2003的預設字型是宋體,所以我們常見的中文幻燈片中,大部分都是採用的宋體,但是宋體並不是最好的顯示字型,推薦使...
幻燈片製作是否需要使用漂亮的模板
幻燈片製作是否需要使用漂亮的模板 本文節選自 美哉!powerpoint 完美幻燈演示之路 itpub個人空間 jlf d1w 一書 在實際的演示文稿製作中,經常會收到這樣的要求 做得漂亮一些 但並非所有參與powerpoint文稿的製作者都是專業設計出身,為了這個 漂亮 開始大量蒐集散布於網路的各...