CSS+DIV布局初步

最新推荐文章于 2021-11-23 22:05:52 发布

原创最新推荐文章于 2021-11-23 22:05:52 发布 · 662 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#div #css #float #stylesheet #border

本文介绍了使用CSS+DIV进行网站布局的基本方法，通过一个简单的例子展示了如何创建包含头部、菜单、侧边栏和主体内容的网页布局。关键点在于利用`float:left`属性实现<div>元素的水平排列，同时探讨了不同ID和类的选择器应用，如`#menu`、`.menuDiv`等，以及如何设置宽度、边距和高度来调整布局。

最近在学习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的先后顺序一致。