08_CSS入门和高级技巧(6)

排查错误

Chrome浏览器的审查功能。
错误1：选择器写错了，压根没有选择上；
如果写了一个错误的选择器，

<style type="text/css">
    dvi p{
        color:red;
    }
</style>

Chrome审查一下，就能看见没有任何选择器选择上这个元素：

错误的写class：

<div calss="haha">
    <p>文字</p>
</div>

上面一个选择器后面有多余的东西，所以就干扰了下一个选择器：

body{
    background-color: pink;
}}
div p{
    color:red;
}

家谱顺序错误，也是选择不上的。Chrome浏览器底部，是选中的元素的家谱：

Chrome浏览器底部

错误2：选择上了，但是属性写错了；
属性错误

属性错位

博雅互动作业

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>博雅互动</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        /*公共类，原子类*/
        .inner_c{
            width: 1000px;
            margin: 0 auto;
        }
        .cl{
            clear: both;
        }
        .nomargin{
            margin: 0 !important;
        }
        body{
            height: 4444px;
            font-size: 14px;
            font-family: "Arial","Microsoft Yahei","SimSun";
        }
        .header{
            /*标准流中的块级元素不写宽度自动撑满，所以可以不写width*/
            /*也可以写上width:100%;更清晰一些。*/
            width: 100%;
            height: 58px;
            background-color: #191D3A;
        }
        .header .logo{
            /*浮动的盒子会自动收缩，就像一个橡皮筋套住了它，收缩到最小*/
            /*儿子多宽，它就多宽*/
            float: left;
            padding: 10px 0px 0px 20px;
        }
        .header .logo h1{
            width: 158px;
            height: 37px;
            background: url(images/logo.png);
            text-indent: -999em;
            overflow: hidden;
        }
        .header .logo h1 a{
            display: block;
            height: 37px;
        }
        .header .nav{
            float: left;
            width: 603px;
            height: 58px;
            margin-left: 47px;
        }
        .header .nav ul{
            list-style: none;
        }
        .header .nav ul li{
            float: left;
            width: 85px;
            border-right: 1px solid #252947;
        }
        .header .nav ul li.first{
            border-left: 1px solid #252947;
        }
        .header .nav ul li a{
            display: block;
            width: 85px;
            height: 58px;
            text-align: center;
            line-height: 58px;
            text-decoration: none;
            color:#818496;
        }
        .header .nav ul li.current a{
            background-color: #252947;
            color:white;
        }
        .header .nav ul li a:hover{
            color:white;
        }
        .header .joinus{
            float: left;
            margin-left: 52px;
            padding-top: 12px;
        }
        .header .joinus a{
            display: block;
            width: 98px;
            height: 32px;
            background-color: #38B774;
            border: 1px solid #3ACA7A;
            text-align: center;
            line-height: 32px;
            text-decoration: none;
            color:white;
            /*圆角*/
            border-radius: 3px;
        }
        .header .joinus a:hover{
            background-color: orange;
            border-color: yellow;
        }

        .banner{
            width: 100%;
            height: 567px;
            position: relative;
        }
        .banner .banner1{
            height: 567px;
            background: #5EC4EA url(images/banner1.jpg) no-repeat center top;
        }
        .banner .circles{
            position: absolute;
            width: 94px;
            height: 13px;
            left: 50%;
            bottom: 19px;
            margin-left: -47px;
        }
        .banner .circles ol{
            list-style: none;
        }
        .banner .circles ol li{
            float: left;
            width: 12px;
            height: 12px;
            margin-right: 15px;
            background: url(images/icons.png) no-repeat -1px -3px;
        }
        .banner .circles ol li.cur{
            background-position: -13px -3px;
        }
        .product{
            padding-top: 50px;
            height: 229px;
            border-bottom: 1px solid #DBE1E7;
            position: relative;
        }
        .product ul{
            list-style: none;
        }
        .product ul li{
            float: left;
            width: 218px;
            margin-right: 43px;
        }
        .product ul li.last{
            width: 217px;
            overflow: hidden;
        }
        .product ul li a{
            text-decoration: none;
            display: block;
            padding-bottom: 12px;
        }
        .product ul li a:hover{
            background-color: #38B774;
        }
        .product ul li span{
            /*转成块之后，就能用text-align:center;来居中内部文字了*/
            display: block;
            text-align: center;
        }
        .product ul li span.chinese{
            line-height: 40px;
            color:#444866;
            font-weight: bold;
        }
        .product ul li span.english{
            font-size: 12px;
            line-height: 12px;
            color:#38B774;
        }
        .product ul li a:hover span.chinese{
            color:white;
        }
        .product ul li a:hover span.english{
            color:white;
        }
        .product ul li span.english b{
            font-weight: normal;
            padding-right: 11px;
            background: url(images/arrow.png) no-repeat right center;
        }
        .product ul li a:hover span.english b{
            background-image: url(images/arrow2.png);
        }
        
        .product .circles{
            position: absolute;
            bottom: -6px;
            left: 50%;
            width: 117px;
            height: 12px;
            background-color: white;
            margin-left: -59px;
        }
        .product ol{
            padding-left: 17px;
            list-style: none;
        }
        .product .circles ol li{
            float: left;
            width: 12px;
            height: 12px;
            background:url(images/icons.png) no-repeat -1px -15px;
            margin-right: 14px;
        }
        .product .circles ol li.cur{
            background-position: -13px -15px;
        }
    </style>
