div+css大神来,看看这个页面怎么布局,求简单的div布局,小弟从来没见过这种布局,不会写,在线等
可以按照正常的格式去写
将右下角那个较长的div用定位去做就可以了
其他按照正常布局就行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sliding Image Panels with CSS3</title>
<style type="text/css">
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td a {
margin: 0;
padding: 0;
}
#container {width: 1000px;margin: 0 auto;}
#header{height:60px;background-color:#AAACCC;}
#main{margin-top:10px;}
#content{height:670px;}
.left-menu{width:220px;height:670px;float:left;background-color:#FFFF00;}
.right-content{width:776px;float:left;margin-left:4px;}
.right-content .banner{height:180px;background-color:#FF6600;}
.right-content .section1{height:260px;background-color:#FFEEDD;margin-top:4px;}
.right-content .section2{height:220px;margin-top:4px;position:relative;}
.right-content .section3{width:460px;height:220px;background-color:#EEFFDD;}
.right-content .section4{width:300px;height:420px;position:absolute;right:0;top:0;background-color:#EEEDDC;}
#bottomMain{height:200px;width:690px;background-color:#123456;margin-top:10px;}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="content">
<div class="left-menu"></div>
<div class="right-content">
<div class="banner"></div>
<div class="section1"></div>
<div class="section2">
<div class="section3"></div>
<div class="section4"></div>
</div>
</div>
</div>
<div id="bottomMain">
<div class="section5"></div>
</div>
</div>
</div>
</body>
</html>
div是要把分开的，为的是解决麻烦负责的table布局。
最上面有个<div class=top>logo 和nav</div>
里面有两个小的div，logo和导航，给top设定宽度1000，然后logo分200，导航800
然后nav里面写a标签，给a标签加width和height，然后display:block;border:1px solid #ccc;
中间menu栏的一样，一个大的div，背景色，然后上面有个小div，然后里面也是a，放上去啥效果，当前选中啥效果，下面一个div，里面是search，居中。
下面main的，分左右跟上面一样，列表就用ul li。
额表格....
表格+DIV来控制布局
