浮动 float 属性:定义元素在哪个方向浮动。float:left | right | none
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
外边距 margin属性:百分数是相对于父元素的 width 计算的。
页面div:
<div id="container"> <div id="wrapper"><!-- 主体文字 --> <div id="content"><p><strong>1) Content here.</strong></p></div> </div> <div id="navigation"><p><strong>2) right part here.</strong></p></div> <div id="extra"><p><strong>3) left part here.</strong></p></div> </div>
1:2:1自适应布局:
<style type = "text/css"> div#wrapper{float:left;width:100%} div#content{margin: 0 25%;width:100%;} div#navigation{float:left;width:25%;margin-left:-25%;background:#B9CAFF} div#extra{float:left;width:25%;margin-left:-100%;background:#FF8539} </style>
2:1:1自适应布局:
<style type = "text/css"> div#wrapper{float:left;width:100%} div#content{margin-left:0;width:100%;} div#navigation{float:left;width:25%;margin-left:-50%;background:#B9CAFF} div#extra{float:left;width:25%;margin-left:-25%;background:#FF8539} </style>
1:1:2自适应布局:
<style type = "text/css"> div#wrapper{float:left;width:100%} div#content{margin-left: 50%;width:100%;} div#navigation{float:left;width:25%;margin-left:-100%;background:#B9CAFF} div#extra{float:left;width:25%;margin-left:-75%;background:#FF8539} </style>
相关推荐
CSS+DIV写的,上下固定高度,中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
12天学会DIV+CSS从理论到实践的教程,强烈推介。 第一天:选择什么样的DOCTYPE 第二天:什么是名字空间 第三天:定义语言编码 第四天:调用样式表 第五天:HEAD区的其他设置 第六天:XHTML代码规范 第七天:CSS入门 ...
div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight
div+css菜单导航布局自适应宽度,纯div+css
div+css模板布局 右侧固定,左侧自适应
HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
div宽度自适应布局(左边自适应)
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
CSS+ div 布局经常遇到的几个问题,刚好给新学员上课整理的实例代码。分享下: 1.border问题。 2.高度自适应问题及IE6min-height问题的解决 3.padding和margin的区别 4.margin加倍问题
NULL 博文链接:https://javapub.iteye.com/blog/709361
div+css布局 三行三列 中间自适应
html5新标签使用header、footer、nav、section布局,css设定及使用方法
站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
div+css,web标准,div+css布局,div+css实例,div+css模板
div+css,web标准,div+css布局,div+css实例,div+css模板
Div+Css网页版式布局 包括固定宽度和自适应宽度的网页版式布局 对于初学者和有研究者都是不错的资源哦 本人感觉实用性比较强
这是我自己项目总结的一些布局方法,基于DIV+CSS实现的一种弹性盒模型布局,主要利用display:table-cell;这一属性来实现,兼容良好,可扩展性也比较强。适用于做前端重构、架构的童鞋。
DIV+CSS 网页布局第二篇:两列布局 1、宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了。 当元素使用了浮动之后,会对周围的元素造成影响,那么就...
1、固定宽度CSS版式布局 2、自适应(弹性)宽度CSS版式布局 3、标准布局常见问题及解决办法 像素问题及解决办法 上边容器浮动后,下边的容器跟着浮动,造成页面错乱 当子元素浮动且未知高度时,怎么使父容器适应子...
HTML静态网页设计作业使用dreamweaver制作,采用DIV+CSS布局,共有多个页面,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度,主体内容区域宽度 1000多套(HTML+CSS+JS)网页设计的...