</head>
<body>
    <!-- 网页头部 -->
    <div class="header">
        <div class="inner_c">
            <div class="logo">
                <h1><a href="">博雅互动-最专业的游戏公司</a></h1>
            </div>
            <div class="nav">
                <ul>
                    <li class="first current"><a href="">首页</a></li>
                    <li><a href="">博雅游戏</a></li>
                    <li><a href="">博雅新闻</a></li>
                    <li><a href="">关于我们</a></li>
                    <li><a href="">客服中心</a></li>
                    <li><a href="">投资者关系</a></li>
                    <li><a href="">校园大使</a></li>
                </ul>
            </div>
            <div class="joinus">
                <a href="">加入我们</a>
            </div>
        </div>
    </div>
    
    <div class="cl"></div>

    <!-- banner -->
    <div class="banner">
        <div class="banner1"></div>
        <div class="circles">
            <ol>
                <li class="cur"></li>
                <li></li>
                <li></li>
                <li class="nomargin"></li>
            </ol>
        </div>
    </div>

    <div class="cl"></div>

    <!-- 产品 -->
    <div class="product inner_c">
        <ul>
            

            <li>
                <a href="">
                    <img src="images/pro1.png" alt="" />
                    <span class="chinese">四川麻将</span>
                    <span class="english">
                        <b>
                            SICHUAN MAHJONG
                        </b>
                    </span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/pro2.png" alt="" />
                    <span class="chinese">四川麻将</span>
                    <span class="english">
                        <b>SICHUAN</b>
                    </span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="images/pro3.png" alt="" />
                    <span class="chinese">四川麻将</span>
                    <span class="english">
                        <b>SICHUAN MAHJONG</b>
                    </span>
                </a>
            </li>
            <li class="last nomargin">
                <a href="">
                    <img src="images/pro4.png" alt="" />
                    <span class="chinese">四川麻将</span>
                    <span class="english">
                        <b>SICHUAN MAHJONG</b>
                    </span>
                </a>
            </li>
        </ul>
        <div class="circles">
            <ol>
                <li class="cur"></li>
                <li></li>
                <li></li>
                <li class="nomargin"></li>
            </ol>
        </div>
            
    </div>
</body>
</html>

版心：就是网页中间居中的部分。

响应式的网站responsive web design，就是网页随着用户屏幕的大小不同，有不同尺寸的版心。

我们现在做的网站，版心都是固定的：1200px、1100px、1000px、980px、970px

padding这个东西，是不能够挤背景图片的，因为padding区域也能有背景，背景图也能渲染在padding里。

到底用<img src=”” />插入，还是backgrond:url(); ，要看这个图片是内容的一部分还是杂碎、起装饰作用的图片。

定位

CSS中重要的东西就三个：盒模型、浮动、定位。这三个技术，就是负责网页的布局的。

其余的技术，都是杂碎：background、文字、颜色表示法……

1.相对定位

position:relative;相对自己进行微调

相对定位就是相对自己原来的位置，进行位置移动。移动的时候需要使用定位值。

top：正数向下移动

bottom：正数向上移动

left：正数向右移动

right：正数向左移动

可以任意组合，从top、bottom中选择一个，然后从left、right中选择一个

top:10px;
left:20px;

等价于

bottom:-10px;
right:-20px;

相对定位不脱标，老家留坑，形影分离。

相对定位这个东西，因为在老家留坑，所以用处不大：

1）微调元素
2）下午我们介绍的“子绝父相”

微调元素：

2.绝对定位

position: absolute;

position:absolute

绝对定位的元素，脱离标准文档流。用top、bottom、left、right来进行定位。参考的是页面的左上角。

