div+css简单作品

最新推荐文章于 2022-01-21 00:12:56 发布

woshigening

最新推荐文章于 2022-01-21 00:12:56 发布

阅读量604

点赞数

文章标签： div css class float header menu

本文链接：https://blog.csdn.net/woshigening/article/details/5838303

版权

div+css简单布局代码如下：

其中遇到了一点问题希望高手能点拨一下。

灰色的模块right_main我想漂浮到右边但是代码写完了却不能实现高手告诉我一下这是为什么？谢谢了

<html>
<head>
<title>网页布局</title>
<style>
<!--
body{
  margin:0px;
  text-align:center;
  background:grey;
}
#container{
  width:500px;
  height:700px;
  background:#fe7856;
  margin:auto 0px;
}
#header{
  float:left;
  width:800px;
  height:100px;
  margin:auto 0px;
  clear:both;
  background:red;
}
#logo{
  float:left;
  width:250px;
  height:90px;
  background:green;
  clear:right;
  margin:0px;
}
#banner{
  float:right;
  width:540px;
  height:90px;
  margin:0px;
  clear:left;
  background:#ff11f2;
}
#menu{
  width:800px;
  height:35px;
  margin:auto 0px;
  clear:both;
  background:#4460ff
}
.nav{
  width:800px;
  height:10px;
  clear:both;
  background:white;
  line-height:10px;
}
.left_main{
  float:left;
  width:610px;
  height:410px;
  background:red;
  clear:right;
  margin:0px;
}
.right_main{
  float:right;
  width:180px;
  height:410px;
  margin:0px;
  clear:left;
  background:#aabbcc;
}
.left_a{
  margin:0px;
  float:left;
  width:300px;
  height:200px;
  background:blue;
}
.left_b{
  margin:0px;
  float:right;
  width:300px;
  height:200px;
  background:blue;
}
.nav_a{
  width:610px;
  height:10px;
  clear:both;
  background:white;
  line-height:10px;
}
.con {
  margin:auto 0px;
   width:800px;
   height:200px;
  background:green;
  clear:both;

}
.one{
  margin:5px;
  clear:right;
  float:left;
  width:190px;
  height:240px;
  background:#ccffaa;
}
.two{
  margin:5px;
  float:left;
  width:190px;
  height:240px;
  background:#cddfaa;

}
#footer {
  width:800px;
  height:100px;
  background:red;
  margin:auto 0px;
  padding-top: 30px;
  color: #ffffff;
}
//-->

</style>

</head>

<body>
<div id="container">
<div id="header">
  <div id="logo">
  logo
  </div>
  <div id="banner">
  banner
  </div>
</div>
<div id="menu">
main
</div>
<div class="nav">
nav
</div>
<div class="left_main">
  <div class="left_a">
  </div>
  <div class="left_b">
  </div>
  <div class="nav_a">
  nav
  </div>
  <div class="left_a">
  </div>
  <div class="left_b">
  </div>
</div>
<div class="right_main">
</div>
<div class="nav">
nav
</div>
<div class="con">
  <div class="one"></div>