一列布局：

一列固定宽度、一列固定宽度居中、一列自适应宽度、一列自适应宽度居中

一列固定宽度

<head>

<style type="text/css">

#layout { height: 300px; width: 400px; background: #99FFcc; }
</style>

</head>

一列固定宽度居中

<head>

<style type="text/css">

#layout { height: 300px; width: 400px; background: #99FFcc; margin: auto; }

</style>

</head>

一列自适应宽度

<head>

<style type="text/css">

#layout { height: 300px; background: #99FFcc;}

</style>

</head>

一列自适应宽度居中

 <head>

<style type="text/css">

body { margin: 0px; }
#layout { margin:auto; height: 300px; background: #99FFcc; width: 80%; }

</style>

</head>

两列布局

二列自适应宽度、两列固定宽度、两列固定宽度居中、float属性。

二列自适应宽度

<head>
<style type="text/css">
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }
</style>
</head>

两列固定宽度

<head>
<style type="text/css">
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }
</style>
</head>

两列固定宽度居中

<head>
<style type="text/css">
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }
</style>
</head>

float属性

<head>

<style type="text/css">

body { font-size:18px; line-height:200%; }
#side { float:left;width:202px;}

#main { margin-left:202px;}

</style>

</head>

三列布局

三列自适应宽度、三列固定宽度、三列固定宽度居中、

IE6的3像素bug

三列自适应宽度

<head>

<style type="text/css">
body { margin:0;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
三列固定宽度

<head>

<style>
body { margin:0;}
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>

三列固定宽度居中

<head>
<style>
body { margin:0;}
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>

 

十天学会DIV+CSS(DIV布局)的更多相关文章

  1. div,css&table布局有哪些区别

    DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...

  2. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  3. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  4. 标准之路网站上一篇文章《十天学会web标准(div+css)》的营养精华

    以下精华出自如下链接,“http://www.aa25.cn/special/10day/index.shtml”,<十天学会web标准(DIV+CSS)>. 这个内容不要删掉:“< ...

  5. 对于用div+css随心所欲布局的思考

    在div+css取代Table成为主流的时代,学会用其进行随心所欲的布局是一个不可回避的技能.那么,重点掌握哪几个要点呢? 整体布局:从整体到局部的顺序进行布局,逐步定义div集css样式: 灵活运用 ...

  6. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

  7. 常见div+css网页布局（float,absolute）

    网页布局-常见 1,           float布局 (1)常规方法 <div id="warp">     <div id="column&quo ...

  8. 利用Div+CSS整体布局页面的操作流程

    简单的网页布局(Div+CSS)<CSS盒模型+Div嵌套>: <!DOCTYPE html><html> <head>  <meta chars ...

  9. 第6天：DIV+CSS页面布局实战

    今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真 ...

  10. 一、CSS概述 二、CSS的选择器（认识） 三、CSS样式和属性（练习） 四、重构商城首页DIV+CSS(页面布局)（重点） 浮动/更改显示方式

    一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义 ...

随机推荐

  1. C#调用RAR压缩与解压

    public void RARsave(string rarPatch, string rarFiles,string  patch,string rarName)        {          ...

  2. spring security 3.2 配置详解（结合数据库）

    没事就来了解下spring security.网上找了很多资料.有过时的,也有不是很全面的.各种问题也算是让我碰了个遍.这样吧.我先把整个流程写下来,之后在各个易混点分析吧. 1.建立几个必要的页面. ...

  3. github 添加 SSH key

    在 github 上添加 SSH key 的步骤: 1.首先需要检查你电脑是否已经有 SSH key 运行 git Bash 客户端,输入如下代码: $ cd ~/.ssh $ ls 这两个命令就是检 ...

  4. 1.[WP Developer体验Andriod开发]之Andriod布局 VS WinPhone布局

    0.写在前面的话 近来被HTML+CSS的布局折腾的死去活来,眼巴巴的看着CSS3中的flex,grid等更便捷更高效的的布局方式无法在项目中应用,心里那叫一个窝火啊,去你妹的兼容性,,, 最近体验下 ...

  5. Hadoop 简介

    一个开源的,高可靠,可扩展的分布式计算框架 解决的问题 1 海量数据的存储(HDFS) 2海量数据的分析(Mapreduce) 3 分布式资源调度 (Yarn) 应用场景 日志分析,基于海量数据的在线 ...

  6. 在SQL SERVER中获取表中的第二条数据

    在SQL SERVER中获取表中的第二条数据, 思路:先根据时间逆排序取出前2条数据作为一个临时表,再按顺时排序在临时表中取出第一条数据 sql语句如下: select top 1 * from(se ...

  7. storm中DAU实时计算方案

    所就职的公司是一家互联网视频公司,存在大量的实时计算需求,计算uv,pv等一些经典的实时指标统计.由于要统计当天的实时 UV,当天的uv由于要存储当天的所有的key,面临本地内存不够用的问题,异常重启 ...

  8. java学习笔记----枚举测试题

    定义义一个交通灯枚举类,包含红灯.绿灯.黄灯,需要有获得下一个灯的方法,并实现红灯出现5秒之后变成绿灯,绿灯3秒之后变成黄灯,黄灯2秒之后变成红灯,如此循环 public class Test5 { ...

  9. zookeeper 安装及一些问题

    一.mac brew安装 http://blog.itpub.net/27099995/viewspace-1394831/ 二.部署多台 参考链接:http://blog.itpub.net/270 ...

  10. MFC编程入门之二十（常用控件：静态文本框）

    上一节讲了颜色对话框之后,关于对话框的使用和各种通用对话框的介绍就到此为止了.从本节开始将讲解各种常用控件的用法.常用控件主要包括:静态文本框.编辑框.单选按钮.复选框.分组框.列表框.组合框.图片控 ...