在css中實現以下設計

我正在嘗試爲網站進行以下設計。我最後一次創建網站時，通常都是使用一堆表格來對齊網頁上的元素。我可以理解，這不是我們2011年推出的關於CSS的方式。我試圖用CSS來實現下面的設計，但是我沒有成功。有人能指引我正確的方向嗎？在css中實現以下設計

佈局位於：http://imageshack.us/photo/my-images/828/layoutcx.png/

編輯：

我忘了，包括到目前爲止，我已經產生了CSS和HTML。（這位妻子通過購物令我分心了。）對不起。我從來沒有打算讓任何人做我的工作，雖然我可以告訴有人已經完成了它。的確很有幫助，謝謝！

我的問題是與「浮動」屬性/屬性。雖然我可以通過解剖各種建議，告訴我有很多重要的東西，如！重要那真的是是重要。

來源

2011-05-05 kasperhj

看起來好像你要求我們爲你做你的佈局......如果你發佈一些你寫的代碼並要求提供具體的建議，它可能會更有效。 – sscirrus 2011-05-05 08:42:40

你從最大的開始，結束與最小的，從上面走，到下，作爲是的，你應該瞭解HTML。

我不會告訴你任何嚴重的技巧或CSS3最快的方式做的事情，你需要自己學習。

有了這樣的任務，就像你會寫一個文件一樣，起初，你寫一個內容，其次，你格式化它。

開始基本的HTML，沙繼續與框架的一些基本結構：

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>My layout</title> 
</head> 
<body> 
<div id="zones_theSite"> 
    <div id="zones_unb"><p>Universal navgiation bar</p></div> 
    <div id="zones_body"> 
     <div id="zones_header"><p>Header</p></div> 
     <div id="zones_fnnb"><p>Flashing news navigation bar</p></div> 
     <div id="zones_fn"><p>Flashing news</p></div> 
     <div id="zones_main"> 
      <div id="zones_lsb" class="column"><p>Left side bar</p></div> 
      <div id="zones_mp" class="column"><p>Main page</p></div> 
      <div id="zones_rsb" class="column"><p>Right side bar</p></div> 
      <div class="clearfix"></div> 
     </div> 
     <div id="zones_footer"><p>Footer</p></div> 
    </div> 
</div> 
</body> 
</html>

而現在，格式化。使用分區（DIV），CSS可以做任何你喜歡的事情。

<head> 
    <title>My layout</title> 
    <style type="text/css"> 
    body { 
     background-color: #616161; 
     margin: 0; 
    } 
    div { position: relative; } 
    p { 
     margin: 0; padding: 3px; 
     color: #FFF; 
     text-transform: uppercase; 
     font-family: Verdana, sans-serif; 
     font-weight: bold; 
    } 
    .clearfix { clear: both; } 
    #zones_unb { 
     width: 100%; 
     background-color: #000; 
     line-height: 2em; 
     text-align: center; 
    } 
    #zones_body { 
     width: 1000px; 
     margin: 0 auto; 
     background-color: #616161; 
    } 
    #zones_body div { 
     width: 100%; 
     text-align: center; 
    } 
    #zones_header { 
     height: 100px; 
     background-color: #E20000; 
    } 
    #zones_fnnb { 
     background-color: #0078FF; 
     line-height: 2em; 
    } 
    #zones_fn { 
     height: 80px; 
     background-color: #003ACE; 
    } 
    #zones_main p { 
     color: #000; 
    } 
    #zones_main { 
     width: 984px!important; 
     padding: 5px; 
     background-color: #FFF; 
     border: 3px solid #000; 
    } 
    #zones_main .column { 
     float: left; 
    } 
    #zones_lsb, #zones_rsb { 
     width: 200px!important; height: 300px; 
     border: 3px solid #000; 
     padding: 5px; 
    } 
    #zones_mp { 
     width: 552px!important; 
    } 
    #zones_footer { 
     height: 80px; 
     background-color: #3FCE00; 
    } 
    </style> 
</head>

現在，只需將第一個HTML代碼中的HEAD部分替換爲最後一個HEAD部分並完成。接下來，您應該將CSS單獨分配到單個.css文件並將其調整爲您的喜好。 :)

來源

2011-05-05 09:23:26 Deele

我想沒有人會給你完整的設計，這是一些繁重的工作。

你應該看看這個positioning tutorial開始。然後，如果你有確切的問題，再回到這裏;）

