01 DIV+CSS 固定页面布局

时间：2021-10-30 17:58:29

本文讲解使用DIV+CSS布局最基本的内容，读完本文你讲会使用DIV+CSS进行简单的页面布局。

DIV+CSS布局中主要CSS属性介绍：

Float:

Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。

Margin:

Margin属性用于设置两个元素之间的距离。

Padding:

Padding属性用于设置一个元素的边框与其内容的距离。

Clear:

使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。

实例讲解：下面使用实例如果做一个简单又基本的布局，效果如下图：

01 DIV+CSS 固定页面布局

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS布局教程</title>
<style type="text/css">
#Container{
    width:1000px;
    margin:0 auto;/*设置整个容器在浏览器中水平居中*/
    background:#CF3;
}
#Header{
    height:80px;
    background:#093;
}
#logo{
    padding-left:50px;
    padding-top:20px;
    padding-bottom:50px;
}
#Content{
    height:600px;
    /*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/
    margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的距离*/
    background:#0FF;
     
}
#Content-Left{
    height:400px;
    width:200px;
    margin:20px;/*设置元素跟其他元素的距离为20像素*/
    float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/
    background:#90C;
}
#Content-Main{
    height:400px;
    width:720px;
    margin:20px;/*设置元素跟其他元素的距离为20像素*/
    float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/
    background:#90C;
}
/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/
#Footer{
    height:40px;
    background:#90C;
    margin-top:20px;
}
.Clear{
    clear:both;
}
</style>
</head>
 
<body>
<div id="Container">
    <div id="Header">
        <div id="logo">这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。</div>
    </div>
    <div id="Content">
        <div id="Content-Left">Content-Left</div>
        <div id="Content-Main">Content-Main</div>
    </div>
    <div class="Clear"><!--如何你上面用到float,下面布局开始前最好清除一下。--></div>
    <div id="Footer">Footer</div>
</div>
</body>
</html>

注解：Container作为整个页面的容器，控制着整个页面在浏览器的位置，此处使用margin:0 auto;控制Container容器在浏览器中水平居中，一般固定宽度的布局都会用到这就代码。

本文只讲述最基本的布局，在具体开发实践中可能会遇到浏览器兼容性等其他问题，遇到细节问题请自行百度解决，解决的多了经验就积累起来了。

01 DIV+CSS 固定页面布局的更多相关文章

  1. html div&plus;css做页面布局

    http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...

  2. IT兄弟连 HTML5教程 DIV&plus;CSS网页标准化布局 小结及习题

    小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...

  3. IT兄弟连 HTML5教程 DIV&plus;CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

  4. DIV&plus;CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  5. DIV&plus;CSS列表式布局（同意图片的应用）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. div&plus;css与table布局

    1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...

  7. div&plus;css网页标准布局实例教程（二）

    五.布局页面——头部和导航 有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了.先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面 ...

  8. div&plus;css网页标准布局实例教程（一）

    今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...

  9. bootstrap&plus;css进行页面布局

    效果 用到了bootstrap中的表格css.圆形css.以及上一页下一页css. 布局页面,填充数据,实现js动态效果(比如点击下一页,上一页),逐步完善. 不仅仅要会使用bootstrap中的样式 ...

随机推荐

  1. 修改Firebug字体

    Firebug是一件非常好用的调试工具,然而默认的字体有些单调,设置里又没有更改的选项,那么字体到底能不能更改呢?这个问题困扰了我好久,直到今天我才偶然发现了解决方案. Firebug属于火狐的一个插 ...

  2. EF &ndash&semi; 8&period;多对多关联

    5.6.10 <多对多关联(上)> 时长:9分57秒 难度:难 5.6.11<多对多关联(下)> 时长:8分50秒 难度:难 如果单独地把多对多关联的CRUD拿出来讲,确实比较 ...

  3. Linux系统下定时上传文件至FTP服务器脚本

    环境:Red Hat Enterprise Linux Server release 6.4 需求:需要将Oracle数据库的定时备份上传至FTP服务器 1.干货,用户名:oracle,数据库名称:X ...

  4. 自学Python3&period;3-字符串格式化 作用域 递归

    一.字符串格式化 二.作用域 三.递归

  5. &lbrack; SSH框架 &rsqb; Spring框架学习之二（Bean的管理和AOP思想）

    一.Spring的Bean管理(注解方式) 1.1 什么是注解 要使用注解方式实现Spring的Bean管理,首先要明白什么是注解.通俗地讲,注解就是代码里的特殊标记,使用注解可以完成相应功能. 注解 ...

  6. box-shadow内阴影、外阴影

    外阴影: box-shadow:X轴  Y轴  Rpx  color; 属性说明(顺序依次对应):阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色 内阴影: bo ...

  7. springdashboard环境搭建

    SpringCloud Hystrix Dashboard Hystrix-dashboard是一款针对Hystrix进行实时监控的工具,通过Hystrix Dashboard我们可以在直观地看到各H ...

  8. &lbrack;转&rsqb;webpack4&period;0&period;1安装问题和webpack&period;config&period;js的配置变化

    本文转自:https://blog.csdn.net/jiang7701037/article/details/79403637 The CLI moved into a separate packa ...

  9. 【MongoDB】MongoDB的安装教程

    1,MongoDB简介 MongoDB也是一种数据库,只不过它既不是关系型数据库,也不是非关系型数据库(NoSQL),而是一种介于关系型数据库和NoSQL之间的一种数据库.如果说非关系型数据库是轻量级 ...

  10. memory prefix twi&comma;tri&comma;trans &comma;tetra out 4

    1● twi 二   2● tri 三   3● trans 超过,超载   4● tetra 立体  

相关文章