簡單的單頁網站布局簡約而不失創意，同時使用簡單方便。div+css布局已經成為當前網頁布局的潮流，通過盒子模型和浮動、定位來控制頁面布局比以前的表格布局容易控制多了。如何用dreamweaver實現div+css網頁布局呢。小編為你分享我的經驗。

網頁布局——新穎的網頁布局設計

beurre&sel

這個網站實在漂亮。背景為自動播放的幻燈片，主導航欄位于頁面頂部。隨著鼠標向下滾動，導航欄會縮小但仍然固定在頁面頂部。在其下方是五彩繽紛的公司自產餅干清單，同時也是子菜單中的按鈕。隨便點擊一種口味的餅干，就會有相關信息覆蓋子菜單，以便用戶點擊瀏覽各種口味。頂部的導航欄和子菜單固定在頁面三欄網格內的中間一欄，可以保證用戶的注意力始終集中在中心位置。

hackery,maths&design

在頁面加載的同時，會有一個有趣的3d線性動畫填充屏幕。箭頭代表著動感與流暢，并可鼓勵用戶向下方內容滾動鼠標。下方的內容分布在三欄網格中，其中兩欄為主要內容，另有一個較小的側邊欄。但是這種布局并不會讓產生局限感，相反帶來比較開放的感覺，其原因是使用了寬敞的空間和圓角。這個網站的布局讓用戶感到非常舒服。

thedrawingroom

個人非常喜歡這個布局，簡單但又不失有趣。這家工作室將自己的作品以大小不同，相互堆砌的菱形展示于頁面之上。最中央的菱形為公司標志，表現并不突兀，不會分散對作品的注意力。把鼠標懸停在任意一個菱形上時，其中會顯示該作品的說明介紹。這個簡單的單頁網站布局簡約而不失創意，同時使用簡單方便。

welovenoise

lukefinch的作品集具有有趣且友善的布局。這一網站看似凌亂四散，但卻打破了過于簡潔沒有新意的局面。過渡效果可以讓你對其項目有所簡單了解，另外還可以使用箭頭進行導航。左上角的心形是整個網站的導航中心，其可在主頁上旋轉變成一個“i”。在瀏覽網站時，可以在心形上懸停鼠標退出。

css在網頁布局時好處與壞處比拼

一、使頁面載入得更快

由于將大部分頁面代碼寫在了css當中，使得頁面體積容量變得更小。相對于表格嵌套的方式，div+css將頁面獨立成更多的區域，在打開頁面的時候，逐層加載。而不像表格嵌套那樣將整個頁面圈在一個大表格里，使得加載速度很慢。

二、降低流量費用

頁面體積變小，瀏覽速度變快，這就使得對于某些控制主機流量的網站來說是最大的優勢了。

三、修改設計時更有效率

由于使用了div+css制作方法，在修改頁面的時候更加容易省時。根據區域內容標記，到css里找到相應的id，使得修改頁面的時候更加方便，也不會破壞頁面其他部分的布局樣式。

如何更有效、更合理的運用web2.0設計標準，這需要很長時間的學習和鍛煉。而如何將div+css運用的更好，我覺得這需要通過不斷的實踐和體檢，積累豐富的設計經驗，才能很好的掌握這門技術。如果大家還想了解更多與之有關的信息，歡迎關注我們文軍營銷的官網。

推薦閱讀