上下對照式布局網站有哪些

『壹』 室內設計網站都有哪些推薦

你好，我是設計間諜，希望我以下的回答能幫到你。

因為我經常能上網找到好的設計案例，所以同事才叫我設計間諜。下面分享我常去的案例好而多的9個室內設計網站：

1.

室內設計聯盟（主要有室內設計培訓,設計師交流,作品發布等版塊，案例很豐富）

2.

LOFT中國（分享國內外專業的LOFT風格辦公室設計、餐廳設計、建築改造）

3.

設計師在線（大師作品集網站，瀑布流布局，圖片像素很高，推薦電腦端瀏覽）

4.

設計本（很有名的室內設計網站，家裝，工裝案例都有，也有模型下載）

5.

馬蹄網（分類齊全，包含家裝、酒店、民宿、商業、辦公、會所、餐飲等）

6.

A963設計網（全球建築與室內設計師一站式服務傳媒平台，里邊有好多設計師，當然也有好多案例）

7.

新軟裝（軟裝配飾網站，素材庫不錯，分類很細也很全）

8.

時尚辦公網（廳氏專注於辦公空間的設計、裝修流行趨勢的相關信息服務）

9.

設計手祥王（最後分享一個台灣的網站，繁體字，里邊的案例大多是畢伏搏偏台灣日式風格的，我比較喜歡，所以常去找案例）

感謝大家的留言和補充，我再整理以下6條：

1.

拓者設計吧，設計案例，3d模型都很豐富

2.

houzz是國際室內設計排名第一的網站，但是英文界面，需配合翻譯軟體。

3.

達人室內設計網，全國室內設計師、軟裝設計師、裝修業主交流互動的平台，案例很豐富。

4.

室內設計師網，設計案例分類很全面，質量也很好。

5..cn

室內設計網，有案例，也有設計資訊，設計比賽活動。

6.因為答主的問題描述是室內設計案例網站，3D溜溜、建E網，歐模網，知末網，3D俠是以模型資源為主的，我統一附錄到最後這一條了。

『貳』 國內有哪些排版布局好看的網站

1、Pexels

國外的優質攝影社區網站，這里的照片都是網友上傳的，支持個人使用和商業使用。它是為數不多的支持中文搜索圖片網站，點擊右上角的…就能切換語言。

『叄』 網頁製作的結構布局有哪些

布局就是以最合適瀏覽的方式將圖片和文字排放在頁面的不同位置。不同的製作者會有不同的布局設計。網頁布局有以下幾種常見結構：

1.「同」字型結構布局

所謂同字型就夠就是指頁面頂部為「網站標志+廣告條+主菜單」或主菜單，下方左側為二級欄目條，右側為鏈接欄目條，屏幕中間顯示具體內容的布局。

這種布局的優點是充分利用版面，頁面結構清晰，左右堆成，主次分明，信息量大；缺點是頁面擁擠，太規矩呆板，如果細節色彩上缺少變化調劑，很容易讓人感到單調缺乏。

2.「國」字型布局

「國」字型布局是在「同」字型布局基礎上演化而來的，在保留「同」字型的同時，在頁面的下方增加一橫條狀的菜單或廣告，是一些大型網站所喜歡的類型。一般最上面是網站標題及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等。這種結構是在網上見到的最多的一種結構類型。

這種布局的優點是充分利用版面，信息量大，與其他頁面的鏈接切換方便，缺點是頁面擁擠，四面封閉，令人感到憋氣。

3.T型布局

這是一個形象的說法，是指頁面的頂部是「網站標志+廣告條」，左面是主菜單，右面是主要內容。這種布局的優點是頁面結構清晰、主次分明，是初學者最容易上手的布局方法；缺點是頁面呆板，如果不注意細節上的色彩，很容易讓人「看之無味」。

4.「三」字型布局

這種布局多用於國外站點，國內用得不多。特點是在頁面上有橫向兩條色塊，將頁面整體分割為但部分，色塊中大多放廣告條、更新和版權提示。

5.對比布局

