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

導(dǎo)航條

<header>
        <nav>
            <a href="">首頁</a>
            <a href="">社區(qū)</a>
            <a href="">挪車</a>
            <a href="">視頻</a>
            <a href="">福利</a>
        </nav>
    <a href="/form.html"><button>登錄</button></a>
    </header>
     <style>
        header {
            height: 50px;
            background-color: black;
            padding: 0 2em;
            display: flex;
            place-content: space-between;
        }
        nav {
            display: flex;
            text-align: center;
            line-height: 50px;
        }
        nav a {
            min-width: 5em;
            color: floralwhite;
            text-decoration: none;
            flax: 1;
        }
        nav a:hover{
            color: red;
            background-color: chartreuse;
            transition: 0.3s;
        }
        header a button:last-child{
            border: none;
            width: 3em;
            height: 2em;
        }
        header a button:hover{
            color: chartreuse;
            background-color: blue;
            transition: 0.3s;
        }
    </style>

• 效果圖

  登錄頁面

  <form action="" method="post">
        <fieldset style="display: inline-grid; gap: 1em">
            <legend style="text-align: center;">用戶注冊</legend>
            <div class="username">
                <label for="">用戶名:</label>
                <!-- type="text":單行文本框 -->
                <!-- autofocus:頁面初始化/加載成功時,焦點自動落入。 -->
                <!-- required:必填項,不寫不能提交 -->
                <input type="text" id="username" name="username" value="" placeholder="不少于六位數(shù)" autofocus required>
            </div>
            <div class="password">
                <label for="">密&nbsp &nbsp碼:</label>
                <input type="password" id="password" name="password" value="">
            </div>
            <div class="code">
                <label for="code">驗證碼:</label>
                <input type="text" id="code" name="code">
            </div>
            <button>提交</button>
        </fieldset>
    </form>

• 登錄頁面

  Gird屬性

  <div class="grid1">
  <div class="grid2">屬性演示</div>
    </div>
    <style>
        .grid1 {
            height: 150px;
            width: 300px;
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 50px 50px 50px;
        }
        .grid1 > .grid2{
            background-color: chartreuse;
            /* grid-row: 2 / 3;
            grid-column: 2 / 3 ; */
            1.grid-area: 1 / 1 / span 1 / span 3; 
            2.grid-area: 1 / 1 / 2 / 4; 
        }
    </style>

• 1.效果圖
• 2.效果圖

批改老師：PHPz

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

老師批語：作業(yè)標題最好不要使用日期，可以根據(jù)作業(yè)內(nèi)容來取