【原】HTML第三課——css【3】

孟船長 2022-02-24

展開全文

上一節(jié)我們講了display的inline-block屬性,，但是我們在工作中很少用,，因為這個屬性對于IE7版本以下IE瀏覽器不兼容。我們一般用float: left代替,。

display的屬性none

lesson3.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Css</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <div>這是div</div>
    <div>這是div</div>
    <span>這是span標(biāo)簽</span>
    <span>這是span</span>
</body>
</html>

index.css

/*
    px:意為像素;
*/

div{
    width: 100px;    
    height: 50px;    
    /*background-image: url("../imgs/pic.png");*/
    border: 1px solid #0000ff;    
    display: none;
}

span{
    width: 100px;    
    height: 50px;    
    /*background-image: url("../imgs/pic.png");*/
    border: 1px solid #0000ff;    
    display: inline-block;
}

上面代碼我們把div的div屬性設(shè)為none,，我們發(fā)現(xiàn)兩個div標(biāo)簽不見了，這個屬性什么時候用呢,？我們看一下天貓：

這個手機(jī)二維碼只有我們將光標(biāo)移動上去的時候二維碼才會顯示,，我們看一下它的代碼：

當(dāng)我們把光標(biāo)移上去的時候發(fā)現(xiàn)這個display: none不見了。這就是這個屬性的作用了,。

最后來總結(jié)一下display的屬性

block 占用一行
inline 只占用自己需要的但不能設(shè)置寬和高
inline-block 可以設(shè)置寬和高
none 隱藏

其實display屬性還有很多,，但我們只需要記住這四個就夠啦~~~

現(xiàn)在我們來實踐一下我們學(xué)過的知識：

做一個光標(biāo)移動上去以后顯示二維碼的案例：

lesson3.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Css</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <a class="des" href="#">船長公眾號</a>
    <div class="qrcode"></div>
</body>
</html>

index.css

a.des{
    color: #bbbbbb; /*字體顏色設(shè)為灰色*/
    text-decoration: none; /*設(shè)置文字描述(順便去掉超鏈接的下劃線)*/
    font-size: 15px; /*設(shè)置字體大小*/
}

/*設(shè)置偽類:只有當(dāng)光標(biāo)移上去時才會觸發(fā)*/
a.des:hover{ /*注意：不要隨便加空格，這里a.pic:hover是沒有空格的*/
    color: #c40000;    
    text-decoration: underline; /*設(shè)置下劃線*/
}

/*設(shè)置圖片*/
div.qrcode{
    width: 129px; /*圖片寬*/
    height: 129px; /*圖片高*/
    background-image: url("../imgs/qrcode.bmp"); /*通過相對路徑添加圖片*/
    border: 1px solid #bbbbbb; /*設(shè)置圖片邊框*/
    display: none; /*設(shè)置圖片不顯示*/
}

到目前為止顯示：

看一下代碼,，其實圖片已經(jīng)存在,，知識不顯示：

現(xiàn)在我們要完成鼠標(biāo)移上去后再顯示圖片，其實這里可以用js實現(xiàn),，但現(xiàn)在還沒講,，所以我們用css的方式，為了達(dá)到效果,，我們把上面代碼里的div標(biāo)簽放到a標(biāo)簽里：

lesson3.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Css</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <a class="des" href="#">船長公眾號
        <div class="qrcode"></div>
    </a>
</body>
</html>

index.css

a.des{
    color: #bbbbbb; /*字體顏色設(shè)為灰色*/
    text-decoration: none; /*設(shè)置文字描述(順便去掉超鏈接的下劃線)*/
    font-size: 15px; /*設(shè)置字體大小*/

}

/*設(shè)置偽類:只有當(dāng)光標(biāo)移上去時才會觸發(fā)*/
a.des:hover{ /*注意：不要隨便加空格,，這里a.pic:hover是沒有空格的*/
    color: #c40000;
    text-decoration: underline; /*設(shè)置下劃線*/

}

/*設(shè)置圖片*/
a.des div.qrcode{
    width: 129px; /*圖片寬*/
    height: 129px; /*圖片高*/
    background-image: url("../imgs/qrcode.bmp"); /*通過相對路徑添加圖片*/
    border: 1px solid #bbbbbb; /*設(shè)置圖片邊框*/
    display: none; /*設(shè)置圖片不顯示*/
}

/*設(shè)置鼠標(biāo)移上去后顯示圖片*/
a.des:hover div.qrcode{
    display: block;
}

鼠標(biāo)不移上去：

鼠標(biāo)移上去以后：

我們接著寫一些樣式,，類似：

lesson3.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Css</title>
    <meta name="keywords" content="key1, key2">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <a class="des" href="#">船長公眾號
        <div class="qrcode"></div>
    </a>
    <div class="menu">
        <div class="title">孟船長的公眾號</div>
        <ul class="items">
            <li>Selenium自動化</li>
            <li>接口測試</li>
            <li>Robot Framework</li>
        </ul>
    </div>
</body>
</html>

index.css

/*先不用管,，下節(jié)課講
這里的作用是讓ul li那里沒有左邊的空白*/
*{
    margin: 0px;    
    padding: 0px;
}

a.des{
    color: #bbbbbb; /*字體顏色設(shè)為灰色*/
    text-decoration: none; /*設(shè)置文字描述(順便去掉超鏈接的下劃線)*/
    font-size: 15px; /*設(shè)置字體大小*/
}

/*設(shè)置偽類:只有當(dāng)光標(biāo)移上去時才會觸發(fā)*/
a.des:hover{ /*注意：不要隨便加空格,，這里a.pic:hover是沒有空格的*/
    color: #c40000;
    text-decoration: underline; /*設(shè)置下劃線*/
}

/*設(shè)置圖片*/
a.des div.qrcode{
    width: 129px; /*圖片寬*/
    height: 129px; /*圖片高*/
    background-image: url("../imgs/qrcode.bmp"); /*通過相對路徑添加圖片*/
    border: 1px solid #bbbbbb; /*設(shè)置圖片邊框*/
    display: none; /*設(shè)置圖片不顯示*/
}

/*設(shè)置鼠標(biāo)移上去后顯示圖片*/
a.des:hover div.qrcode{
    display: block;
}

/*設(shè)置下面內(nèi)容的樣式*/
div.menu{
    width: 190px;
    /*
        下面的代碼會繼承此標(biāo)簽里的屬性，這樣下面所有標(biāo)簽里的字體和大小都會保持一致
        避免代碼冗余
    */
    font-family: "Microsoft Yahei"; /*設(shè)置文字字體*/
    font-size: 15px; /*文字大小*/
}

div.menu div.title{
    width: 100%; /*適應(yīng)上面的190px,，這樣寫改的時候只需要修改上面的高度即可*/
    height: 35px; /*高*/
    background-color: #c40000; /*背景顏色*/
    color: #fff; /*字體顏色*/
    text-align: center; /*文本水平居中*/
    line-height: 35px; /*文本單行垂直居中,，與height值一致才是垂直居中*/
    font-weight: bold; /*文字加粗*/
}

div.menu ul.items{
    list-style: none; /*讓ul標(biāo)簽沒有前面的點*/
}

div.menu ul.items li{
    height: 33px;    
    background-color: #666;    
    color: #fff;
}

/*當(dāng)鼠標(biāo)移上去以后文字背景變色*/
div.menu ul.items li:hover{
    background-color: #c20fff;
}