<!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. 只包含schema的dll生成和引用方法

    工作中,所有的tools里有一个project是只包含若干个schema的工程,研究了一下,发现创建这种只包含schema的dll其实非常简单. 首先,在visual studio-new proje ...

  2. easyui treeJson 带层数

    public string GetTreeNav(int ID,int Num) { StringBuilder sb = new StringBuilder(); sb.Append("[ ...

  3. Palindrome Number 回文数

    判断一个数字是否是回文数,尝试不用其他额外空间. 注意: 负数也有可能成为回文数吗? 如果你想让int转为string,注意不用其他空间这个约束. 你也可以翻转一个int,但是有可能会溢出.     ...

  4. VC获取当前程序运行路径

    /***************************************************/ /* 函数: 获取当前程序运行的路径 /* 返回: 当前程序运行路径 C:\AAA\BBB\ ...

  5. Visual C++基础知识（ｗｉｎ３２ｅｘｅ）

    1.Visual C++简称VC或者VC++ 是一个集成开发环境(编辑器+调试器+编译器) gcc---Linux和Unix的C++编译器 Vc----Windows的C++编译器 2.MFC(Mic ...

  6. MFC中使用ADO方式连接数据库

    文章转自:http://blog.sina.com.cn/s/blog_a43aba5601014z8h.html 一.数据库操作准备 1.导入ADO动态链接库 在工程的stdafx.h中加入如下语句 ...

  7. CSS: Table-Layout & Word-Break 设置表和列的宽度固定不变

    1. 设置Table的列宽由表格宽度和列宽度设定(指定表格宽度,各个列宽度): table#tbl_id{table-layout:fixed;} 2. 设置TD内容根据宽度进行换行,即使字符串之间无 ...

  8. 异常处理：你不可能总是对的 - 零基础入门学习Python032

    异常处理:你不可能总是对的 让编程改变世界 Change the world by program 因为我们是人,不是神,所以我们经常会犯错.当然程序员也不例外,就算是经验丰富的码农,也不能保证写出来 ...

  9. 每次从vss获取文件都是只读

    在 Visual Studio 2008 中,使用 VSS 作为源码管理器,把文件签入后,文件会自动变为只读状态.在公司习惯是在某个开发人员的机器上获取最新的代码后编译,编译完之后服务器上再从 VSS ...

  10. BZOJ 1502 月下柠檬树(simpson积分)

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1502 题意:给出如下一棵分层的树,给出每层的高度和每个面的半径.光线是平行的,与地面夹角 ...