CSS页面布局

来源：互联网发布：方维o2o上门服务源码编辑：程序博客网时间：2024/06/05 00:40
<1>页面布局
<!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文件里        h1标签一个页面只能使用一次        h1标签具有标题意思，一个网页唯一标题的意思，对于搜索引擎来说遇到此标签说明此标签内内容有点重要，所以有让搜索引擎知道此处具有重要性内容，这个网页也是围绕此标题内容进行或相关的内容，我们把关键字放入此标签在某种程度说我们通过浏览器看起效果没什么不同但是对于搜索引擎优化（SEO）具有好处。        h2和h3标签在一个网页中就不像h1标签那样唯一性，但是也说明此两个标签内内容也重要，我们在制作网页时候可以适当加入此标签。        h1标签是否可以在一个网页（html）里出现多次（以h1开始以h1闭合结束，这样算一组，算出现一次）？答案是不能因为h1在一个网页中具有唯一的意思，所以只能用一次，假如我们用多次，给搜索引擎来说不知道此页面重点是什么一样。        h2和h3比起h1来说就没有唯一意思，所以可以在一个页面中适当使用几次。        通过h1,h2,h3,b加粗等方式可以使得一个网页在搜索引擎看了有层次和重点，更符合SEO优化，有利于搜索引擎排名。        特别说明h1,h2,h3的样式（如文字大小等）可以通过CSS样式设置来设定，以便于美化网页。        建议使用顺序 页面标题h1→页面关键词h2→页面内容中的关键词h3，如果使用一定能够要注意层次之间的设置，如果使用一定要按照权重的高低从h1往h（n）递减使用[要按照h1h2h3h4h5h6的逻辑和层次来使用]，比如如果页面当中使用了h3 那么你的页面当中一定要有设置h1、h2，不能单独使用，否则将被认为优化过度（除h1外，其他不能单独使用，不符合逻辑）。        另外，一个页面内h1只能用一次。        h1标签（代表网站核心，也是权重赋予最高的）一个页面只能使用一次，一个页面只能有一个核心，建议使用在页面的标题、不要使用在页面的logo中，要用在最重要的位置。        并且不要使用超过一次，否则将被认为过度优化        一个网站的标题是一个很重要的关键字，所以用h1包裹起来，这样有利于SEO优化，尽量不要用图片，这样搜索引擎不好抓取            --></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>
1 0