在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中实现以下设计

回答

相关问题