簡(jiǎn)單的單頁(yè)網(wǎng)站布局簡(jiǎn)約而不失創(chuàng)意，同時(shí)使用簡(jiǎn)單方便。div+css布局已經(jīng)成為當(dāng)前網(wǎng)頁(yè)布局的潮流，通過盒子模型和浮動(dòng)、定位來(lái)控制頁(yè)面布局比以前的表格布局容易控制多了。如何用dreamweaver實(shí)現(xiàn)div+css網(wǎng)頁(yè)布局呢。小編為你分享我的經(jīng)驗(yàn)。

網(wǎng)頁(yè)布局——新穎的網(wǎng)頁(yè)布局設(shè)計(jì)

beurre&sel

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

hackery,maths&design

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

thedrawingroom

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

welovenoise

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

css在網(wǎng)頁(yè)布局時(shí)好處與壞處比拼

一、使頁(yè)面載入得更快

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

二、降低流量費(fèi)用

頁(yè)面體積變小，瀏覽速度變快，這就使得對(duì)于某些控制主機(jī)流量的網(wǎng)站來(lái)說是最大的優(yōu)勢(shì)了。

三、修改設(shè)計(jì)時(shí)更有效率

由于使用了div+css制作方法，在修改頁(yè)面的時(shí)候更加容易省時(shí)。根據(jù)區(qū)域內(nèi)容標(biāo)記，到css里找到相應(yīng)的id，使得修改頁(yè)面的時(shí)候更加方便，也不會(huì)破壞頁(yè)面其他部分的布局樣式。

如何更有效、更合理的運(yùn)用web2.0設(shè)計(jì)標(biāo)準(zhǔn)，這需要很長(zhǎng)時(shí)間的學(xué)習(xí)和鍛煉。而如何將div+css運(yùn)用的更好，我覺得這需要通過不斷的實(shí)踐和體檢，積累豐富的設(shè)計(jì)經(jīng)驗(yàn)，才能很好的掌握這門技術(shù)。如果大家還想了解更多與之有關(guān)的信息，歡迎關(guān)注我們文軍營(yíng)銷的官網(wǎng)。

推薦閱讀

SEO之整站優(yōu)化 | 文軍營(yíng)銷先把自己放到瀏覽者的位置上,然后合理設(shè)計(jì)網(wǎng)頁(yè)布局。把重要的內(nèi)容放到頭部,起碼BAIDU是非常喜歡這樣認(rèn)為文字權(quán)重的。 網(wǎng)頁(yè)源代碼要堅(jiān)持精簡(jiǎn)原則,以少的代碼體現(xiàn)多內(nèi)容。避免網(wǎng)頁(yè)中大量采用圖片或者Flash等Rich Media形式,而沒有可以檢索的文本信息,搜索引擎雖然在進(jìn)步,但還有很多“讀不懂”的內(nèi)容,網(wǎng)絡(luò)的智能還是不能理解...網(wǎng)站改版是否有必要? | 文軍營(yíng)銷4. 代碼混亂,版式布局不合理或者有空缺,容易給人“爛尾樓”的印象。樹形扁平式的架構(gòu),p+CSS結(jié)構(gòu),簡(jiǎn)潔規(guī)范的url、簡(jiǎn)潔的代碼,沒有過深的table嵌套和過多不合理的js調(diào)用; 5. 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)對(duì)用戶體驗(yàn)效果極好; 6. 時(shí)尚因素在線客服、一鍵分享必須有; 7. 優(yōu)化與推廣能夠讓更多的用戶認(rèn)識(shí)你; 簡(jiǎn)言之,簡(jiǎn)潔自然的...