<!DOCTYPE html>
<!--
有限宽度带居中布局：
<style>
*{margin:0;padding:0;list-style:none;}

.zong{background:#ccc;}
.zong .header{height:100px;background:#f00;}
.zong .body{background:#0f0;}
.zong .body .content{width:450px;height:500px;background:#00f;}
.zong .body .sidebar{width:150px;height:600px;background:#ff0;}
.zong .footer{height:100px;background:#0ff;}

/*布局*/
.zong{width:600px;margin:0 auto;}
.content{float:left;}
.sidebar{float:left;}
.footer{clear:both;}
.clearfix:after{content:"\200B";display:block;height:0;clear:both;}
.clearfix{*zoom:1;}/*IE/7/6*/
</style>

<div class="zong">
<div class="header"></div>
<div class="body clearfix">
<div class="content"></div>
<div class="sidebar"></div>
</div>
<div class="footer"></div>
</div>
-->
无限宽度带居中布局：
<style>
*{margin:0;padding:0;list-style:none;}

.zong2{background:#ccc;}
.zong2 .header{height:100px;background:#f00;}
.zong2 .body{background:#0f0;}
.zong2 .body .content{width:450px;height:500px;background:#00f;}
.zong2 .body .sidebar{width:150px;height:600px;background:#ff0;}
.zong2 .footer{height:100px;background:#0ff;}

/*布局*/
.content{float:left;}
.sidebar{float:left;}
.footer{clear:both;}

/*body居中*/
.body{width:600px;margin:0 auto;}

/*header/footer内div设宽，居中，外div不设宽，背景*/
.zong2{min-width:600px;}/*页面缩小后仍然正常*/
.header div{width:600px;margin:0 auto;}
.footer div{width:600px;margin:0 auto;}
</style>
<div class="zong2">
<div class="header">
<div>header headerheade rheaderh eaderh eaderh ead erheader headerhe aderh eaderh eaderh ead erheade rhe aderhea derhead erhead erheaderh eade rheader header</div>
</div>
<div class="body">
<div class="content"></div>
<div class="sidebar"></div>
</div>
<div class="footer">
<div>dfooterfoo terfooterfooterfooterfooterfoo terfooter footer footerfooterfooterfooterfooterfooterf ooter footerfoote rfooterf ooterfooter foote rfoot erfooterf ooterfooter footer</div>
</div>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>

css-网页整体css布局的更多相关文章

  1. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  2. BIV+CSS网页的标准化布局

    DIV用于搭建网站结构(框架),CSS用于创建网站表现(样式/美化) DIV+CSS模式设计网站的优势: 1.表现和内容分离. 2代码简洁,提高网页浏览速度. 3.易于维护,改版. 4.提高搜索引擎对 ...

  3. HTML+CSS样式设置——CSS一学就会

    HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...

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

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

  5. DIV+CSS 网页布局之：混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  6. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

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

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

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

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

  9. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  10. 《精通CSS网页布局》读书报告 ----2016-12-5补充

    第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...

随机推荐

  1. sqlite命令

    .databases //显示所有数据库 .tables //显示所有表 .schema test //显示创建 test 表的 sql 语句 )备份和还原数据库 .backup E:/db/Stud ...

  2. ORACLE控制文件一致性【weber出品】

    一.首先控制文件有什么作用呢? 控制文件记录了如下信息:1.数据库的创建时间2.数据文件的位置3.日志文件的位置等作用是指导数据库 找到数据文件,日志文件并将数据库启动到 open 状态. 与其用文字 ...

  3. hdu Intelligent IME

    算法:字典树 题意:手机9键拼音:2:abc  3:def 4:ghi 5:jkl 6:mno 7:pqrs 8:tuv 9:wxyz: 第一行读入一个T,代表测试组数: 之后输入两个整数n和m, 有 ...

  4. 判别linux机器字节序为大端还是小端

    代码如下: #include <iostream> #include <arpa/inet.h> #include <cstdio> using namespace ...

  5. C++中string类的基本用法

    #include <iostream> #include <set> using namespace std; int main() { string line; getlin ...

  6. DOM 节点实例操作

    涉及知识点包括节点的所有知识 目的: 自动为文档创建一个目录表 自动创建目录

  7. 如何向java后台的对象中传数组

    1.后台对象的参数需要是是list对象 /* * copyright : GLOBALROAM Ptd Ltd * VmCreateInfo.java * Author: * zhangpengyan ...

  8. apache 出现Index of /的页面解决

    在apache安装文件中找到http.conf配置文件,打开找到 Options Indexes FollowSymLinks 这行,在Indexes前加一个-(减号),也就是该完之后是这样: Opt ...

  9. 滑雪（POJ 1088 记忆化搜索）

    滑雪 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 88094   Accepted: 33034 Description ...

  10. 学习hadoop

    一.笔记本触摸板关闭方法 1.在windows下有官方驱动. 2.ubuntu下没有 操作方法如下: 1,终端操作 临时禁止触摸板:sudo modprobe -r psmouse 开启触摸板:sud ...