于html介绍css作风。可以改变html块状布局,局更加美观。接下来看一个基础布局的小样例:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>margin布局</title> </head> <style type="text/css"> #container{ width: 1002px; background: gray; } #header{ height: 120px; background: orange; } #main{ background: green; height: 600px; } #lside{ width: 700px; height: 600px; float: left; background: pink; } .four{ width: 130px; height: 280px; float: left; margin: 10px; background: black; } #rside{ width: 302px; height: 600px; background: purple; float: right; } #footer{ height: 120px; background: blue; } </style> <body> <div id="container"> <div id="header"></div> <div id="main"> <div id="lside"> <div class="four"></div> <div class="four"></div> <div class="four"></div> <div class="four"></div> </div> <div id="rside"></div> </div> <div id="footer"></div> </div> </body> </html>
效果例如以下:
在上面的布局中。我们主要使用margin属性来对div进行布局。在实际中。感觉margin属性主要适用于块与块之间的布局,当我们要对盒子中的内容进行布局的时候,我们能够使用盒子的还有一个属性:padding,这个属性能够布局盒子内部的距离:
比如。我们增加padding属性,并在四个div中增加一些文字内容:
效果图:
注意,这里在实际做的时候,由于增加了padding值,导致了div最后不能并排显示在父div中。这里还改动了div的宽度值,使第四个div不至于被挤到以下去。
感觉增加css样式后。近期做的小demo跟曾经仅仅用html做的demo比起来,不仅布局上更加灵活多变,并且样式设置也比較简单了。
版权声明:本文博主原创文章,博客,未经同意不得转载。
时间: 2024-10-02 10:40:04