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