CSS页面布局_html/css_WEB-ITnose

页面布局

    <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>