css+html简单布局demo
2014-08-28 13:47
696 查看
在html中引入css样式,可以改变html的块布局方式,使得界面的布局更加美观。接下来看一个基础布局的小例子:
效果如下:
在上面的布局中,我们主要使用margin属性来对div进行布局,在实际中,感觉margin属性主要适用于块与块之间的布局,当我们要对盒子中的内容进行布局的时候,我们可以使用盒子的另一个属性:padding,这个属性可以布局盒子内部的距离:
例如,我们加入padding属性,并在四个div中加入一些文字内容:
效果图:
注意,这里在实际做的时候,因为加入了padding值,导致了div最后不能并排显示在父div中,这里还修改了div的宽度值,使第四个div不至于被挤到下面去。
感觉加入css样式后,最近做的小demo跟以前只用html做的demo比起来,不仅布局上更加灵活多变,而且样式设置也比较简单了。
<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比起来,不仅布局上更加灵活多变,而且样式设置也比较简单了。
相关文章推荐
- css+html简单布局demo
- 问题:关于贴友的一个书本页面简单布局(html+css)的实现
- css+html简单的布局demo
- 关于贴友的一个书本页面简单布局(html+css)的实现
- HTML/CSS 简单布局01
- 网页简单布局之结构与表现原则(HTML/CSS)
- 在html中div+css布局的简单应用(适合初学者了解)
- 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则
- 一个简单的网页布局HTML+CSS
- 在html中div+css布局的简单应用(适合初学者了解)
- HTML结构化CSS网页布局入门指南
- 最简单适用的 DIV 与 CSS 布局实例
- HTML 用 CSS 实现网页布局
- 简单css两栏布局
- DIV+CSS布局基础:HTML标记(一)
- 简单学习CSS网页布局(初学者)
- 常用的简单 CSS布局
- DIV+CSS布局基础:HTML标记(三)
- CSS页面布局中HTML结构化