如何優化這個CSS代碼？

-2

我是一個新手的CSS。我只是畫一個基本的HTML頁面下面的代碼：如何優化這個CSS代碼？

<html> 
    <head> 
    <title>Hey</title> 
    <link href="style.css" rel="stylesheet" type="text/css"> 
    </head> 
    <body> 
    <header class="top-menu"></header> 
    <div class="container"> 
     <div class="left-side"></div> 
     <div class="main-content"></div> 
    </div> 
    <div class="foot"></div> 
    </body> 
</html>

這裏是style.css中：

.top-menu{ 
    position: fixed; 
    top: 0; 
    left: 70px; 
    right: 70px; 
    height: 50px; 
    background-color: #000000; 
} 
.container{ 
    margin: 70px 70px 20px 70px; 
    display: inline-block; 
    width: 91%; 
} 

.left-side { 
    width: 30ex; 
    min-height: 30ex; 
    float: left; 
    background-color: blue; 
} 
.main-content { 
    width: 80ex; 
    float: right; 
    background-color: red; 
    min-height: 100ex; 
} 
.foot { 
    background-color: green; 
    height: 5ex; 
    width: 91%; 
    margin-left: 10ex; 
}

目的是straightforward.But的CSS看起來crap.even一些problems.I要問一些問題：

1.容器的左右邊距是70px，和top-menu一樣，但是從chrome頁面視圖來看，它爲什麼不對齊？

2.當我將'容器'的寬度設置爲100％（與腳部相同）時，爲什麼會出現水平滾動條？

3.如果我沒有將容器的顯示器設置爲「內嵌塊」，爲什麼腳部會飛到空中？（即使我將其設置爲「塊」）

4.Could你們給我一個更好的CSS樣式代碼？

來源

2012-12-28 LeoShi

我知道您更喜歡使用CSS3和最新的html標準，但<header>標籤尚未被許多瀏覽器供應商採用。我會偏離使用它。 IE9是第一個採用IE的IE，IE6/7上仍有大量用戶。

以<header>取出並替換爲正常的<div class="header">...</div>，然後使用css .header { }進行引用。

要回答＃2 - 您不能說明width: 100%;，然後添加左/右邊距，不期望水平滾動條。原則上，集裝箱將超過100％。

我不知道爲什麼要添加display: inline-block;到div容器。只有內聯元素應該有這個聲明（即文本元素）。有這樣的具體原因嗎？另外，當你第一次創建一個html模板並對其進行測試時，確保你總是將內容添加到div中，而不是簡單地將它們留空。添加min-height: ...不是一個傻瓜系統。我總是添加假文本 - 「你好你好」足夠了。

最後，添加相應的HTML文檔類型。也許你修剪它的問題部分，但這是XHTML或HTML？這與使用<header>進一步相關。並非所有的文檔類型都支持<header。

來源

2012-12-28 11:42:30 ProfileTwist

感謝您的建議。我剛剛從所有元素中獲得了所有最小高度的乘積。我必須陳述容器的原因是，如果我剛獲得顯示屬性的乘積，那麼腳部分將與容器部分重疊。有任何想法嗎？ – LeoShi

現在沒有那麼多人使用IE6/7了。 0.3＆IE6和1.2％IE7。大多數IE用戶使用IE8，但OP總是可以使用類似ie9.js的東西來強制與HTML5元素兼容。 – Kyle

謝天謝地，不超過0.3％使用IE6。我只是在暗示html5的採用需要時間，而在這個過渡時期，我們必須警惕某些html標籤「

」，它可能無法按預期工作。 – ProfileTwist

2.當我將'容器'的寬度設置爲100％（與腳部相同）時，爲什麼會出現水平滾動條？

因爲，您有餘量使總寬度超過100％。

來源

2012-12-28 11:44:58 ATOzTOA

謝謝老兄。是否意味着如果我想將容器部分與頂部菜單部分對齊，我必須將寬度設置爲一個幻數？ – LeoShi

不，您始終可以使用百分比，但請記住邊距/邊框始終會添加到元素的總寬度。只需將所有內容設置在98％之內。 – ATOzTOA

除了什麼已經說過，你試圖使用Chrome檢查，以解決問題的論文？只需在頁面上的鼠標，點擊右鍵並選擇Inspect Element。在那裏你可以啓用/禁用一些CSS屬性並快速找出錯誤。對於Firefox，相當於http://getfirebug.com/

至於你的佈局問題：不要擔心，當我們開始時，這對我們所有人都是一個真正的痛苦。如果你的觀點不是真正學習CSS，如果你只想讓這個工作一勞永逸，我的建議是：使用一個帶有網格的CSS框架。

CSS框架通常有一個很棒的功能，我們稱之爲「網格」。它將允許您在5分鐘內設置一個類似於您的佈局，並停止擔心此div如何在此瀏覽器中浮動。

加：這取決於你想使用的網站，但是通常當你使用一個網格，你做什麼都會被性感魔法看起來不那麼業餘。（如果你有一個設計師的背景，也許你已經知道這一點）

舉一個簡單的框架開始。每個人都有自己的喜愛，但我可以推薦BluePrint開始。這裏是它的grid system super powers的小規模示威;）

來源

2012-12-28 12:05:30 TKrugg

謝謝兄弟。我知道如何使用Twitter bootstrap和其他網絡系統。但我現在只想學習真正的CSS。 – LeoShi

如何優化這個CSS代碼？

回答

相關問題