div+css布局简介

来源：互联网发布：农村淘宝服务站图片编辑：程序博客网时间：2024/06/05 06:31

DIV+CSS布局

1.如何将一个整体的页面使用DIV+CSS切割成多块
编写css基本布局，主要用的元素有如下几个：
a>width:宽度
b>height:高度
c>border:边界线，边框
d>float:浮动属性
e>background:背景设置（这里用来区分不同的块）

注：float浮动属性，理解这个之前，首先要理解的是HTML在不设置这个属性时的页面编排模式：类似于文档，根据出现的顺序，默认编排是从上而下，从左至右；设置了这个属性后，被设置的模块开始浮动，根据设置的属性确定向左向右或者不浮动（float: 浮动方向(left、right、none);），直到该模块的外边距碰到父模块的边框或者另外模块边框为止。

首先第一步，肯定是先构思好自己需要将页面划分为那几块，比如我需要将之划分为上中下三块，然后中间又划分为左右两块

然后按照自己的构思，首先将css模板编写好：

#body{    width: 1000px;    margin: 0px auto;/*主面板div居中*/}#header{/*头部*/    width:100%;    height:100px;    border: 1px #F00 solid;}.header_logo{    width:100px;    height: 100px;    border: 1px #F00 solid;}#main{/*中部*/    width:100%;    height:400px;    border:1px #F00 solid;}.main_left{/*中左*/    float: left;    width:20%;    background: #1FF;}.main_middle{/*中右*/    float: left;    width:80%;    background: #DFF;}#foot{/*尾部*/    width:100%;    height:100px;    border:1px #F00 solid;}

注：css中的”#”对应的div标签中的“id”属性；“.”对应的是“class”属性，它们之间的关系就像是一个从属关系（我这么理解,方便）：‘#’包含‘.’；‘id’包含‘class’.

CSS模板写好后，开始写div，这里使用jsp还是html都行，我用的是jsp：

<body>    <div id="body">             <div id="header">            <div class="header_logo">logo</div>        </div>        <div id="main">            <div class="main_left" align="center">中左</div>            <div class="main_middle" align="center">中右</div>        </div>        <div id="foot">尾部</div>     </div>  </body>

最后的效果如下所示：
这里写图片描述

注：所设置的宽度和高度，子模块的绝对不能超过父模块的宽度和高度，否则，设置将失效。

0 0