網站制作中DIV+CSS的一個技巧

現在的網站設計是非常的重要的，如果能設計出一個成功的網頁那是非常不容易的。今天創新互聯就講一個現在在網站排版中必備的技巧。

隨著寬屏時代的到來，在現在的網頁設計當中，人們對于網頁排版有了更多的發揮空間。繼而隨之的是，往往我們現在所看到的許多網頁，都被錯落有致的劃為了兩列或者多列的布局，從而在視覺和操作上帶來不一樣的體驗。

對于初學者而言，當我們去要實現這些效果的時候，才晃然發現，DIV的默認樣式是只能獨占一行，而在這個時候，CSS樣式中float浮動屬性則給我們提供了解決方案。同樣隨之而來的另一個問題就是，由于現在今市場上瀏覽器種類繁多，各類瀏覽器的標準并沒有完全統一，也會出現當你使用了float浮動屬性之后，往往在兩種瀏覽器當中出現不一樣的展示效果。

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

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

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

2，給予每一個行內的DIV層都重新定義一個上級DIV，并對其定義明確的屬性。

3，就是檢查了刪除多余的清除浮動屬性代碼，特別是像在同一行中，當：頁面總寬度-原本排列層的總寬度≤單個層寬度的時候，那它后面所跟的清除浮動屬性則完全沒有意義，反而會帶來很大的麻煩。現在網站制作已經都用DIV+CSS來了，所以以上內容是很有利用價值的。

新聞名稱：網站制作中DIV+CSS的一個技巧
網頁地址：http://m.kartarina.com/news21/118721.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站制作等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