<!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. Windows命令行(DOS命令)教程–2 （转载） http://arch.pconline.com.cn//pcedu/rookie/basic/10111/15325_1.html

    二.符号约定 为了便于说明格式,这里我们使用了一些符号约定,它们是通用的: C: 盘符 Path 路径 Filename 文件名 .ext 扩展名 Filespec 文件标识符 [ ] 方括号中的项目 ...

  2. IE兼容性标签和条件注释

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

  3. git教程 入门

    快速上传已有代码到github 如何将最新代码上传到github,这里讲本地已有项目文件的情况(假如本地有一个helloworld的工程目录,目录中有很多项目文件.),步骤如下: 前提:已安装git客 ...

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

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

  5. jdk,j2ee,j2se,j2me的概念区别

    jdk,j2ee,j2se,j2me的概念区别1.JDK是Java development toolkit,相当于是Java的库函数,是编译,运行java程序的工具包.J2EE是Java 2 ente ...

  6. php解析json数组（循环输出数据）的实例

    以快递100接口为例 返回的JSON数据 {"message":"ok","nu":"350116805826",&qu ...

  7. [C入门 - 游戏编程系列] 贪吃蛇篇(二) - 食物定义

    游戏中的食物没有那么多复杂属性,特别是贪吃蛇游戏中,我把食物看待的很简单: 1. 它必须属于世界,才能出现在世界.不可能一个不属于世界的食物,出现在世界中:但是可能存在着一个食物,它属于世界,但是却没 ...

  8. Liunx+C编程一站式学习

    Liunx+C编程一站式学习这本书有什么特点?面向什么样的读者?这本书最初是为某培训班的嵌入式系统Linux工程师就业班课程量身定做的教材之一.该课程是为期四个月的全日制职业培训,要求学员毕业时具备非 ...

  9. Oracle Sequence与Trigger的使用

    一:建立sequence -- Create sequence create sequence SEQ_PUSH minvalue maxvalue start increment cache ; 二 ...

  10. C++的ABI真特么是evil

    果然有些公司明确禁止使用STL也是有一定道理的.其实这个问题的本质就是认为大部分开发者是蠢货,没水平掌控这些细节,项目Release万一出乱子了怎么办?为此吐个槽,我链接一个库时,由于编译参数和链接参 ...