查看文章 |
一个最基本的div+css
2007-09-25 21:35
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>index</title> <link 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="#">首页</a></li> <li class="menuDiv"></li> <li><a href="#">博客</a></li> <li class="menuDiv"></li> <li><a href="#">设计</a></li> <li class="menuDiv"></li> <li><a href="#">相册</a></li> <li class="menuDiv"></li> <li><a href="#">论坛</a></li> <li class="menuDiv"></li> <li><a href="#">关于</a></li> </ul> </div> <div id="banner"> </div> </div> <div id="PageBody"><!--页面主体--> <div id="Sidebar"><!--侧边栏--> </div> <div id="MainBody"><!--主体内容--> </div> </div> <div id="Footer"><!--页面底部--> </div> </div> </body> </html> @@@@@@@@@@@@@@@ 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:800px;margin:auto;height:240px;border-bottom:5px solid #EFEFEF;clear:both} /*页面主体*/ #PageBody { width:800px; /*设定宽度*/ margin:0 auto; /*居中*/ height:400px; background:#CCFF00 } #sidebar { width:160px; /*设定宽度*/ text-align:left; /*文字左对齐*/ float:left; /*浮动居左*/ clear:left; /*不允许左侧存在浮动*/ overflow:hidden; /*超出宽度部分隐藏*/ background:url(banner.jpg); } #mainbody { width:640px; text-align:left; float:right; /*浮动居右*/ clear:right; /*不允许右侧存在浮动*/ overflow:hidden; background:url(banner.jpg); } /*页面底部*/ #Footer { width:800px; margin:0 auto; height:100px; background:#00FFFF } |
最近读者：