顧名思義，這種布局採用左右或者上下對比的方式：一半深色，一半淺色。一般用於設計型站點。優點是視覺沖擊力強；缺點是將兩部分有機地結合比較困難。

6.POP布局

POP引自廣告術語，是指頁面布局像一張宣傳海報，一一張精美的圖片作為頁面的設計中心。這種類型基本上是出現在一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個「進入」的鏈接，甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種布局大部分出現在企業網站和個人主頁，如果處理得好的話，會給人帶來賞心悅目的感覺。

7.Flash布局

這種布局是指整個或大部分幅面的網頁本身就是一個Flash動畫，它本身就是動態的，畫面一般不叫絢麗、有趣，是一種比較新潮的布局方式。其實這與封面型結構是類似的，只是差畢橡這種類型才採用了目前非常流行的Flash，與封面型不同的是，由於Flash強大的功能，頁面所表達的信息更豐富，其視覺效果及聽覺效果如果處理得當，絕不差於虛旁傳統的多媒體。不同性質的網站，其頁面內容安排是不同的。一般網頁的基本內容包括標題、網站標識圖案（LOGO）、頁眉、頁腳、主體內容、廣告欄等。下面簡單說明：A、頁面標題在站點的沒一個頁面中都有一個標題，用來提示頁面的主要內容，著一信息將出現在瀏覽器的標題欄中，而不是在頁面的布局中。它的重要作用就是引導訪問者清楚地瀏覽網站的各項內容，不至於迷失方向。標題的加入在HTML語言中比較簡單B、網站標識（LOGO）網站作為一個對外交流的重要窗口，創建者都會用來進行自身形象的宣傳。如果該企業（社團）已經導入了CIS（CorporateIdentitySystem）形象識別系統，那麼在網站建設過程中應依據該系統為指導進行網頁設計，其中標志性圖案就是網站的LOGO。一個成功的網站和創建者實體一樣，有著獨特的形象識別，在網站推廣過程中將起到事半功倍的效果。如果還沒有導入CIS，在網站建設之前應該根據網站的總體定位，設計製作一個網站的LOGO，這如同一個產品的商標，集中體現了該網站的特色、內容及其內在的文化內涵和理念。LOGO一般設置在主頁面的顯要位置，二級頁面的頁眉位置。C、頁眉頁眉指的是頁面上端的部分，有的頁面劃分比較明顯，有的頁面沒有明確的區分或者沒有頁眉。頁眉的注意力值較高，大多數網站製作者在此設置網站宗旨、宣傳口號、廣告語等，有的則把它設計成廣告位出租。D、頁腳頁腳是頁面底端部分，通常用來顯示站點所屬公司（社團）的名稱、地址、版權信息、電子信箱的超連接等。E、導航導航是網頁設計中的重要部分,也是整個WEB站點設計中的一個獨立部分。一般來說，一個網站年的導航位置在每個頁面中出現的位置是固定的。導行的位置對數孝於站點的結構與整體布局有著舉足輕重的作用。導航的位置一般有四種標準的顯示位置：左側、右側、頂部和底部。有的站點運用了多種導航，是為了增加頁面的可訪問性。F、主體內容主體內容是頁面設計的主體元素。它一般是二級連接內容的標題，或者是內容提要，或者是內容的部分摘錄。表現手法一般是文字和圖象相結合。它的布局通常按內容的分類進行分欄安排。頁面的注意力值一般是按照從上到下、從左到右的順序排列，所以重要的內容一般安排在頁面的做上位置，次要的內容安排在右下方。原發布者:menwai2018

