CSS整体布局

一、页面布局与规划


二、写入整体层结构与css
在jsp中的head标签里面

<link href=”style.css” rel=”stylesheet” type=”text/css”/>

 

在body标签里

 

<div id="container"><!--页面层容器-->
　　<div id="header"><!--页面头部-->
　　</div>
　　<div id="PageBody"><!--页面主体-->
　　　　<div id="Sidebar"><!--侧边栏-->
　　　　</div>
　　　　<div id="MainBody"><!--主体内容-->
　　　　</div>
　　</div>
　　<div id="Footer"><!--页面底部-->
　　</div>
</div>

在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:100%;margin:10px auto}

/*页面头部*/
#header{width:800px;margin:0 auto;height:100px;background:#FFCC99}

/*页面主体*/
#pagebody{width:800px;margin:0 auto; height:400px; background:#CCFF00}

/*页面底部*/
#footer{width:800px;margin:0 auto; height:50px;background:#00FFFF}

 

部分解释：
通过margin:auto我们就可以轻易地使层自动居中了。

margin是外部距离，而padding则是内部距离

background:#ccc url('bg.gif') top left no-repeat；
表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，
top left表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。
top/right/left/bottom/center 　　用于定位背景图片，分别表示 上 / 右 / 下 / 左 / 中；还可以使用
　　　　
background:url('bg.gif') 20px 100px;
表示X座标为20像素，Y座标为100像素的精确定位；
repeat/no-repeat/repeat-x/repeat-y
分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。

三、页面顶部的制作

 

<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>

 

 
对菜单使用列表<li>形式，可以在以后方便对菜单定制样式
插入<li class="menuDiv"></li>这段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图中的竖线分隔。

#header{background:url(logo.gif) no-repeat;

在顶部加入了logo图片，还会baner，menu

四、页面顶部列表<li>制作菜单
      当在HTML中定义为id="divID"时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为class="divID"时，则在CSS中对应的设置语法是.divID。
　　如果id="divID"这个层中包括了一个<img></img>，则这个img在CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在class="divID"这个层中时，则设置语法应该是.divID img {}，这一点希望大家要分清楚了。
　　另外，HTML中的一切元素都是可以定义的，例如table、tr、td、th、form、img、input...等等，如果你要在CSS中设置它们，则直接写入元素的名称加上一对大括号{}就可以了。所有的CSS代码都应该写在大括号{}中。

#menu {padding:20px 20px 0 0}
/*利用padding:20px 20px 0 0来固定菜单位置*/

#menu ul {float:right;list-style:none;margin:0px;}
/*添加了float:right使得菜单位于页面右侧*/

#menu ul li {float:left;margin:0 10px}
.menuDiv {width:1px;height:12px;background:#999}

ist-style:none，这一句是取消列表前点，因为我们不需要这些点。
margin:0px，这一句是删除UL的缩进，这样做可以使所有的列表内容都不缩进。
margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左：10px，右：10px)

#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}

 <div style="border-bottom:1px dashed #ccc"></div> 插入虚线

#banner {
    background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
    width:730px; /*设定层的宽度*/
    margin:auto; /*层居中*/
    height:240px; /*设定高度*/
    border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
    clear:both /*清除浮动*/
}

另一个要说明的就是clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动，如果不清除则会影响banner层位置的设定。

五、页面主体内容

 

#pagebody {
    width:730px; /*设定宽度*/
    margin:8px auto; /*居中*/
}
#sidebar {
    width:160px; /*设定宽度*/
    text-align:left; /*文字左对齐*/
    float:left; /*浮动居左*/
    clear:left; /*不允许左侧存在浮动*/
    overflow:hidden; /*超出宽度部分隐藏*/
}
#mainbody {
    width:570px;
    text-align:left;
    float:right; /*浮动居右*/
    clear:right; /*不允许右侧存在浮动*/
    overflow:hidden
}

 
        保存预览效果，可以发现这两个层完美的浮动，在达到了我们布局的要求，而两个层的实际宽度应该160+2(border)+570+2=734px，已经超出了父层的宽度，由于clear的原因，这两个层才不会出现错位的情况，这样可以使我们布局的页面不会因为内容太长（例如图片）而导致错位。　
        而之后添加的overflow:hidden则可以使内容太长（例如图片）的部份自动被隐藏。通常我们会看到一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加overflow:hidden就可以解决这个问题