網站不管是pc端還是wap端都是講究層次結構和排版布局的，這個是為用戶方便瀏覽體驗的重要操作。在網站制作過程中有兩大點是一定要注意的，第一是頁面混亂，主次不清，所有東西都引人注目；第二是背景干擾用戶瀏覽。這個是直接干擾用戶查看網站的視覺，在用戶受到這方面的影響一定大大增高了網站跳出率。網站建設★網站設計★網站制作★網頁設計-800元全包;企業網絡推廣☆網站優化☆seo☆關鍵詞排名☆百度快照-2200元全年展示;做網站優化排名-網站建設公司

創新互聯建站是一家集網站建設,烏審企業網站建設,烏審品牌網站建設,網站定制,烏審網站建設報價,網絡營銷,網絡優化,烏審網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

pc端排版布局

1.把頁面分割成清晰明確的不同區域，因為可以使用戶迅速判斷出哪些區域是重點，哪些模塊內容不是用戶需求。

例如：站點版塊不清晰不明確，對用戶瀏覽體驗大大降低。

2.創建清晰直觀的頁面層次結構；越重要越要突出；邏輯相關的內容視覺上也應該相關。

例如：頁面層次結構不清晰，相當于頁面邏輯不通順，不符合要求。

3.用嵌套的方式形象地顯示從屬關系。

例如：站點層級嵌套混亂，讓用戶找不到對應信息，不符合要求。

pc端布局代碼運用：

1、table布局：通過table元素將頁面空間劃分成若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框，從而實現布局。這種布局方式也叫傳統布局，目前主要使用在EDM(廣告郵件中的頁面)中，主流的布局方式不用這種。

2、HTML+CSS布局(DIV+CSS)：主要通過CSS樣式設置來布局文字或圖片等元素，需要用到CSS盒子模型、盒子類型、CSS浮動、CSS定位、CSS背景圖定位等知識來布局，它比傳統布局要復雜，目前是主流的布局方式。

table布局和HTML+CSS布局(DIV+CSS)優缺點：

table表格布局：

優點：布局容易、快捷、兼容性好。

缺點：改動不便，需重新調整，工作量大。

DIV+CSS：

優點：布局靈活、改動方便。

缺點：需考慮平臺的兼容性，對制作人員技能要求較高。

移動/wap端排版布局

1.頁面應注意排版精良，段落分明，合理使用不同字號區分頁面的主次信息，圖片、視頻等多媒體資源的位置及尺寸選擇配合頁面整體布局，保證頁面整體的美觀度和用戶瀏覽頁面信息的最佳可讀性。

例如：站點頁面排版差、段落距離不合理影響用戶閱讀

2.首屏主體內容必須占屏幕的50%以上。并且主體內容應位于手機屏幕的中心位置。

例如：首屏主體內容小于50%，廣告等其他內容過多，不符合要求

3.展開全文功能：展開全文的設置必須具有文字標示，且功能實際可用；展開全文功能最多只能出現一次，但不可出現在落地頁的首屏內容中（列表頁除外）；展開全文與廣告等引導性內容要設置一定距離間隔，避免干擾用戶操作。

例如：展開功能無文字標示，且與APP調起按鈕距離過近，不符合要求

例如：小程序展開全文按鈕出現在首屏，不符合要求

4.主體內容應與廣告、相關推薦等次要內容板塊之間有明顯間隔距離或分割線，使用戶獲取信息時不受任何干擾。

例如：翻頁功能鍵與廣告之間無間距，易引發用戶誤點擊，不符合要求

例如：小程序主體內容與廣告之間距離過近，不符合要求

5.頁面的導航的功能與位置明確，避免用戶使用過程中被誤導。

例如：點擊服務導航按鈕，小程序未跳轉到對應頁面，不符合要求

pc端布局運用：

1、全適配：響應式布局+流體布局

2、移動端適配：流體布局+少量響應式、基于rem的布局。

注意：留白，這是網站都要考慮的問題。網頁要有留白的作用，使整個內容排布得松緊有度，利用留白使頁面布局平衡，可以提高網頁的視覺效果和藝術感染力。減少頁面的干擾；使有用的內容更突出；使頁面篇幅較短，無需滾屏。

網站標題：網站pc/wap端排版結構要求及網頁布局方式
文章轉載：http://m.newbst.com/article18/dghspdp.html

成都網站建設公司_創新互聯，為您提供App開發、網站設計、標簽優化、網站策劃、品牌網站制作、面包屑導航

廣告

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