css的绝对布局问题，怎么让子元素置于底部？

html-css021

css的绝对布局问题，怎么让子元素置于底部？,第1张

1、首先设置要了解网页页面布局框架结构，设定宽高和边框，以及设置好class或者ID名称。

2、打开Dreamweaver CS5，点击新建HTML。

3、根据设定的网页布局，设置div网页结构。

4、添加div标签的class名称，这里也可以使用ID类名。

5、 编辑CSS控制div块的宽高和背景。

6、 这样就可以让子元素置于底部。

<!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/htmlcharset=utf-8" />

<title>基本框架结构</title>

<style type="text/css">

* { margin:0padding:0}

body { margin:0 autofont-size:12pxfont-family:Verdanaline-height:150%}

ul { list-style:none}

img { border:0 none}

a { text-decoration:nonecolor:#333}

h1 { font-size:18px}

h2 { font-size:14px}

h3 { font-size:14pxfont-weight:normal}

h4 { font-size:12px}

h5 { font-size:12pxfont-weight:normal}

.clearfloat { clear:bothheight:0font-size: 1pxline-height: 0}

#container{ margin:0 autowidth:960px}

/*header*/

#header { height:100pxbackground:#cf0}

#header h1 { padding:10px 20px}

#nav { background:#FF6600height:35pxmargin-bottom:6pxpadding:5px}

#nav ul li { float:left}

#nav ul li a { display:blockpadding:4px 10px 2px 10pxcolor:#ffftext-decoration:none}

#nav ul li a:hover { text-decoration:underlinebackground:#06Fcolor:#FFF}

/*main*/

#mainContent { overflow:autozoom:1margin-bottom:6px}

#side { width:200pxfloat:left}

.sidebox { border:1px solid #ed6400margin-bottom:6px}

.sidebox h4 { background:#ff911apadding:2px 6pxborder-bottom:1px solid #ed6400color:#fff}

.sidebox ul { padding:4px 6px}

#main { width:742pxfloat:right}

.mainbox { border:1px solid #ed6400margin-bottom:6px}

.mainbox h2 { background:#ff911apadding:2px 6pxborder-bottom:1px solid #ed6400color:#fff}

.mainbox ul { padding:4px 6px}

/*footer*/

#footer { border-top:3px solid #0CFheight:50pxtext-align:centerpadding:6pxcolor:#999}

</style>

</head>

<body>

<div id="container">

<div id="header">

<h1>头部</h1>

<!-- end #header -->

</div>

<div class="clearfloat"></div>

<div id="nav">

<ul>

<li><a href="#">导航一</a></li>

<li><a href="#">导航二</a></li>

<li><a href="#">导航三</a></li>

<li><a href="#">导航四</a></li>

<li><a href="#">导航五</a></li>

</ul>

<!-- end #nav -->

</div>

<div id="Content">

<div id="side">

<div class="sidebox">

<h4>块标题</h4>

<ul>

块内容

</ul>

</div>

<!-- end #side -->

</div>

<div id="main">

<div class="mainbox">

<h2>块标题</h2>

<ul>

块内容

</ul>

</div>

<!-- end #main -->

</div>

<!-- end #fContent -->

</div>

<div class="clearfloat"></div>

<div id="footer">底部

<!-- end #footer -->

</div>

<!-- end #container -->

</div>

</body>

</html>

自己把样式放进css文件里面

表格,框架和css+div相对比，div+css布局好，现在主流的网站均采用此种方法布局。

1、div+css和表格相比较，其优点是其布局定位简单，表格布局需要使用文字做内容，当想修改部分内容就要改动整个表格甚至真个界面，不利于后期的维护和前期的开发。

2、div+css提升了网页访问速度，div+css布局较传统的Table布局比较，减少了许多代码，其浏览访问速度自然得以提升，从而提升了网站的用户体验度。

3、div+css有利于优化。采用div-css布局的网站对于搜索引擎很是友好，简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。