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

搜索

微信公眾號

首頁文章專題 AI工具學(xué)習(xí) 編程手冊下載最近更新

文章 web3.0 后端開發(fā) web前端數(shù)據(jù)庫開發(fā)工具 php框架常見問題科技 Java 系統(tǒng)教程電腦教程硬件教程手機(jī)教程軟件教程游戲教程自媒體新聞

專題后端開發(fā) web前端數(shù)據(jù)庫開發(fā)工具 php框架科技 Java 系統(tǒng)教程電腦教程硬件教程手機(jī)教程軟件教程游戲教程新聞

AI工具 AI 聊天問答 Agent智能體 AI 文本寫作 AI 繪畫作圖 AI 設(shè)計(jì)工具 AI 視頻創(chuàng)作 AI 音頻制作 AI 辦公學(xué)習(xí) AI 編程開發(fā) Prompt指令

學(xué)習(xí) 大前端后端開發(fā) 數(shù)據(jù)庫移動端運(yùn)維開發(fā) UI設(shè)計(jì) 計(jì)算機(jī)基礎(chǔ)

編程手冊大前端 JavaScript 后端開發(fā) 數(shù)據(jù)庫移動端運(yùn)維開發(fā) UI設(shè)計(jì) 計(jì)算機(jī)基礎(chǔ) XML Web Services

下載 js特效網(wǎng)站源碼工具下載類庫下載網(wǎng)站素材學(xué)習(xí)資源插件擴(kuò)展手機(jī)/移動開發(fā) 手機(jī)游戲

購物車

效果圖

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            text-align: center;
            width: 50%;
            margin: 0 auto;
            border-collapse: collapse;
        }
        table>caption {
            margin-bottom: 20px;
            font-size: 1.5rem;
        }
        th,
        td {
            border-bottom: 1px solid rgb(99, 99, 99);
            padding: 10px 0;
            color: #4e4e4e;
            font-weight: lighter;
        }
        tbody>tr:nth-last-of-type(2n) {
            background: rgba(194, 194, 194, .2);
        }
        tbody>tr:hover {
            background: lightpink;
        }
        table>thead {
            background: rgba(0, 129, 168, .1);
        }
    </style>
</head>
<body>
    <table>
        <caption>清單</caption>
        <thead>
            <tr>
                <th>ID</th>
                <th>商品名稱</th>
                <th>數(shù)量</th>
                <th>價(jià)格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>羅技（Logitech）M185</td>
                <td>1</td>
                <td>59</td>
            </tr>
            <tr>
                <td>2</td>
                <td>羅技（Logitech）MK275</td>
                <td>1</td>
                <td>100</td>
            </tr>
            <tr>
                <td>3</td>
                <td>技嘉(GIGABYTE)RTX2070</td>
                <td>1</td>
                <td>6600</td>
            </tr>
            <tr>
                <td>4</td>
                <td>戴爾（DELL）U2720QM</td>
                <td>1</td>
                <td>4200</td>
            </tr>
            <tr>
                <td>5</td>
                <td>英特爾（Intel）i9-10900K</td>
                <td>1</td>
                <td>4499</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">總計(jì):</td>
                <td>5</td>
                <td>15517</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表單實(shí)現(xiàn)

