Html-DW(2)div & css 简单的三栏页面
2014-09-21 07:33
513 查看
Html代码:
<head>
<meta charset="UTF-8">
<title>MyBlog</title>
<link href="css/main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="contain">
<div id="header"></div>
<div id="body"></div>
<div id="foot"></div>
</div>
</body>
main.css代码:
*{background-color:#09C}
*{margin:0px} /*去掉缝隙*/
/*星号,*代表整个页面的设置*/
#contain{background-color:#968;width:960px;height:400px;
margin-left:auto;margin-right:auto}
/*margin-left/right:对象居中*/
#header{background-color:#3CF;width:960px;height:100px;}
#body{background-color:#30C;width:960px;height:200px;}
#foot{background-color:#FC3;width:960px;height:100px;}
效果:
实际上现在的网页多数都是大div套小div的
http://edu.51cto.com 来自51cto的教学
<head>
<meta charset="UTF-8">
<title>MyBlog</title>
<link href="css/main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="contain">
<div id="header"></div>
<div id="body"></div>
<div id="foot"></div>
</div>
</body>
main.css代码:
*{background-color:#09C}
*{margin:0px} /*去掉缝隙*/
/*星号,*代表整个页面的设置*/
#contain{background-color:#968;width:960px;height:400px;
margin-left:auto;margin-right:auto}
/*margin-left/right:对象居中*/
#header{background-color:#3CF;width:960px;height:100px;}
#body{background-color:#30C;width:960px;height:200px;}
#foot{background-color:#FC3;width:960px;height:100px;}
效果:
实际上现在的网页多数都是大div套小div的
http://edu.51cto.com 来自51cto的教学
相关文章推荐
- Html-DW(4)div & css 设计head底部横条内容
- HTML&CSS基础学习笔记1.22-一个简单的注册页面
- Html-DW(1)链接CSS & div基础
- Html-DW(3)div & css 设计head
- 大学生简单网页div+css网页纯手写代码制作html静态页面切图排版
- 【原】HTML页面元素加载顺序研究报告(1)----简单Div罗列
- 最简单实用的 jquery 选项卡 DIV+CSS 页面内可放置无限多个选项卡
- 关于贴友的一个书本页面简单布局(html+css)的实现
- html页面的CSS、DIV命名规则
- HTML与CSS简单页面效果实例
- 【HTML&CSS】 第二章:标准模式下的页面与怪异模式下的页面区别
- 问题:关于贴友的一个书本页面简单布局(html+css)的实现
- CSS reset & 闭合div 适用于HTML5
- html页面中运用CSS为层(div)元素添加滚动条
- html div+css做页面布局
- 黑马程序员-HTML和CSS结合做的一个计算器的简单页面
- 在html中div+css布局的简单应用(适合初学者了解)
- css div布局的简单页面
- div+css 误区 html标准标签 css建议 静态页面制作
- html DIV+CSS 页面布局