電子商務網站的主頁內容布局授課：花小琴常見的網頁布局結構國字型布局——國字型布局由同字型布局進化而來，因布局結構與漢字國相似而得名。其頁面的最上部分一般放置網站的標志和導航欄或Banner廣告，頁面中間主要放置網站的主要內容，最下部分一般放置網站的版權信息和聯系方式等。常見的網頁布局結構T型布局——T型布局結構因與英文大寫字母T相似而得名。其頁面的頂部一般放置橫網站的標志或Banner廣告，下方左側是導航欄菜單，下方右側則用於放置網頁正文等主要內容。常見的網頁布局結構標題正文型——標題正文型布局的布局結構一般用於顯示文章頁面、新聞頁面和一些注冊頁面等。常見的網頁布局結構左右框架型布局——左右框架型布局結構是一些大型論壇和企業經常使用的一種布局結構。其布局結構主要分為左右兩側的頁面。左側一般主要為導航欄鏈接，右側則放置網站的主要內容常見的網頁布局結構上下框架型——上下框架型布局與前面的左右框架型布局類似。其區別僅在於是一種上下分為兩頁的框架。常見的網頁布局結構綜合框架型——綜合框架型布局是結合左右框架型布局和上下框架型布局的頁面布局技術常見的網頁布局結構POP布局——POP布局是一種頗具藝術感和時尚感的網頁布局方式。頁面設計通常以一張精美的海報畫面為布局的主體。常見的網頁布局結構FLASH布局——FLASH布局是指網頁頁面以一個或多個Flash作為頁面主體的學習前端第一步：劃分網頁結構，網頁的結構的劃分應該遵循哪些原則，如何去劃分網頁的結構呢？

對於一個前端初學者，第一步就是要學會如何劃分一個網頁的結構。當設計師給到你一張設計圖，你需要根據這張圖做出一個符合標準的頁面，這里所說的標准，即w3c標准，參考w3school在線教程。那麼做出一個完整的符合標準的網頁第一步就是要劃分網頁的結構。一般來講，網頁結構的劃分需要遵循幾個原則：

一、自上而下原則

因為瀏覽器在渲染一個網頁的順序是自上而下的。這里提到了渲染這一個詞，所謂的渲染就是瀏覽器將代碼轉換為頁面顯示內容的過程。瀏覽器會自上而下讀取你寫的代碼並自上而下的顯示。

二、從左至右原則

在自上而下的同時，同一行的內容是從左至右渲染，所以在劃分結構的時候有從左至右的順序。

三、一像素原則

這個原則對於初學者來說必須堅持，但也並不是說無論什麼時候都得死認這個道理。前期我們在劃分網頁的時候一定要劃分准確，尤其是橫向。試想，如果外面的盒子寬度是1200像素，裡面兩個盒子一個600像素另一個601像素，加起來超過了父級的寬度那麼必然第二個盒子會換到下一行進行顯示。

在說完上述三個原則過後有些人就會一味地追求遵循這些原則，比如在劃分結構的時候一定要分為上下部分，但是比如下面我截取這個網頁的一部分，圖片和文字其實是屬於一個整體，文字是對圖片的說明，所以就不應該分為上下，而應該水平方向劃分，每一個圖文作為一部分內容，水平分為四部分：

我們說一般網頁有header（頭部區）、banner（廣告橫幅區）、main（主體內容區）、footer（底部區），單頁並非所有網頁都是這樣，有些網頁沒有banner但是初學者容易將header下面那一部分硬劃分為banner，有些網頁除了這幾部分還會有比如icon等區域由喜歡將他們劃分到main中去。

說到main區，這個結構劃分就多種多樣了。有些網頁是有一個從左到右通欄的背景色甚至背景圖片，這樣我們結構的劃分也應該有外層一個通欄的盒子，將背景色或者背景圖給他，裡面再嵌套一個inner盒，給可視區域的固定寬度並居中。如果沒有通欄的背景那麼這個時候是不需要給通欄的盒子，直接main區給固定寬度居中就好了。

那麼在結構劃分的時候有些盒子區域之間的空隙怎麼去劃分這也是初學者最容易犯難的問題。其實嚴格意義來講這些空白在結構劃分的時候並不會造成影響，因為空白區域在都可以用代碼來實現。不過一些文字區域你不能貼著文字的上下來劃分，因為文字都是自帶行高的。

另外，有些地方可能會有一部分小圖片或者一部分內容覆蓋在外面大盒子上，這部分在劃分結構的時候可以不用管，因為後期在代碼實現的時候我們可以利用定位技術實現。