<!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. line-hight-(行高)解析

    行高定义:line-height属性是指文本行基线之间的距离. 顶线.中线.基线.底线概念 从上到下四条线分别是顶线.中线.基线.底线,很像才学英语字母时的四线三格,我们知道vertical-alig ...

  2. vs2015升级后台mvc视图编辑器默认不是razor视图引擎问题

    1.问题的原因 vs2013中创建的mvc4.0应用默认使用的razor2.0版本 在vs2015编辑器中默认使用的razor视图引擎是3.0版本 解决方案: 第一步:升级mvc应用的版本为mvc5. ...

  3. REST 相关

    REST 相关 REST:Representational State Transfer,表现层状态转化(出现在阮一峰的博客 理解RESTful架构 中,但是,很明显,Representational ...

  4. Oracle序列简单应用

    /* --指定cache的值 如果指定CACHE值 oracle就可以预先在内存里面放置一些sequence 这样存取会快些 cache里面 的取完 oracle自动再取一 组到 cache 使用ca ...

  5. linux虚拟机centos64位_6.5+VM10安装oracle11g图文详解

    注意: vi基本命令:i--编辑状态  退出编辑并保存时先按ESC键,再按符合“:wq”或者":x"即可注意每个步骤时的当前用户,是root还是oracle 以root用户登录虚机 ...

  6. Silverlight visifire Chart图表下载到PPT文件中

    一.Silverlight xaml.cs文件 1. //下载图表        private void btnDown_Click(object sender, RoutedEventArgs e ...

  7. silverlight visifire控件图表制作——silverlight 后台方法画图

    1.调用wcf 获取信息 private void svc_GetSingleChartDataCompleted(object sender, GetSingleChartDataCompleted ...

  8. 图片拉伸(有保护区域) resizableImageWithCapInsets

    在仿写QQ会话的时候背景蓝色图片是拉伸而来,但是有些地方是受保护的不能拉伸 所以定义了下面的工具类中的一个方法,专门拉伸图片 UIImageResizingModeStretch:拉伸模式,通过拉伸U ...

  9. linus用的是哪个桌面？

  10. MooTools 异步请求验证

    http://www.chinamootools.com/ 问题 MooTools 异步请求例子 <{foreach from=array('0','1','2','3','4') item=c ...