用DIVCSS实现国内经典式三行两列布局

CSS布局教程:用DIV+CSS实现国内经典式三行两列布局我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等。这样的形式是国内经典式的布局,我们这里不对它的视觉效果作过多的讨论,我们今天说说如何用DIV+CSS实现三行两列的布局。我们看下面的图片:这样的结构大家再熟悉不过了,我们该如何用DIV+CSS实现它呢。我们看下面的分析图片:---本文来源于网络,仅供参考,勿照抄,如有侵权请联系删除---它们相对应的关系如下:顶部:header左侧:sidebar右侧:containe底部:footer主要区域:main这个main是起什么作用的呢。由于中间的sidebar、containe是两列并行的,我们需要设置浮动,让他们各就各位。但我们的整个页面是需要居中于浏览器窗口的。我们只能为他们设置一个容器main,让sidebar、containe在这一容器中浮动。不必考虑居中问题。而main就发挥了居中或设置背景的功能。思路已很清晰,我们开始整理HTML代码:
---本文来源于网络,仅供参考,勿照抄,如有侵权请联系删除---header、main、footer是三个相对独立的层,而sidebar、containe是main层的子层。这里有一点需要说明,我们可以先写siderbar、也可以先写containe,通过浮动的设置,不管哪一个写在代码前部,所得到效果是一致的,我们可以通过让内容在前面的方式对搜索引擎更友好,如下代码:
我们开始写CSS,对上面的各元素进行样式表定义:*{margin:0;padding:0;}整体布局声明,边距与填充均为零。#header{width:776px;height:100px;margin:0auto;background:#06f;}对header的定义:宽度为776px;高度为100px;上下边距为零,左右边距为自动,实现了水平居中对齐;背景色为蓝色#06f。#main{width:776px;margin:0auto;}对main的定义:宽度为776px;上下边距为零,左右边距为自动,实现了水平居中对齐;无背景色等其它设置。---本文来源于网络,仅供参考,勿照抄,如有侵权请联系删除---#main#sidebar{width:200px;float:left;background:#f93;}对main的子层sidebar进行定义:宽度为200px;向左浮动;背景色为桔红色#f93。#main#containe{width:576px;float:right;background:#dceafc;}对main的子层containe进行定义:宽度为576px(776-200);向右浮动;背景色为很淡的蓝色#dceafc。#footer{width:776px;height:60px;margin:0auto;background:#666;}对footer的定义:宽度与上面的一样为776px;高度为60px;上下边距为零,左右边距为自动,实现了水平居中对齐;背景色为深灰色#666。或许你认为我们对布局的CSS定义已经结束了,其实还存在着问题,为了方便预览,我们给sidebar、containe设置一个300px的高度,查看一下效果,如图:---本文来源于网络,仅供参考,勿照抄,如有侵权请联系删除---在IE中,一切正常,按预定的构思正常显示出来了,但在FF中,footer层消失了。这是因为FF不知道浮动以后发生的事情,不清楚main的高度为几何,因而它跑到上面去了,我们看不到它的存在。我们去除containe的背景色,FF中看到的是如下图的景象:---本文来源于网络,仅供参考,勿照抄,如有侵权请联系删除---我们应该在sidebar、containe结束的地方清除浮动,让FF知道如何处理footer层,而不是直接放到上面,在视觉上消失。我们在HTML中增加一个新层,位于sidebar、containe结束的地方:我们定义clearfloat的样式为:#clearfloat{clear:both;height:1px;overflow:hidden;margin-top:-1px;}设置的意义是:clear:both;是指不允许左右有浮动对象;高度为1px;溢出为隐藏;顶边距为-1px,即这一层实际上是不可见的,仅为清除浮动之用。好了,现在基本上没有问题了,接下来就是在页面中设置菜单、添加内容并进---本文来源于网络,仅供参考,勿照抄,如有侵权请联系删除---行相应的样式定义。关于这些知识我们在以后52CSS的文章中再一一向大家介绍。我们添加了一些简单的内容,点此查看最终的效果!---本文来源于网络,仅供参考,勿照抄,如有侵权请联系删除---

1、当您付费下载文档后,您只拥有了使用权限,并不意味着购买了版权,文档只能用于自身使用,不得用于其他商业用途(如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利)。
2、本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供参考,付费前请自行鉴别。
3、如文档内容存在侵犯商业秘密、侵犯著作权等,请点击“举报”。

常见问题具体如下:

1、问:已经付过费的文档可以多次下载吗?

      答:可以。登陆您已经付过费的账号,付过费的文档可以免费进行多次下载。

2、问:已经付过费的文档不知下载到什么地方去了?

     答:电脑端-浏览器下载列表里可以找到;手机端-文件管理或下载里可以找到。

            如以上两种方式都没有找到,请提供您的交易单号或截图及接收文档的邮箱等有效信息,发送到客服邮箱,客服经核实后,会将您已经付过费的文档即时发到您邮箱。

注:微信交易号是以“420000”开头的28位数字;

       支付宝交易号是以“2024XXXX”交易日期开头的28位数字。

客服邮箱:

biganzikefu@outlook.com

所有的文档都被视为“模板”,用于写作参考,下载前须认真查看,确认无误后再购买;

文档大部份都是可以预览的,笔杆子文库无法对文档的真实性、完整性、准确性以及专业性等问题提供审核和保证,请慎重购买;

文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为依据;

如果您还有什么不清楚的或需要我们协助,可以联系客服邮箱:

biganzikefu@outlook.com

常见问题具体如下:

1、问:已经付过费的文档可以多次下载吗?

      答:可以。登陆您已经付过费的账号,付过费的文档可以免费进行多次下载。

2、问:已经付过费的文档不知下载到什么地方去了?

     答:电脑端-浏览器下载列表里可以找到;手机端-文件管理或下载里可以找到。

            如以上两种方式都没有找到,请提供您的交易单号或截图及接收文档的邮箱等有效信息,发送到客服邮箱,客服经核实后,会将您已经付过费的文档即时发到您邮箱。

注:微信交易号是以“420000”开头的28位数字;

       支付宝交易号是以“2024XXXX”交易日期开头的28位数字。

笔杆子文秘
机构认证
内容提供者

为您提供优质文档,供您参考!

确认删除?