指导一个简单的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的选择器的命名，按照命名来补全css代码即可，其中fl是浮动，相同的名称表示样式一样，你去分别控制大小，宽高，背景即可

<div classs="head1 clearFix">

<div class="hd-01 fl">1</div>

<div class="hd-02 fl">2</div>

<div class="hd-01 fl">3</div>

</div>

<div class="content1 clearFix">

<div class="ct-01 fl">4</div>

<div class="ct-02 fl">

<div class="ct-sd1">5</div>

<div class="ct-sd2">6</div>

<div class="ct-sd1">7</div>

</div>

<div class="ct-03 fl">8</div>

</div>

<div class="foot">

9

</div>