CSS+DIV布局初步

最近在学习CSS+DIV布局,下面就把一个简单的例子写出来

网站布局如下:

下面是index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <link href="css.css" mce_href="css.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="header"> <div id="menu"> <ul> <li><a href="#" mce_href="#">首页</a></li> <li class="menuDiv"></li> <li><a href="#" mce_href="#">博客</a></li> <li class="menuDiv"></li> <li><a href="#" mce_href="#">设计</a></li> <li class="menuDiv"></li> <li><a href="#" mce_href="#">相册</a></li> <li class="menuDiv"></li> <li><a href="#" mce_href="#">论坛</a></li> <li class="menuDiv"></li> <li><a href="#" mce_href="#">关于</a></li> </ul> </div> <div id="banner"> </div> </div> <div id="pagebody"><!--页面主体--> <div id="sidebar"><!--侧边栏--> </div> <div id="mainbody"><!--主体内容--> </div> <div id="mainbody2"><!--主体内容--> </div> </div> </div> </body> </html>

下面是css.css

/*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} a:link,a:visited {font-size:12px;text-decoration: none;} a:hover{} /*页面层容器*/ #container {width:800px;height:600px;margin:10px auto} /*页面头部*/ #header {background:url(logo.gif) no-repeat} #menu {padding:20px 20px 0 0} #menu ul {float:right;list-style:none;margin:0px;} #menu ul li {float:left;display:block;line-height:30px;margin:0 10px} #menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666} #menu ul li a:hover{} .menuDiv {width:1px;height:28px;background:#999} #banner {background:url(banner.jpg) 0 30px no-repeat;width:730px;margin:auto;height:240px;border-bottom:5px solid #EFEFEF;clear:both} /*页面主体*/ #pagebody { width:730px; /*设定宽度*/ margin:8px auto; /*居中*/ } #sidebar { width:160px; /*设定宽度*/ text-align:left; /*文字左对齐*/ float:left; /*浮动居左*/ clear:left; /*不允许左侧存在浮动*/ overflow:hidden; /*超出宽度部分隐藏*/ border:1px solid #E00; height:200px } #mainbody { width:270px; text-align:left; float:left; /*浮动居右*/ clear:right; /*不允许右侧存在浮动*/ overflow:hidden; border:1px solid #E00; height:200px } #mainbody2 { width:300px; text-align:left; float:left; /*浮动居右*/ clear:right; /*不允许右侧存在浮动*/ overflow:hidden; border:1px solid #E00; height:200px } /*页面底部*/ #footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}

通过这个例子发现,如果要是想让多个<div>水平排列,只要使用 float:left 即可 ,排列的顺序与div的先后顺序一致。

你可能感兴趣的:(CSS+DIV布局初步)