精靈圖

時間 2019-11-16

標籤精靈简体版

原文原文鏈接

盒子總結

'''
block:
默認寬高
1.沒有設置寬, 寬自適應父級的寬(子級的border+padding+width = 父級的width)
2.沒有設置高, 高由內容撐開

設置了寬高
必定採用設置的寬高

顯示寬高
border+padding+content

自身佈局(經過調節如下兩個參數進行佈局)
margin-top | margin-left

兄弟佈局(經過調節如下兩個參數進行佈局)
margin-bottom | margin-right

父級水平居中
margin: 0 auto; | margin-left:auto;&margin-right:auto;

與inline相關的盒子
vertical-align
'''

字體設置

'''
text-align: center; # 字體水平居中方式
color: red; # 字體顏色
font: 900 30px/120px "STSong"; # 字重 大小/行高 字族

# 瞭解
# em(自身->父->html) | rem(html)
text-indent: 2em;    字體縮進

# 字劃線
# underline | line-through | overline   下劃線|中劃線|上劃線
eg： text-decoration: overline;
'''

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>字體案例</title>
    <style>
        /* 清除系統默認樣式 => reset操做 */
        /*h2, p, h3 {*/
            /*margin: 0;*/
        /*}*/
        .box {
            width: 800px;
            border-bottom: 1px solid #999;
            margin: 0 auto;
            text-align: center;
            padding: 20px 0;
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>領先的 Web 技術教程 - 所有免費</h2>
        <p>在 w3school，你能夠找到你所須要的全部的網站建設教程。</p>
        <p>從基礎的 HTML 到 CSS，乃至進階的 XML、SQL、JS、PHP 和 ASP.NET。</p>
        <h3>從左側的菜單選擇你須要的教程！</h3>
    </div>
</body>
</html>

View Code

reset操做

# what|why: 大多系統預約義標籤, 有默認樣式, 不知足實際開發需求, 反倒影響佈局, 一般在開發前, 將須要用到的預約義標籤的默認樣式清除, 該操做就稱之爲 reset操做

'''
body, h1, h6, p {
    margin: 0;
}
ul {
    margin: 0px;
    padding: 0;
    list-style: none;
}
a {
    text-decoration: none;
    color: black;
}
'''

高級選擇器

'''
1.羣組
div, p, a {

}

2.後代  >表明父子關係 | 空格表明後代關係 
body div {

}
# div能夠是body的子級標籤，也能夠是body子級標籤的子級標籤
3.兄弟  經過關係層次控制一個目標選擇器
.div1 ~ .div2 {

}
被控制的標籤爲最後一個，其他標籤不受選擇器的影響
4.位置
li:nth-child(2n)：控制全部的列表ul選項 有效位置爲1,3,5....
ul:nth-child(10) > li:nth-child(2n)：控制單個列表（第一個列表）的有效位置（1,3,5....）改變，若是將2n變爲具體數字則變成控制具體位置改變。

5.多類   即一個標籤含有兩個或兩個以上的類名
.d.dd {

}
'''

高級選擇器優先級

"""
優先級和個數(權重)相關
基礎選擇器優先級佔主導: id 無限大於 class 無限大於 標籤
選擇器優先級相同時, 和順序有關
高級選擇器類型不會影響優先級
僞類選擇器至關於class
"""

邊界圓角

/*左上爲第一個角, 順時針賦值, 不足找對角*/
/*border-radius: 30px 60px;*/

/*border-radius: 150px;*/
/*border-radius: 50%;*/

/*橫向第一個角50px, 第二個角10px, 不足找對角*/
/*縱向均是150px*/
border-radius: 50px 10px / 150px;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>邊界圓角</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        div {
            /*左上爲第一個角, 順時針賦值, 不足找對角*/
            /*border-radius: 30px 60px;*/

            /*border-radius: 150px;*/
            /*border-radius: 50%;*/

            /*橫向第一個角50px, 第二個角10px, 不足找對角*/
            /*縱向均是150px*/
            border-radius: 50px 10px / 150px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

View Code

a的四大僞類

'''
:link  連接初始狀態 
:hover  鼠標懸浮狀態 *****
:visited  連接訪問後的狀態 
:active  鼠標按下時的狀態 ***
'''

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a的四大僞類</title>
    <style>
        /*連接初始狀態 | 鼠標懸浮狀態 | 連接訪問後的狀態 | 鼠標按下時的狀態*/
        /*a:link {*/
            /*color: black;*/
        /*}*/

        /*a:hover {*/
            /*cursor: pointer;*/
        /*}*/

        /*a:visited {*/
            /*color: yellow;*/
        /*}*/

        /*a:active {*/
            /*color: green;*/
        /*}*/
        /*鼠標懸浮狀態 | 鼠標按下時的狀態*/
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        div:hover {
            background-color: yellowgreen;
            cursor: pointer;
        }

        div:active {
            background-color: red;
        }

    </style>

    <style>
        body {
            margin: 0;
            user-select: none;
        }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a {
            color: black;
            text-decoration: none;
        }
        h3 {
            margin: 0;
        }

        .ul1 {
            /*border: 1px solid black;*/
            padding: 20px 0 15px 10px;
            width: 180px;
        }
        .ul1 h3 {
            font-size: 16px;
        }
        .ul1 li {
            text-indent: 10px;
            font-size: 14px;
        }
        .ul1 li:hover {
            background-color: #666;
        }
        .ul1 li:hover > a {
            color: white;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">標籤a</a>
<div></div>

View Code

背景圖片之精靈圖

'''
div {
    background: url("img/bg.png") no-repeat 10px 20px;
    圖片地址 不平鋪 x軸偏移 y軸偏移
}
精靈圖操做本質: 控制背景圖片的位置
backgroud-position-x
backgroud-position-y
div:hover {
    backgroud-position-y: -20px;
}
'''

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>背景圖片</title>
    <style>

        .div {
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
        .div {
            background-image: url("img/001.png");
            /*平鋪: repeat-x | repeat-y | repeat | no-repeat*/
            background-repeat: no-repeat;
            /*背景圖片位置*/
            /*水平: left|center|right  垂直:top|center|bottom*/
            background-position: -200px 50px;
        }
        .div:hover {
            transition: 2s;
            background-position-x: center;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>

背景圖片案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>精靈圖</title>
    <style>
        a {
            color: #333;
            text-decoration: none;
        }
        h1 {
            width: 500px;
            height: 100px;
            border: 1px solid black;
        }
        h1 a {
            width: 500px;
            height: 100px;
            display: block;
            background-color: yellow;

            background: url("img/bg.png") no-repeat 0 -150px;
        }
        h1 a:hover {
            background-position-y: -250px;
        }
    </style>
    <style>
        .li {
            width: 157px;
            height: 48px;
            border: 1px solid black;
            background: url("img/bg.png") no-repeat -155px 0;
        }
        .li:hover {
            cursor: pointer;
            background-position-y: -48px;
        }
    </style>
</head>
<body>
<h1><a href=""></a></h1>

<div class="li"></div>

</body>
</html>

精靈圖片案例

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。