<!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. Ajax：Cross-Origin Resource Sharing（转）

    实例:http://blog.csdn.net/hongweigg/article/details/39054403 通过XHR实现Ajax通信的一个主要限制,来源于跨域安全策略.默认情况下,XHR对 ...

  2. android 5.0 受欢迎的API简介

    android 5.0 作为系统的一次重大升级,给用户和开发者带来了全新的体验.Material Design不但在视觉和操作上更胜一筹,扩展UI工具包同时也引入了大量新的API. 1. 3D视图和实 ...

  3. 遍历json的方式

    var obj = eval("(" + data + ")"); for(var key in obj) { alert(obj[key]); }

  4. dynamic和object浅谈

    要想知道dynamic和object的关系必须先理解它们的含义 C# 4.0提供了一个dynamic 关键字.在MSDN里是这样描述:在通过 dynamic 类型实现的操作中,该类型的作用是绕过编译时 ...

  5. IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

    IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...

  6. 【干货】.NET开发通用组件发布（四） 日志记录组件

    组件介绍和合作开发 http://www.cnblogs.com/MrHuo/p/MrHuoControls.html 日志记录组件功能介绍 通过基类Logger,实现了文本记录日志和数据库记录日志两 ...

  7. 分治算法求乘方a^b 取余p（divide and conquer）

    传统的计算方法为循环n个a相乘.时间复杂度为O(n). 如用分治算法,效率可提升至O(lgn). 结合recursive有 double pow(int a, int n){ ) ; ) return ...

  8. Redis使用（1）---安装

    简介 Redis具体简介可以百度.它可以在Linux和Windows下运行,但官方只提供针对Linux的包,Windows对其也有自己的开发团队. redis官网:http://www.redis.i ...

  9. 《Programming WPF》翻译 第5章 1.不使用样式

    原文:<Programming WPF>翻译 第5章 1.不使用样式 作为一个样式如何使其在WPF使用的例子,,让我们看一下TTT简单的实现,如示例5-1. 示例5-1 <!-- W ...

  10. SuperSpider——打造功能强大的爬虫利器

    SuperSpider——打造功能强大的爬虫利器   1.爬虫的介绍 图1-1  爬虫(spider) 网络爬虫(web spider)是一个自动的通过网络抓取互联网 上的网页的程序,在当今互联网 中 ...