首頁 > 博客列表 > 偽類選擇器與盒模型

博主信息

博文 38

粉絲 0

評論 0

訪問量 30740

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

最新下載

更多>

網(wǎng)站特效

網(wǎng)站源碼

網(wǎng)站素材

前端模板

偽類選擇器與盒模型

一個好人

原創(chuàng)

676人瀏覽過

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="fake.css">
    <title>結(jié)構(gòu)偽類選擇器及權(quán)重</title>
</head>
<body>
    <ul class="list">
        <li class="item">item1</li>
        <li class="item">item2</li>
        <li class="item">item3</li>
        <li class="item">item4</li>
        <li class="item">item5</li>
        <li class="item">item6</li>
        <li class="item">item7</li>
        <li class="item">item8</li>
        <li class="item">item9</li>
        <li class="item">item10</li>
    </ul>
</body>
</html>

權(quán)重對比：
ul{
    background: lightblue;
}
body ul{
    background-color: beige;
}
html body ul.list#title{
    background-color: lightcoral;
}
結(jié)構(gòu)偽類：
.list>.item:nth-child(-n+4){
    background-color: yellow;
}
.list>.item:nth-child(3n+1){
    background-color: gray;
}
.list>.item:first-child{
    background-color: violet;
}
.list>.item:last-child{
    background-color: green;
}
.list>.item:nth-last-child(3){
    background-color: lightgray;
}

結(jié)構(gòu)偽類選擇器及權(quán)重

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>狀態(tài)偽類選擇器</title>
    <link rel="stylesheet" href="status.css" />
</head>
<body>
    <form action="register.php" method="post">
        <fieldset class="login" style="display: inline-grid; gap: 1em">
            <legend class="title">新用戶注冊</legend>
            <div class="username">
                <label for="uname">用戶名</label>
                <input type="text" id="uname" name="uname" value="" placeholder="請輸入用戶名(不少于6位)" required autofocus>
            </div>
            <div class="email">
                <label for="email">郵箱：</label>
                <input type="email" name="email" id="email" placeholder="username@email.com">
            </div>
            <div class="sex">
                <label for="male">性別：</label>
                <!-- input.type中的name是提交到服務(wù)器的 -->
                <input type="radio" name="sex" value="male" id="male" checked><label for="male">男</label>
                <input type="radio" name="sex" value="female" id="female"><label for="female">女</label>
                <input type="radio" name="sex" value="secret" id="secret"><label for="secret">保密</label>
            </div>
            <button class="submit">提交</button>
        </fieldset>
    </form>
</body>
</html>

.login :focus {
    outline: 1px solid red;
    border: none;
  }
  .login :required {
    background-color: lightgoldenrodyellow;
  }
  .login :checked + label {
    color: red;
  }
  .login > .submit:hover {
    cursor: pointer;
    background-color: gold;
    color: white;
  }

狀態(tài)偽類選擇器
盒模型

總結(jié)：

本次課學的狀態(tài)偽類選擇器挺常用的，可以大大提高用戶體驗；權(quán)重部分的內(nèi)容比較簡單，放在結(jié)構(gòu)偽類選擇器中一起驗證了；容器用過，但沒用好，基本都是width100%，學了盒模型布局網(wǎng)頁的框架就有了。

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

開通PHP中文網(wǎng)博客第一天

2023-03-08 14:59:36

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

總結(jié)：