DIV+CSS常用网页布局技巧!
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考!
第一种布局:左边固定宽度,右边自适应宽度
HTML Markup
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
CSS Code
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#left {
float: left;
width: 220px;
background-color: green;
}
#content {
background-color: orange;
margin-left: 220px;/*==等于左边栏宽度==*/
}
</style>
第二种布局:左边自适应宽度,右边固定宽度
HTML Markup
<div id="wrapper" class="clearfix">
<div id="content-wrapper">
<div id="content">
左边的内容
</div>
</div>
<div id="nav">
右边的内容
</div>
</div>
CSS Code
body {
padding: 0;
margin: 0;
}
#wrapper {
width: 960px;
border: 1px solid #333;
margin: 0 auto;
}
#nav {
width: 200px;
float: right;
}
#content-wrapper {
margin-right: -200px;
float: left;
width: 100%;
}
#content {
margin-right: 200px;
padding: 0 10px;
}
.clearfix:after {
height: 0;
content: ".";
display: block;
clear: both;
visibility: hidden;
}
第三种布局:三栏布局,左右固定,中间自适应宽度
HTML Markup
div class="left">我是left</div>
<div class="right">我是right</div>
<div class="center">我是center</div>
CSS Code
body,div{ margin:0; padding:0;}
div{ height:200px; color:#F00;}
.left{ float:left; width:100px; background:#00f; _margin-right:-3px;}
.right{ float:right; width:100px; background:#0f0; _margin-left:-3px;}
.center{ background:#333; margin:0 100px; _margin:0 97px;}
IE6中的3px间隙bug
在ie6中,我们看到各列之间有一条3px的间隔,这是只有IE6才有的问题。如果中间那列的margin-left和margin-right都为0的话,则只要把左列的margin-right设为-3px,右列的margin-left设为-3px就行了。但如果把中间列的margin-left和margin-right分别为左右两列的宽度时,即使把左列的margin-right设为-3px,右列的margin-left设为-3px也还是没有效果。这时候还得把中间列的margin-left设为左列宽度-3px,margin-right设为右列宽度-3px才行
第四种布局:等高布局,即在实现上述三种布局的同时,还实现左中右区域高度相同(内容不限,以最大高度为准)
body{ padding:0; margin:0; color:#f00;}
.container{ margin:0 auto; width:600px; border:3px solid #00C;
overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/
}
.left{ float:left; width:150px; background:#B0B0B0;
padding-bottom:2000px;
margin-bottom:-2000px;
}
.right{ float:left; width:450px; background:#6CC;
padding-bottom:2000px;
margin-bottom:-2000px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是left</div>
<div class="right">我是right<br><br><br>现在我的高度比left高,但left用它的padding-bottom补偿了这部分高度</div>
<div style="clear:both"></div>
</div>
</body>
</html>
DIV+CSS常用网页布局技巧!的更多相关文章
- PHP.4-DIV+CSS标准网页布局准备工作(下)
DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...
- PHP.3-DIV+CSS标准网页布局准备工作(上)
DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- div+css对网页进行布局
div+css对网页进行布局 首先在页面整体上进行div标签划分内容区域,然后再用css进行定位,最后再对相应的区域添加内容. 1.用div将页面划分 拿到网站页面图后,首先将分析页面分为哪几块,然后 ...
- CSS进阶内容——布局技巧和细节修饰
CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...
- DIV+CSS列表式布局(同意图片的应用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- DIV+CSS常用的网页布局代码
单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...
随机推荐
- 将json转换成struts参数
加入对象为{name:'tom','class':{className:'class1'},classMates:[{name:'lily'}]}struts2期待的格式是 name=tom& ...
- Splunk - 如何在WebFramework之CORS模式下你的网站和splunk web进行交互
1. 修改配置文件以支持CORS 进入/Applications/Splunk/etc/system/local 修改server.conf 在最后加入如下: [httpServer]crossOri ...
- mac下忘记mysql密码, 重新设置mysql密码
step1: 苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击stop mysql server)step2:进入终端输入:cd /usr/local/m ...
- eclipse连接远程hadoop集群开发时权限不足问题解决方案
转自:http://blog.csdn.net/shan9liang/article/details/9734693 eclipse连接远程hadoop集群开发时报错 Exception in t ...
- No module named flask.ext.sqlalchemy.SQLALchemy
在学习<OReilly.Flask.Web.Development>的时候,按照书的例子到了数据库那一章,在运行python hello.py shell的时候出现了“ImportErro ...
- GameOver
GameOver. 正了八经的觉得GameOver了.该开始新的了.
- 在Win8.1系统下如何安装运行SQL Server 2005 (以及安装SQL Server 2005 Express打补丁)
在Win8.1系统下SQL Server 2005 安装失败怎么办? 需要替换两个文件及打sqlserver sp4补丁. 以下是操作过程. 按正常情况,在Win8/Win8.1系统下安装微软的SQL ...
- neo4j安装与示例
Neo4j有两种访问模式:服务器模式和嵌入模式参考,下面主要讲windows下这两种模式的配置与访问示例 1 Windows下Neo4j服务器模式安装与示例 安装: 1.下载Neo4j,我下载的版本是 ...
- 关于u-boot中的.balignl 16,0xdeadbeef的理解
.globl _start //不占内存_start: b start_code //占4字节内存 ldr pc, _undefined_instruction //占4字节内存 ldr ...
- MVC ASP.net流程 源代码分析
AppDomainFactory.cs 1. public Object Create(String appId, String appPath) public Object Create(Strin ...