08_CSS入門和高級技巧(6)

時間  2019-11-20
標籤 css 入門 高級 技巧 欄目 CSS 简体版
原文   原文鏈接

排查錯誤

Chrome瀏覽器的審查功能。
錯誤1：選擇器寫錯了，壓根沒有選擇上；
若是寫了一個錯誤的選擇器， css

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

Chrome審查一下，就能看見沒有任何選擇器選擇上這個元素：
Chrome審查html

錯誤的寫class：web

<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、970pxui

padding這個東西，是不可以擠背景圖片的，由於padding區域也能有背景，背景圖也能渲染在padding裏。url

到底用<img src=」」 />插入， 仍是backgrond:url(); ， 要看這個圖片是內容的一部分仍是雜碎、起裝飾做用的圖片。

定位

CSS中重要的東西就三個：盒模型、浮動、定位。這三個技術，就是負責網頁的佈局的。

其他的技術，都是雜碎：background、文字、顏色表示法……

1.相對定位

position:relative;相對本身進行微調
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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程