html第一天div页面布局
2016-05-03 16:03
501 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #body{ width:1002px; } #header{ width:1002px; height:100px; background:blue; } #main{ width:1002px; height:400px; background:red; } #lside{ width:700px; height:400px; background: yellow; float:left; } #rside{ width:302px; height:400px; background: pink; float:right; } #footer{ width:1002px; height:100px; background: grey; } #lside .l_part1{ width:280px; height:200px; background: purple; float:left; } #lside .l_part2{ width:280px; height:200px; background: green; float:right; } #lside .l_part3{ clear:left; width:280px; height:200px; background: orange; float:left; } #lside .l_part4{ width:280px; height:200px; background: red; float:right; } #rside .r_part1{ width:302px; height:190px; background:snow; float:left; } #rside .r_part2{ clear:left; width:302px; height:187px; background:brown; } </style> </head> <body> <div id = "bo 4000 dy"> <div id = "header">头部</div> <div id = "main"> <div id = "lside">主体 左 <div class = "l_part1">左上1</div> <div class = "l_part2">左上2</div> <div class = "l_part3">左下1</div> <div class = "l_part4">左下2</div> </div> <div id = "rside">主体 右 <div class = "r_part1">右上</div> <div class = "r_part2">右下</div> </div> </div> <div id = "footer">脚部</div> </div> </body> </html>
相关文章推荐
- Android布局的小窍门?
- Web布局连载——两栏固定布局(五)
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- HTML5调用摄像头实例
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- 样式表CSS布局经验
- 在winform下实现左右布局多窗口界面的方法之续篇
- C#自写的一个HTML解析类(类似XElement语法)
- 没有文件大小限制并免费的PDF到HTML转换工具
- JavaScript与HTML结合的基本使用方法整理
- css实现气泡框效果(实例加图解)
- html链接与文本标签们