Home > Article > Web Front-end > CSS page layout_html/css_WEB-ITnose
CSS page layout_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:27848browse
<1>Page layout
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <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文件里--></head><body> <div id="container"> <div id="header"> <div id="logo"> <a href="http://www.hao123.com"><img src="images/logo.png" /></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></body></html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：z-index stacking rules_html/css_WEB-ITnoseNext article：z-index stacking rules_html/css_WEB-ITnose