页面布局
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>标准的页面的布局首页</title> <style type="text/css"> body { font-family: Arial; margin: 0px; /*很多标签它们默认是有样式的，比如body就有外边距和内边距，我们一般会把body的外边距和内边距先清空，这样的话我们的内容就可以挨着边放了*/ padding: 0px; /*第一个兼容性问题：对于老的IE浏览器，margin：0 auto 并去起作用于是我们得在body里设置text-align:center 让它居中，让它居中后，里面的所有内容都会居中，因为是层叠的样式表关系*/ text-align: center; } #container { margin: 0px auto; /*将容器左右居中*/ width: 960px; /**/ /*height:800px;最外面的容器我们一般都不设置高度，高度都是按内容给它撑开*/ /*background-color:red;*/ text-align: left; /*因为为了解决老旧的IE浏览器不识别margin 0 auto的兼容性问题，我们在body里设置了text-align:center，所以我们这里需要给它调回来，因为我们需要容器里的内容是默认向左，所以需要调回来*/ } #header { float: left; width: 100%; /*因为最外面的这个#container容器已经指定了一个960px的宽度了，我们里面的盒子最好是按照百分比来设置盒子的宽度，因为如果外面的盒子如果调宽，或者调窄的时候，我们就不需要在改这里的宽度了。假如这里我们直接指定960px，它现在虽然和100%一样，但是如果#container容器改变宽度大小的时候，我们也就需要在这里进行改动；一个两个无所谓，十个，八个的就很麻烦了，所以我们指定好外面的#container容器的宽度后，里面的小盒子就尽量用百分比来设置宽度*/ /*height:150px; 第三个兼容性问题：标准的盒子，如果外层指定了高度了，它是不会被内容撑开的，而比较老旧的IE（即不标准的盒子）如果外层指定了高度，它是会被内容撑开的，为了解决这个兼容性问题，我们只能不设置外层的高度*/ /*background-color: red;*/ } #logo { float: left; width: 180px; background-color: #F0F; height: 100px; } #banner { float: left; width: 600px; background-color: yellow; height: 100px; margin-left: 10px; } #tool { float: left; width: 160px; background-color: #aaFF00; height: 100px; margin-left: 10px; } #nav { float: left; background-color: #00BBFF; height: 30px; width: 100%; } #content { float:left; width: 100%; /*height: 500px;*/ /*tmp*/ /*background-color: green;*/ } #main { float:left; width:750px; /*height:600px;*/ /*background-color:yellow;*/ } #main .leftBox { float:left; width:300px; height:200px; background-color:#ccc; } #main .rightBox { float: right; /*.leftBox往左边浮动，.rightBox往右边浮动 300px+440px=740px 因为main的宽度是750px 所以它们两个中间就会有一个10px的间距了。相当于外边距的效果*/ width: 440px; height: 200px; background-color: #ccc; } #barside { float: right; width: 200px; height:620px; background-color:yellow; } .guanggao { float:left; width:100%; height:100px; background-color:red; clear:both; } #footer { float:left; width: 100%; height: 100px; /*tmp*/ background-color: blue; } .t { /*我们在设置页面的时候想将页面做的好看一些，几个区块直接一般都用空白分割,一般情况下我们会用 margin-bottom:10px来设置，将div之间用空白隔开；但是我们在一个页面布局当中，这个隔开的空白到处都是，如果老板说，10px太宽了，5px就行，那我们就需要将所有有空白的地方该一下 margin-bottom:5px，工作量非常大，可维护性就非常差； 那能不能做到改一个值，所有的值都改掉呢? 答案是可以的，我们可以通过加塞的方发实现；比如两个div直接我想用空白隔开，平常的做法是设置外边距，现在我们不这样做了，我直接在两个div之间放一个div，将这个div的设置成白色的，宽度和高度设置成我们需要的就可以了*/ width: 100%; height: 10px; color: #fff; /*第二个兼容性问题：比较老旧的IE浏览器值指定高度小于18px的时候，是按18px算的，超过18px，才按我们指定的像素算；也就是说，我们指定了一个div的高度为10px，但是它却将这个div的高度渲染成18px了；为了解决这个兼容问题，我们可以这样设置overflow:hidden;即：超过指定的高度，就隐藏掉超过的部分*/ overflow: hidden; clear: both; } </style> <!--其实CSS文件并不是只加载一个，比如说这个是跟布局有关的我们可以定义一个layout.css，跟字体有关的我们也可以定义个font.css,跟文章的内容或其他有关的，我们再定义一个其他的css文件，等等；这样做的好处就是一看就知道哪个CSS文件是干嘛用的，这样我们找东西就方便一些。所以说CSS文件可以拆成几个，并不一定非要写在一个CSS文件中，只是我们偷懒，所以只写在一个CSS文件里--> <div id="container"> <div id="header"> <div id="logo"> <a href="http://www.hao123.com"><img src="images/logo.png" alt="CSS页面布局_html/css_WEB-ITnose" ></a> </div> <div id="banner"> 什么是banner？一个网站中最主要的广告位 </div> <div id="tool"> 工具栏 </div> <div class="t"></div> <div id="nav"> 导航，菜单，应用 </div> </div> <div class="t"></div> <div id="content"> <div id="main"> <div class="leftBox"> 左主体 </div> <div class="rightBox"> 右主体 </div> <div class="t"></div> <div class="leftBox"> 左主体 </div> <div class="rightBox"> 右主体 </div> <div class="t"></div> <div class="leftBox"> 左主体 </div> <div class="rightBox"> 右主体 </div> </div> <div id="barside"> 边栏 </div> </div> <div class="t"></div> <div class="guanggao"> 广告位 </div> <div class="t"></div> <div id="footer"></div> </div>
