CSS+DIV简单布局
2015-07-23 00:56
736 查看
摘自《网页开发手记》
1、效果图:
2、xhtml代码:
1、效果图:
2、xhtml代码:
<?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="en" lang="en"> <head> <title>xhtml+css简单布局</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #all{ width: 400px; height: 300px; margin: 0px auto; color: #f00; } #top, #bt{ height: 50px; background-color: #ccc; color: #00f; font-weight: bold; } #list{ width: 25%; height: 200px; float: left; background-color: #ddd; } #content{ width: 75%; height: 200px; background-color: #fff; } </style> </head> <body> <div id="all"> <div id="top">顶部</div> <div id="mid"> <div id="list">列表</div> <div id="content">内容</div> </div> <div id="bt">底部</div> </div> </body> </html>
相关文章推荐
- css position
- 2015.7.22 第十一课 课程重点(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)
- 使用CSS样式表格式化XML文档
- CSS清除浮动大全共8种方法
- 来问项目-less文件的组织
- css3中变形与动画(一)
- 使用css实现圆角图形绘制
- CSS相对定位、绝对定位之我见
- CSS:选择器
- css3 transition 实现图片放大缩小
- css关系选择符
- 30个值得收藏的CSS代码片段
- 纯css切换左侧菜单
- 如何处理CSS3属性前缀
- 个人学习css的真实经验
- CSS中背景图片定位
- 常用css缩写
- CSS3中动画属性transform、transition 和 animation
- css 圆角写法
- 关于:after和:before伪类的用法,以及让浮动占据高度问题。