網(wǎng)站制作中DIV+CSS的一個(gè)技巧

現(xiàn)在的網(wǎng)站設(shè)計(jì)是非常的重要的，如果能設(shè)計(jì)出一個(gè)成功的網(wǎng)頁(yè)那是非常不容易的。今天創(chuàng)新互聯(lián)就講一個(gè)現(xiàn)在在網(wǎng)站排版中必備的技巧。

隨著寬屏?xí)r代的到來(lái)，在現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中，人們對(duì)于網(wǎng)頁(yè)排版有了更多的發(fā)揮空間。繼而隨之的是，往往我們現(xiàn)在所看到的許多網(wǎng)頁(yè)，都被錯(cuò)落有致的劃為了兩列或者多列的布局，從而在視覺(jué)和操作上帶來(lái)不一樣的體驗(yàn)。

對(duì)于初學(xué)者而言，當(dāng)我們?nèi)ヒ獙?shí)現(xiàn)這些效果的時(shí)候，才晃然發(fā)現(xiàn)，DIV的默認(rèn)樣式是只能獨(dú)占一行，而在這個(gè)時(shí)候，CSS樣式中float浮動(dòng)屬性則給我們提供了解決方案。同樣隨之而來(lái)的另一個(gè)問(wèn)題就是，由于現(xiàn)在今市場(chǎng)上瀏覽器種類(lèi)繁多，各類(lèi)瀏覽器的標(biāo)準(zhǔn)并沒(méi)有完全統(tǒng)一，也會(huì)出現(xiàn)當(dāng)你使用了float浮動(dòng)屬性之后，往往在兩種瀏覽器當(dāng)中出現(xiàn)不一樣的展示效果。

在做現(xiàn)在的網(wǎng)站之前，筆者也曾做過(guò)幾個(gè)小站，就在這幾個(gè)小網(wǎng)站建設(shè)中，印象最為深刻的是一個(gè)純HTML的網(wǎng)頁(yè)站，而就在調(diào)試那個(gè)站的時(shí)候，發(fā)現(xiàn)一個(gè)特別讓人糾結(jié)的問(wèn)題，那就是在以IE和Chrom為核心的兩類(lèi)瀏覽器中出現(xiàn)網(wǎng)頁(yè)錯(cuò)位以及DIV元素不受控制。之前是四個(gè)同級(jí)的DIV層，二二分開(kāi)，排列上下兩行，之外在加上級(jí)DIV層包容，附加背景圖片的屬性。調(diào)試中發(fā)現(xiàn)，在Chrom瀏覽器中，四個(gè)同級(jí)層上面那一行居然沒(méi)有無(wú)法繼承上級(jí)DIV層的屬性，顯示背景圖片。經(jīng)過(guò)幾番檢查，代碼完全OK，沒(méi)有任何問(wèn)題和錯(cuò)誤，但不論如何修正，總會(huì)出現(xiàn)一方正常顯示，一方錯(cuò)位的情況，固然有人解釋說(shuō)兩都瀏覽器的核心和標(biāo)準(zhǔn)不一樣，但個(gè)人在技術(shù)上的一些失誤是完全不可能回避的。后來(lái)幾經(jīng)調(diào)試，終于發(fā)現(xiàn)，原來(lái)是清除浮動(dòng)的時(shí)候出了點(diǎn)兒小遺漏。

大家都知道，在使用了float浮動(dòng)屬性之后，要想后面的元素在下一行正常排列，必須要清除浮動(dòng)屬性。撇開(kāi)正常的流程來(lái)講，這一點(diǎn)也是完全無(wú)可厚非的。但是在初次float浮動(dòng)屬性的朋友來(lái)說(shuō)，會(huì)有一部分人直觀的認(rèn)為，只要是換行布局，那就必須得清除浮動(dòng)屬性。而這個(gè)結(jié)果也就往往導(dǎo)致一部份站長(zhǎng)朋友像這前所發(fā)生的這種情況，chrom錯(cuò)位，或者無(wú)法繼承上級(jí)DIV的屬性，但在檢查時(shí)，在邏輯上又找不出任何的問(wèn)題。而在這里，清除浮動(dòng)屬性的代碼添加的位置則直接影響到了DIV層的一些屬性。因此，在這種情況下，站長(zhǎng)朋友有三種解決辦法：

1，給予該DIV層或者直屬上層定義一些非常明確的屬性，比如寬、高、邊框大小、顏色等等。

2，給予每一個(gè)行內(nèi)的DIV層都重新定義一個(gè)上級(jí)DIV，并對(duì)其定義明確的屬性。

3，就是檢查了刪除多余的清除浮動(dòng)屬性代碼，特別是像在同一行中，當(dāng)：頁(yè)面總寬度-原本排列層的總寬度≤單個(gè)層寬度的時(shí)候，那它后面所跟的清除浮動(dòng)屬性則完全沒(méi)有意義，反而會(huì)帶來(lái)很大的麻煩?，F(xiàn)在網(wǎng)站制作已經(jīng)都用DIV+CSS來(lái)了，所以以上內(nèi)容是很有利用價(jià)值的。

新聞名稱(chēng)：網(wǎng)站制作中DIV+CSS的一個(gè)技巧
網(wǎng)頁(yè)地址：http://www.bm7419.com/news21/118721.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專(zhuān)注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司；服務(wù)項(xiàng)目有網(wǎng)站制作等

廣告

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