网站布局CSS技巧

最新推荐文章于 2021-07-24 10:51:52 发布

幸运的JAVA小神

最新推荐文章于 2021-07-24 10:51:52 发布

阅读量461

点赞数

分类专栏： css 文章标签： css 布局

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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

幸运的JAVA小神

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网站布局CSS技巧

标准的页面的布局首页 body { font-family: Arial; margin: 0px; /*很多标签它们默认是有样式的，比如body就有外边距和内边距，我们一般会把body的外边距和内边距先清空，这样的话我们的内容就可以挨着边放了*/ padding: 0px;
复制链接

扫一扫

专栏目录