效果圖

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .reg {
            width: 30%;
            margin: 0 auto;
            background: #e6e6e6;
            border-radius: 10px;
            margin-top: 30px;
        }
        h1 {
            font: 1.2rem;
            padding: 10px;
            display: block;
            text-align: center;
            color: #FFF;
            background: #008079;
            border-radius: 5px 5px 0px 0px;
            border-bottom: 1px solid #89AF4C;
            margin-bottom: 20px;
        }
        input,
        button {
            outline: none;
        }
        textarea {
            width: 100%;
            border: 1px solid #e6e6e6;
            margin-bottom: 15px;
            border-radius: 5px;
            padding-left: 10px;
            margin-top: 10px;
            padding-top: 15px;
        }
        input[type="search"],
        input[type="email"],
        input[type="text"] {
            width: 80%;
            height: 40px;
            line-height: 40px;
            border: 1px solid #e6e6e6;
            margin-bottom: 15px;
            border-radius: 5px;
            padding-left: 10px;
        }
        textarea:focus,
        input[type="search"]:focus,
        input[type='email']:focus,
        input[type='text']:focus {
            border-color: #66afe9;
            outline: 0;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
        }
        .reg-form {
            padding: 20px;
        }
        label>span {
            display: inline-block;
            width: 84px;
        }
        .radio_type {
            width: 20px;
            height: 20px;
            appearance: none;
            position: relative;
        }
        .radio_type:before {
            content: '';
            width: 20px;
            height: 20px;
            display: inline-block;
            border-radius: 50%;
        }
        .radio_type:checked:before {
            content: '';
            width: 20px;
            height: 20px;
            border: 1px solid #008079;
            background: #008079;
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
        }
        .radio_type:checked:after {
            content: '';
            width: 10px;
            height: 5px;
            border: 2px solid white;
            border-top: transparent;
            border-right: transparent;
            text-align: center;
            display: block;
            position: absolute;
            top: 6px;
            left: 5px;
            vertical-align: middle;
            transform: rotate(-45deg);
        }
        .radio_type:checked+label {
            color: #008079;
        }
        .radio_type+label {
            line-height: 20px;
            display: inline-block;
            margin-left: 5px;
            margin-right: 15px;
            color: #333;
        }
        .mb15 {
            margin-bottom: 15px;
        }
        input[type="checkbox"] {
            width: 20px;
            height: 20px;
        }
        button,
        input[type="submit"],
        input[type="reset"] {
            padding: 15px 30px;
            border: none;
            background: #008079;
            color: #fff;
            border-radius: 5px;
            margin-left: 15px;
        }
        .btn {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="reg">
        <h1>注冊</h1>
        <form action="" method="post" class="reg-form">
            <label for="uname">
                <span> 賬號：</span> <input type="text" id="uname" name="uname" placeholder="5-10位中文或字母" required>
            </label>
            <label for="pwd">
                <span> 密碼：</span> <input type="text" id="pwd" name="pwd" placeholder="6-20位字母+數(shù)字" required>
            </label>
            <label for="repwd">
                <span> 確認(rèn)密碼：</span> <input type="text" id="repwd" name="repwd" placeholder="確認(rèn)密碼" required>
            </label>
            <label for="email">
                <span> 郵箱：</span> <input type="email" id="email" name="email" placeholder="example@example.com" required>
            </label>
            <div class="mb15">
                <label for="male"> <span>性別:</span></label>
                <input class="radio_type" type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
                <input class="radio_type" type="radio" name="gender" value="2" id="female"><label for="female ">女</label>
            </div>
            <div class="mb15">
                <label for="other"><span>愛好:</span></label>
                <input type="checkbox" name="checkboox[]" id="basketball" value="basketball"> <label for="basketball">籃球</label>
                <input type="checkbox" name="checkboox[]" id="shoot" value="shoot"> <label for="shoot">攝影</label>
                <input type="checkbox" name="checkboox[]" id="other" value="other"> <label for="other">其他</label>
            </div>
            <div class="mb15">
                <label for="brand"><span>手機(jī)品牌:</span> </label>
                <input type="search" list="phone" name="brand" id="brand">
                <datalist id="phone">
                    <option value="apple">
                    <option value="huawei">
                    <option value="mi">
                </datalist>
            </div>
            <div class="mb15">
                <label for="upload"><span>頭像上傳:</span> </label>
                <input type="file" name="upload" id="upload" accept="image/png, image/jpeg, image/gif">
            </div>
            <div class="mb15">
                <p>
                    <label for="birthday"><span>生日:</span></label>
                    <input type="date" id="birthday" name="birthday">
                </p>
            </div>
            <div class="mb15">
                <label for="birthday"><span>簡歷:</span></label>
                <textarea name="resume" id="resume" cols="50" rows="10" placeholder="不超過100字"></textarea>
            </div>
            <div class="btn">
                <button>提交</button>
                <input type="submit" value="注冊" name="submit">
                <input type="reset" value="重填" name="reset">
            </div>
        </form>
    </div>
</body>
</html>