指导一个简单的css+div代码

html-css012

指导一个简单的css+div代码,第1张

首先，建议你一点，与其在上一个div里面用margin-bottom不如在下一个div里面用margin-top，因为margin-bottom经常会失效，

而你这样的布局可以这样写

<style>

*{margin:0pxpadding:0px}

body{margin:0px

auto}

.blue{margin:0px

autobackground:#34d5f2padding:150px

50pxmargin-top:100pxwidth:500pxoverflow:hidden}

.white{margin-top:50pxbackground:#fff}

.white1{width:400pxheight:250px}

.white{width:400pxheight:500pxmargin-top:50px}

.white2{width:400pxheight:50pxmargin-top:50px}

.white,.white1,.white2{background:#fff}

</style>

<body>

<div

class="blue">

<div

class="white1">头部</div>

<div

class="white">内容部分</div>

<div

class="white2">尾部</div>

</div>

</body>

</html>

这样就是你要的效果了

CSS和DIV分开，也可以放在同一个文件中，下面就是一个简单的CSS+DIV网页

<!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>一个简单的CSS网页</title>

<style type="text/css">

<!--

.jiandan {

    font-size: 16px

    font-weight: bold

    color:#f00

}

.aa{width:500pxheight:200px border:1px solid #00f}

-->

</style>

</head>

<body>

<div class="aa"><span class="jiandan">一个简单网页</span></div>

</body>

</html>