<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>固定浮动布局-三列</title>
<link rel="stylesheet" style="text/css" href="style2.css">
</head>
<body>
<div id="header"><h1>上标题</h1></div>
<div id="body">
<div id="navl">左导航</div>
<div id="main">中内容</div>
<div id="navr">右导航</div>
</div>
<div id="footer"><p>下版权</p></div>
</body>
</html>
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
margin:10px;
}
#header{
border:1px solid black;
width:600px;
height:60px;
margin:0 auto;
margin-bottom:10px;
}
#header h1{
height:60px;
line-height:60px;
font-size:16px;
text-align:center;
}
#body{
width:600px;
margin:0 auto;
}
#navl{
border:1px solid black;
width:150px;
height:500px;
float:left;
margin-bottom:10px;
background:lightcyan;
}
#main{
border:1px solid black;
width:294px;/*边框也算一个像素*/
height:500px;
float:left;
margin-bottom:10px;
background:lightblue;
}
#navr{
border:1px solid black;
width:150px;
height:500px;
float:right;
margin-bottom:10px;
background:lightyellow;
}
#footer{
border:1px solid black;
width:600px;
height:60px;
line-height:60px;
margin:0 auto;
text-align:center;
clear:both;
}
效果如下：
- 大小: 7.1 KB
分享到：
相关推荐
DIV+CSS布局：CSS浮动float属性详解 不解释
DIV+CSS布局：CSS浮动float属性详解[归纳].pdf
资源中包含html+CSS+div的布局练习，其中包括固定布局、流式布局、浮动布局、定位布局等布局方式的练习Demo，另外还对CSS中的一些特殊的属性进行了练习，包括position、float、display等属性，对每一个属性和布局的...
第四步：网页布局与div浮动等； 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置； 第七步：网站头部图标与logo部分的设计； 第八步：页脚信息(版权等)的表现设置； 第...
目 录 前 言 1 第一章 网站开发背景 2 第一节 web概述 2 一、认识WEB 2 二、认识WEB2.0标准 2 第二章 DIV+CSS详解 5 第一节 DIV+CSS简介 5 第二节 级联样式表简介 6 第三节 DIV+CSS布局的优点 6 一、利于搜索引擎...
此教程文字清晰，内容讲的详实，可以很容易让我们了解div+css布局的优缺点，并且里面讲的很多知识点都是我们在css手册中无法掌握的，看了它我想我们就会明白个八九成了，比如游览器兼容，float浮动知识透析等等……
布局及常用属性 布局概述 为什么要应用布局？ 布局概述 阅读报纸时会发现，虽然报纸中的内容很多，但 是经过合理地排版，版面依然清晰、易读。 1.确定版心 ...这个空标签可以为<div>、、等任何标签。
网页设计-页面布局篇(Css+Div)，网页设计-页面布局篇(Css+Div).网页设计-页面布局篇(Css+Div).网页设计-页面布局篇(Css+Div).
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
遇到网页设计问题的童鞋也可以提问，这些年总结了一些学生网页制作的经验:一般的网页作业需要融入以下知识点: div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频Flash的应用、ul li、下拉...
1、固定宽度CSS版式布局 2、自适应(弹性)宽度CSS版式布局 3、标准布局常见问题及解决办法 像素问题及解决办法 上边容器浮动后，下边的容器跟着浮动，造成页面错乱 当子元素浮动且未知高度时，怎么使父容器适应子...
DIV+CSS 清除浮动是页面布局中常见的问题，相信各位高手也都有自己的方法，今天在这里对常见的几种方法进行总结（PS：谈不上是原创，这里是我自己做的归纳总结，也是我自己内化的过程），希望对您能够有所帮助。...
DIVCSS布局：CSS浮动float属性详解
DIV+CSS 网页布局第二篇：两列布局 1、宽度自适应两列布局 两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。 当元素使用了浮动之后，会对周围的元素造成影响，那么就...
第四步：网页布局与div浮动等； 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置； 第七步：网站头部图标与logo部分的设计； 第八步：页脚信息(版权等)的表现设置； 第...
DIV+CSS网页布局常用到浮动方案，但浮动并不像表格那样好用，很多时候会出问题。同时设计不够良好的浮动布局，在不同的浏览器下会有不同的表现，可能设计时照着常用的浏览器做好了，拿到其它浏览器里一看又乱掉了。
div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...
3、要求有DIV+CSS的页面（左中右浮动布局、上中下布局） 4、要求有图片轮播图效果和其它javascript行为 5、要求有导航菜单的设置 6、要求有图片热点的设置 7、要求有文字滚动效果 8、要求有用户注册界面，同时检查...