網(wǎng)頁(yè)HTML5、CSS3應(yīng)用教程分享

現(xiàn)在網(wǎng)頁(yè)的設(shè)計(jì)師可以使用HTML4和CSS2.1完成一些很酷的東西。我們可以在不使用陳舊的基于table布局的基礎(chǔ)上完成文檔邏輯結(jié)構(gòu)并創(chuàng)建內(nèi)容豐富的網(wǎng)站。我們可以在不使用內(nèi)聯(lián)和
標(biāo)簽的基礎(chǔ)上對(duì)網(wǎng)站添加漂亮而細(xì)膩的風(fēng)格樣式。事實(shí)上，我們目前的設(shè)計(jì)能力已經(jīng)讓我們遠(yuǎn)離了那個(gè)可怕的瀏覽器戰(zhàn)爭(zhēng)時(shí)代、專有協(xié)議和那些充滿閃動(dòng)、滾動(dòng)和閃爍的丑陋網(wǎng)頁(yè)。

進(jìn)入下載

App Builder 2019.40 免費(fèi)版
大�。�14.99 MB
日期：2019/9/18 13:29:50
環(huán)境：WinXP, Win7, Win8, Win10, WinAll

雖然我們現(xiàn)在已經(jīng)普遍使用了HTML4和CSS2.1，但是我們還可以做得更好！我們可以重組我們代碼的結(jié)構(gòu)并能讓我們的頁(yè)面代碼更富有語(yǔ)義化特性。我們可以縮減帶給頁(yè)面美麗外觀樣式代碼量并讓他們有更高的可擴(kuò)展性。現(xiàn)在，HTML5和CSS3正躍躍欲試的等待大家，下面讓我們來(lái)看看他們是否真的能讓我們的設(shè)計(jì)提升到下一個(gè)高度吧…

曾經(jīng)，設(shè)計(jì)師們經(jīng)常會(huì)跟頻繁使用基于table的沒(méi)有任何語(yǔ)義的布局。不過(guò)最終還是要感謝像Jeffrey Zeldman和EricMeyer這樣的思想革新者，聰明的設(shè)計(jì)師們慢慢的接受了相對(duì)更語(yǔ)義化的

布局替代了table布局，并且開(kāi)始調(diào)用外部樣式表。但不幸的是，復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)需要大量不同的標(biāo)簽結(jié)構(gòu)代碼，我們把它叫做“

-soup” 綜合癥。也許你很熟悉下面的代碼:

​

網(wǎng)頁(yè)HTML5、CSS3應(yīng)用教程分享圖一

Div Soup Demonstration

Posted on July 11th，2009

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Tags: HMTL，code，demo

Tangential Information

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Tags: HMTL，code，demo

[button value=\\\\\\\"復(fù)制代碼\\\\\\\"]

網(wǎng)頁(yè)HTML5、CSS3應(yīng)用教程分享圖二

盡管這有些勉強(qiáng)，但上面這個(gè)實(shí)例還是可以說(shuō)明使用HTML4對(duì)一個(gè)復(fù)雜的設(shè)計(jì)進(jìn)行代碼化后依然過(guò)于臃腫(其實(shí)xHTML1.1也不過(guò)如此)。不過(guò)值得激動(dòng)的是，HTML5解決“

-soup” 綜合癥并帶給我們一套新的結(jié)構(gòu)化元素。這些新的HTML5元素富有更細(xì)致的語(yǔ)義從而代替了那些毫無(wú)語(yǔ)義的

標(biāo)簽，并同時(shí)為CSS的調(diào)用提供了”自然”的CSS鉤子。

下面是HTML5的解決方案實(shí)例:

Div Soup Demonstration

Posted on July 11th，2009

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Tags: HMTL，code，demo

Tangential Information

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Tags: HMTL，code，demo

[/code][button value=\\\\\\\"復(fù)制代碼\\\\\\\"]

正如我們所見(jiàn)，HTML5可以讓我們用很多更語(yǔ)義化的結(jié)構(gòu)化代碼標(biāo)簽代替那些大量的無(wú)意義的

標(biāo)簽。這種語(yǔ)義化的特性不僅提升了我們網(wǎng)頁(yè)的質(zhì)量和語(yǔ)義，并且大量減少了曾經(jīng)代碼中用于CSS必須調(diào)用的class和id屬性。事實(shí)上，CSS3也是可以然通過(guò)我們忽略掉所有class和id的。

跟class屬性說(shuō)再見(jiàn)，歡迎整潔的標(biāo)簽

結(jié)合了富有新的語(yǔ)義化標(biāo)記的HTML5，CSS3為web設(shè)計(jì)師們的網(wǎng)頁(yè)提供了神一般的力量。有了HTML5的能量，我們將得到更多的對(duì)文檔代碼的控制權(quán)，有了CSS3的能量，我們的控制權(quán)將趨于無(wú)窮大！

即使沒(méi)有那些高級(jí)的CSS選擇器，我們?nèi)匀豢梢酝ㄟ^(guò)強(qiáng)大的HTML5條調(diào)用不同的容器而不勞駕class和id這類屬性。像以往的DIV布局，我們?cè)赾ss中可能要這樣調(diào)用:

div#news {}

div.section {}

div.article {}

div.header {}

div.content {}

div.footer {}

div.aside {}[button value=\\\\\\\"復(fù)制代碼\\\\\\\"]

123下一頁(yè)>

App Builder 2019.40 免費(fèi)版

• 軟件性質(zhì)：國(guó)產(chǎn)軟件
• 授權(quán)方式：免費(fèi)版
• 軟件語(yǔ)言：簡(jiǎn)體中文
• 軟件大�。�15354 KB
• 下載次數(shù)：142 次
• 更新時(shí)間：2019/9/18 15:29:56
• 運(yùn)行平臺(tái)：WinAll...
• 軟件描述：現(xiàn)在各大APP都非�；�，很多公司都想開(kāi)發(fā)屬于自己的APP，除了要有專業(yè)的APP開(kāi)... [立即下載]