Question

我正在尝试为网站进行以下设计。我最后一次创建一个网站时，通常都是使用一堆表来对齐页面上的元素。我可以理解，这不是我们在2011年推出的方式，而是关于css的全部内容。我试图使用css实现以下设计，但我还没有成功。有人能指出我正确的方向吗？

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

修改

我忘了包含我到目前为止制作的CSS和HTML。（妻子通过购物订单分散了我的注意力。）很抱歉。我从来没有打算让任何人做我的工作，虽然我可以告诉某人已经已经完成了它。非常有帮助，谢谢！

我的问题是“float”属性/属性。虽然我可以通过剖析各种建议，告诉我们！important 这些重要的东西。

Answer 1

我认为没有人会给你完整的设计，这是一些繁重的工作。

您应该先看一下这个positioning tutorial。然后，如果你有一个确切的问题，请回到这里;）

Answer 2

要创建该布局并理解它，您最好尽快学习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;
}

等...

Answer 3

你从最大的开始，以最小的结尾，从顶部到底部，从而你应该理解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>

现在，格式化。 CSS可以做任何你喜欢的事情，有分区（DIV）。

<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 文件并根据自己的喜好进行调整。：）

Answer 4

使用CSS框架很容易设置这样的设计：

960网格系统：http://960.gs/
蓝图框架：http://www.blueprintcss.org/

Answer 5

这样的事情：

<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都是内联的。

Answer 6

简而言之：

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 }

在css中实现以下设计

6 个答案: