在css中实现以下设计_Css - Fatal编程技术网

在css中实现以下设计

css

在css中实现以下设计,css,Css,我正在尝试为一个网站做以下设计。上次我创建网站时，通常都是使用一堆表格来对齐页面上的元素。我可以理解，这不是我们在2011年的表现，在2011年，这一切都是关于css的。我曾尝试使用css实现以下设计，但没有成功。有人能给我指出正确的方向吗布局位于此处：编辑：我忘了包括我到目前为止制作的CSS和HTML。（妻子为购物单分散了我的注意力。）对不起。我从来没有打算让任何人来做我的工作，尽管我可以说有人已经做了。非常有帮助，谢谢我的问题是“float”属性/属性。虽然我可以，通过剖析各

我正在尝试为一个网站做以下设计。上次我创建网站时，通常都是使用一堆表格来对齐页面上的元素。我可以理解，这不是我们在2011年的表现，在2011年，这一切都是关于css的。我曾尝试使用css实现以下设计，但没有成功。有人能给我指出正确的方向吗

布局位于此处：

编辑：

我忘了包括我到目前为止制作的CSS和HTML。（妻子为购物单分散了我的注意力。）对不起。我从来没有打算让任何人来做我的工作，尽管我可以说有人已经做了。非常有帮助，谢谢

我的问题是“float”属性/属性。

虽然我可以，通过剖析各种建议，告诉你们有这样的事情！重要的是，这真的很重要。

我想没有人会给你完整的设计，这是一项繁重的工作

你应该先看看这个。然后，如果你有一个确切的问题，回到这里；）

我想没有人会给你完整的设计，这是一项繁重的工作

你应该先看看这个。然后，如果你有一个确切的问题，回到这里；）

使用CSS框架可以轻松设置此类设计：

960网格系统：
蓝图框架：

使用CSS框架可以轻松设置此类设计：

960网格系统：
蓝图框架：

<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>

<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>

<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>


标题
新闻
左列
右柱
中心文本
大概是这样的：
<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>


标题
新闻
左列
右柱
中心文本
简单地说是这样的：
<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>

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>

HTML:
你们从最大的开始，以最小的结束，从上到下，这就是你们应该理解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可以用divisions（DIV）做任何你喜欢的事情

我的布局
身体{
背景色：#6161；
保证金：0；
}
div{位置：相对；}
p{
边距：0；填充：3倍；
颜色：#FFF；
文本转换：大写；
字体系列：Verdana，无衬线；
字体大小：粗体；
}
.clearfix{clear:两者；}
#区域(unb){
宽度：100%；
背景色：#000；
线高：2米；
文本对齐：居中；
}
#带体{
宽度：1000px；
保证金：0自动；
背景色：#6161；
}
#身体分区{
宽度：100%；
文本对齐：居中；
}
#分区头{
高度：100px；
背景色：#E20000；
}
#区域(fnnb){
背景色：#0078FF；
线高：2米；
}
#区域(fn){
高度：80px；
背景色：#003ACE；
}
#主楼{
颜色：#000；
}
#主区{
宽度：984px！重要；
填充物：5px；
背景色：#FFF；
边框：3倍实心#000；
}
#主栏{
浮动：左；
}
#区域lsb，#区域rsb{
宽度：200px！重要；高度：300px；
边框：3倍实心#000；
填充物：5px；
}
#区域{
宽度：552px！重要；
}
#页脚{
高度：80px；
背景色：#3FCE00；
}

现在，只需在第一个HTML代码中将最后一个头部替换为头部即可。接下来，您应该将CSS分离为单个.CSS文件，并根据自己的喜好进行调整。：）
 从最大的开始，以最小的结束，从上到下，就是这样，你应该理解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可以用divisions（DIV）做任何你喜欢的事情

我的布局
身体{
背景色：#6161；
保证金：0；
}
div{位置：相对；}
p{
边距：0；填充：3倍；
颜色：#FFF；
文本转换：大写；
字体系列：Verdana，无衬线；
字体大小：粗体；
}
.clearfix{clear:两者；}
#区域(unb){
宽度：100%；
背景公司