1.定位参考点

我们现在来研究，定位的参考原点到底是哪里？

如果用top值定位，那么参考点就是页面的左上角或者右上角，而不是浏览器窗口的。

定位参考点

如果用bottom进行定位，就是浏览器首屏的左下角在页面中的位置。

定位参考点

面试题：

2.祖先盒子当参考点

子绝父相：

<div>  →  相对定位
    <p></p>  → 绝对定位
</div>

此时这个p就是以div的边框内侧为参考点进行定位。

一个盒子可以以某一个祖先盒子作为定位参考点，离自己最近的、已经定位了的祖先盒子。

要记住，祖先盒子不一定只有相对定位才能成为参考点，而是什么定位都行。比如，相对定位、绝对定位、固定定位。

除了“子绝父相”之外，“子绝父绝”也是一个典型的定位模型；“子绝父固”也是一个典型的定位模型。

祖先中离自己最近的、已经定位的元素：

<div class="box1">  → 没有定位
    <div class="box2">   → 相对定位
        <div class="box3">   → 绝对定位
            <div class="box4">   → 没有定位
                <p></p>
            </div>
        </div>
    </div>
</div>

所以p以.box3为参考点；.box3以box2为参考点。

绝对定位的元素，无视参考盒子的padding：

绝对定位

红色盒子top:0;left:0; 无视padding的。

3.绝对定位元素的居中

新说一个知识点，就是绝对定位盒子已经不属于标准文档流了，所以不能使用margin:0 auto；来居中了。那么绝对定位的盒子如何居中？

position: absolute; 
left:50%;
top: 0;

left:50%;指的是元素的左边线是50%的位置。这点和background-position不一样。

所以要往回拉一半的自己宽度。
left:50%

<style type="text/css">
    div{
        width: 600px;
        height: 200px;
        background-color: yellowgreen;
        position: absolute; 
        left:50%;
        top: 0;
        margin-left: -300px;
    }
</style>

4.应用

所有的压盖效果，想都别想，90%是绝对定位做的。

    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }

        .carouse1{
            width: 310px;
            height: 220px;
            border: 1px solid gray;
            position: relative;
        }

        span.left_btn{
            position: absolute;
            background:url(images/icon_v9.png) no-repeat 0 0px;
            width: 30px;
            height: 35px;
            top: 50%;
            left: 10px;
            margin-top: -17px;
            cursor: pointer;
        }

        span.right_btn{
            position: absolute;
            background:url(images/icon_v9.png) no-repeat 0 -44px;
            width: 30px;
            height: 35px;
            top: 50%;
            right: 10px;
            margin-top: -17px;
            cursor: pointer;
        }

    </style>
    
    <div class="carouse1">
        <img src="images/bidong.jpg" alt="" />
        <span class="left_btn"></span>
        <span class="right_btn"></span>
        <p>花样秀性感!美女劈腿壁咚秀逆天好身材</p>
    </div>

3.固定定位

position:fixed;

固定定位脱标，参考点是浏览器的角。

随着窗口的卷动，固定定位的元素不会在视口中消失。

position:fixed;

固定定位的参考点一定是浏览器，我们无法让一个盒子当做fixed定位的参考点。

至此我们已经全部学习了脱标的3种方法：

浮动、绝对定位、固定定位
这三种脱标的方法，只能有一种作用在同一个元素身上。不存在一个元素同时浮动、同时绝对定位的情况。

我们给一个父亲overflow:hidden; 这个时候父亲就能认识浮动儿子的高度了，就能被儿子撑高了。

但是，绝对定位、固定定位的儿子，父亲永远不可能被他们撑高！

z-index属性

负责设置压盖顺序，谁压盖谁的问题。

先说的默认的压盖顺序：
1）定位了的能够压住没有定位的；
2）如果都定位了，那么HTML顺序后面的能够压住前面的；

<div class="box1">1</div>  → 没有定位
<div class="box2">2</div>  → 绝对定位
<div class="box3">3</div>  → 相对定位

3压住2和1； 2压住1

z-index没有单位，数字大的能够压住数字小的。
z-index: 5;

只有定位了的元素才能写z-index值。标准流的元素不能写z-index值，浮动的元素不能写z-index。

从父现象：父亲怂了，儿子再牛逼也没用。

<div class="linzhiying">   →  z-index:9;
    <p class="kimi"></p>  → z-index:100000;
</div>

<div class="wangjianlin">   → z-index:10;
    <p class="wangsicong"></p> → z-index:无论是多少肯定能压住kimi因为父亲z-index大
</div>