網站佈局問題和最佳實踐設計的主模板

頁眉部分全寬
內容區域中心與870px寬度與內容欄& Widget欄網站佈局時
用100％頁腳節
版權所有酒吧100％

樣品設計是在小提琴安裝http://jsfiddle.net/7zavu4f4/

由於某種原因頁腳部分沒有顯示出來，我想知道這個設計寺廟是否靈活，以調整不同高度的內容區域的內容。

這是一個很好的方式設計，或者我需要做任何更改，使其清潔。

<div class="header-wrapper"> 
    <div class="search-bar">Search control will be on right</div> 
    <div class="logo-Wrapper">Logo Will Be here</div> 
    <div id='cssmenu'> 
     <ul> 
      <li class='active'><a href='#'><span>Home</span></a> 

      </li> 
      <li><a href='#'><span>Products</span></a> 

      </li> 
      <li><a href='#'><span>Company</span></a> 

      </li> 
      <li class='last'><a href='#'><span>Contact</span></a> 

      </li> 
     </ul> 
    </div> 
</div> 
<div class="content-wrapper"> 
    <div class="content-bar"></div> 
    <div class="widget-bar"></div> 
</div> 
<div class="footer-wrapper"></div> 
<div class="copyright-wrapper"></div>

我不需要爲這個響應版本，因爲我們有這個網站基於移動的jQuery的一個單獨的移動版。所以，請只需要桌面版本考慮

來源

2014-09-10 Learning

請分享您的css代碼或小提琴演示。 – Anonymous 2014-09-10 10:43:44

哎呀錯過了那一個http://jsfiddle.net/7zavu4f4/ – Learning 2014-09-10 10:46:00

「出於某種原因頁腳部分沒有顯示」 - 因爲您的頁腳和版權div沒有高度（0px），我設置了5px頂部和底部填充演示 - http://jsfiddle.net/7zavu4f4/1/ – Anonymous 2014-09-10 10:49:54

你有測試你的設計出不同的瀏覽器和不同的屏幕尺寸？個人電腦和Mac電腦？ Android的？ iOS版？

而不是有一個特定的移動版本，它是好得多讓你的標準網站看起來不錯的所有屏幕尺寸。不是每個人都有一個寬度爲870px的瀏覽器窗口 - 您必須考慮頁面在1920x1080屏幕或1440x900屏幕上的顯示效果以及窄屏手機視口。有些需要考慮的因素可能是您是否希望在大屏幕上將主要內容放大並將小部件放在中央彩色內容區域之外。

如果你想提高你的標記（即HTML），看看在HTML5規範，特別是在語義標記，如<article>，<section>，<header>和<footer> - 這是語義上更適合使用那些元素比負載爲<div> s。在HTML5 Rocks有一個很好的html5資源列表。

來源

2014-09-10 10:59:35

** OP ** - 「我不需要一個響應版本，因爲我們有一個單獨的移動版本的基於Mobile jQuery的網站..**所以請只需要桌面版本考慮**」 :) – Anonymous 2014-09-10 11:01:46

，

和

@MaryMelody，我讀了，但人們不要使用手機調整他們的瀏覽器窗口。一個良好的設計應該能夠承受的。 – 2014-09-10 11:03:20

頁腳&版面部分沒有顯示出來，因爲頁面上方有一個浮動元素。所以他們實際上只是坐在所有的花車後面。

所以一個簡單的clear: both將帶出這兩個頁腳元素。請添加一些高度，例如height:10px或一些文字，以便您可以看到它們。

來源

2014-09-10 14:59:47 Red

網站佈局問題和最佳實踐設計的主模板

回答

相關問題