來源

2011-05-05 08:42:54 krtek

我同意。 [Floatutorial]（http://css.maxdesign.com.au/floatutorial/tutorial0916.htm）也是一個很好的例子。 – 2011-05-05 09:16:59

這樣的設計很容易使用安裝CSS框架：

960網格系統：http://960.gs/
藍圖框架：http://www.blueprintcss.org/

來源

2011-05-05 08:43:36

要創建該佈局並理解它，您最好儘快學習CSS，而不是要求某人爲您創建它。我建議：https://developer.mozilla.org/es/learn/css

爲右方向推 - 的HTML看起來像：

<div id="navBar"></div> 
<div id="middleBody"> 
    <div id="header"></div> 
    <div id="newsBar"></div> 
    <div id="flashingNews"></div> 
    <div id="mainPage"> 
    <div id="leftBar"></div> 
    <div id="rightBar"></div> 
    </div> 
    <div id="footer"></div> 
</div>

而CSS將類似於：

#navBar { 
    width:100%; 
    height:30px; 
} 

#middleBody { 
    margin:0 auto; /* This will centre the middle body */ 
} 

#header { 
    height:200px; 
}

等等

來源

2011-05-05 08:45:37 tinyBIGideas

類似這樣的：

<html> 
<head></head> 
<body> 
<div style="width:100%; height: 150px; background:#f00;">Header</div> 
<div style="width:100%; height: 20px; background:#00f;"">Nav</div> 
<div style="width:100%; height: 150px; background:#005;"">News</div> 
<div style="width:100%;"> 
    <div style="width:200px; float:left; height: 300px; border: 1px solid #000;">Left col</div> 
    <div style="width:200px; float:right; height: 300px;border: 1px solid #000">Right col</div> 
    Center text 
</div> 
<div style="width:100%; height: 150px; background:#0f0; clear: both;"">Footer</div> 
</body> 
</html>

這可以很好地再現你的佈局，並且所有的CSS都會被內聯。

來源

2011-05-05 08:46:08

我想給一個試圖學習的人提供一個內聯css的例子是最好的事情之一。你不應該使用內聯樣式。 – krtek 2011-05-05 09:22:18

好吧，我確實提到了css被內聯。此外，它還顯示了OP需要使用的一些樣式。我不同意「從不」使用。爲什麼？有時候內聯的css是必須的 - 要重載其他樣式或爲js提供初始值作爲2個示例。 – 2011-05-05 09:31:15

總是可以避免css內聯，你可以很容易地覆蓋樣式或提供一個CSS類的初始值。關於「永不」這是一場宗教戰爭，我不想從這裏開始;） – krtek 2011-05-05 09:34:31

很簡單的東西，如：

HTML：

<div id="universial-navigation"></div> 
<div id="wrapper"> 
    <div id="header"></div> 
    <div id="navigation-bar"></div> 
    <div id="flashing-news"></div> 
    <div id="main"> 
    <div id="left-sidebar"></div> 
    <div id="content"></div> 
    <div id="right-sidebar"></div> 
    </div> 
    <div id="footer"></div> 
</div>

CSS：

* { margin:0; padding:0 } 
#universial-navigation { width:100%; height:20px } 
#wrapper { width:960px; margin:0 auto } 
#header { width:960px; height:200px } 
#navigation-bar { width:960px; height:40px } 
#flashing-news { width:960px; height:150px } 
#main { width:960px; height:100px } 
#left-sidebar { position:relative; float:left; width:180px; overflow:hidden } 
#right-sidebar { position:relative; float:left; width:180px; overflow:hidden } 
#content { position:relative; float:left; width:600px; overflow:hidden } 
#footer { width:960px; height:100px }

來源

2011-05-05 08:48:12 bogatyrjov

嗯。首先我不會說這個代碼是錯的。但是重複css屬性都是一個糟糕的規則。 CSS是一團糟，但它總是試圖從父HTML選擇器繼承樣式，使用這個我們可以嘗試組織我們的樣式。 – 2011-05-05 09:14:27

永遠不要使用ID做樣式：http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ – krtek 2011-05-05 09:20:35

@Krtek：「永遠不會使用ID」是不好的建議。你應該聰明地使用混合的類和'id's的地方和時間是明智的使用每個。 – thirtydot 2011-05-05 09:36:13

在css中實現以下設計

回答

相關問題