From 88f2d3b2d9201b8c522291078f23105ed77a0d8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E6=B5=99=E9=BE=99?= <2046776558@qq.com>
Date: Mon, 13 Dec 2021 16:24:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...\346\210\267\346\263\250\345\206\214.html" |  60 +++++++++++
 ...\346\210\267\346\263\250\345\206\214.html" |  99 +++++++++++++++++
 ...\346\210\267\344\277\241\346\201\257.html" |  38 +++++++
 .../\346\263\250\345\206\214.html"            |  34 ++++++
 .../demo01.html"                              | 100 ++++++++++++++++++
 .../demo.html"                                |  77 ++++++++++++++
 .../switch.html"                              |  74 +++++++++++++
 7 files changed, 482 insertions(+)
 create mode 100644 "\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\344\270\252\344\272\272\350\264\246\346\210\267\346\263\250\345\206\214.html"
 create mode 100644 "\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\344\274\201\344\270\232\350\264\246\346\210\267\346\263\250\345\206\214.html"
 create mode 100644 "\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\345\256\242\346\210\267\344\277\241\346\201\257.html"
 create mode 100644 "\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\346\263\250\345\206\214.html"
 create mode 100644 "\346\236\227\346\265\231\351\276\231/211209--CSS\346\225\210\346\236\234/demo01.html"
 create mode 100644 "\346\236\227\346\265\231\351\276\231/211210\342\200\224CSS\346\212\200\345\267\247/demo.html"
 create mode 100644 "\346\236\227\346\265\231\351\276\231/211210\342\200\224CSS\346\212\200\345\267\247/switch.html"
diff --git "a/\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\344\270\252\344\272\272\350\264\246\346\210\267\346\263\250\345\206\214.html" "b/\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\344\270\252\344\272\272\350\264\246\346\210\267\346\263\250\345\206\214.html"
new file mode 100644
index 0000000..e15d7ee
--- /dev/null
+++ "b/\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\344\270\252\344\272\272\350\264\246\346\210\267\346\263\250\345\206\214.html"
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+   div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+        margin-top: 30px;
+        margin-left: 15px;
+    }
+    /* 清除input默认样式 */
+    input{
+        outline: none;
+        border:1px solid #eee;
+        width: 300px;
+        height: 35px;
+    }
+    /* 修改为自己的样式 */
+    /* 设置获取焦点时的变化 */
+    input:focus {
+        border: 1px solid red;
+    }
+
+    div::before {
+        content: "*";
+        color: red;
+    }
+</style>
+<body>
+    <form>
+        <div required>
+            <label for="name"> 会员名：<input type="text" name="vipname" placeholder="设置会员名" pattern="^[a-zA-Z0-9]{5,25}+$" title="5-25个字符包含字母或汉字"></label>
+         </div>
+         <div required>
+             <label for="password"> 登陆密码：<input type="password" name="password" placeholder="设置你的登录密码" pattern="^[a-zA-Z0-9]{6,20}+$" ></label>
+         </div>
+         <div required>
+             <label for="password">密码确认：<input type="password" name="password" placeholder="请再次输入你的登陆密码" ></label>
+         </div>
+         <div required>
+            手机号码:
+            <input list="phonelist">
+            <datalist id="phonelist">
+                <option value="中国大陆   +86" checked="checked"></option>
+                <option value="中国香港  +852"></option>
+                <option value="中国澳门  +853"></option>
+                <option value="中国西班牙 +351"></option>
+                <option value="中国葡萄牙 +146"></option>
+            </datalist>
+                <input type="tel" name="phone" required>
+        </div>
+       
+    </form>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\344\274\201\344\270\232\350\264\246\346\210\267\346\263\250\345\206\214.html" "b/\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\344\274\201\344\270\232\350\264\246\346\210\267\346\263\250\345\206\214.html"
new file mode 100644
index 0000000..5b9a2c7
--- /dev/null
+++ "b/\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\344\274\201\344\270\232\350\264\246\346\210\267\346\263\250\345\206\214.html"
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<style>
+    div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 30px;
+        margin-left: 15px;
+    }
+    /* 清除input默认样式 */
+    input{
+        outline: none;
+        border:1px solid #eee;
+        /* width: 300px;
+        height: 35px; */
+    }
+    /* 修改为自己的样式 */
+    /* 设置获取焦点时的变化 */
+    input:focus {
+        border: 1px solid red;
+    }
+
+    div::before {
+        content: "*";
+        color: red;
+    }
+    .net-radio input{
+        width: 16px !important;
+        height: 16px !important;
+    }
+    .net-radio{
+        margin-left: 20px;
+    }
+</style>
+
+<body>
+    <form action="#" method="POST">
+            <div required>
+                <label for="name"> 会员名：<input type="text" name="vipname" placeholder="设置会员名"
+                        pattern="^[a-zA-Z0-9]{5,25}+$" title="5-25个字符包含字母或汉字"></label>
+            </div>
+            <div required>
+                <label for="password"> 登陆密码：<input type="password" name="password" placeholder="设置你的登录密码"
+                        pattern="^[a-zA-Z0-9]{6,20}+$" title="6-20位字母和汉字"></label>
+            </div>
+            <div required>
+                <label for="password">密码确认：<input type="password" name="password" placeholder="请再次输入你的登陆密码"></label>
+            </div>
+            <div required>
+                <label for="realname">联系人姓名：<input type="text" name="realname" placeholder="请输入真实姓名"></label>
+            </div>
+            <div required>
+                <label for="companyname">企业名称：<input type="text" name="companyname" placeholder="请输入营业执照上的公司名称"></label>
+            </div>
+            <div required>
+                <span class=".net-radio">
+                    贸易身份：
+                    <input type="radio"  name="select" value="销售" style="width: 17px;
+                    height: 17px;">我要销售
+                    <input type="radio"  name="select" value="采购" style="width: 17px;
+                    height: 17px;">我要采购
+                    <input type="radio"  name="select" value="全选" style="width: 17px;
+                    height: 17px;">两者都是
+                </span>
+            </div>
+            <div required>
+                手机号码:
+                <input list="phonelist">
+                <datalist id="phonelist">
+                    <option value="中国大陆   +86" checked="checked"></option>
+                    <option value="中国香港  +852"></option>
+                    <option value="中国澳门  +853"></option>
+                    <option value="中国西班牙 +351"></option>
+                    <option value="中国葡萄牙 +146"></option>
+                </datalist>
+                <input type="tel" name="phone" required>
+            </div>
+            <!-- 验证码：
+            <input type="checkbox">创建账号我同意遵守：
+            《阿里巴巴服务条款》及《隐私声明》
+            <br />
+            <div
+                style="width: 130px; height: 35px; background-color: orange; font-size: 20px; color: #fff; margin-left: 25px;">
+                同意并注册
+            </div> -->
+
+
+    </form>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\345\256\242\346\210\267\344\277\241\346\201\257.html" "b/\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\345\256\242\346\210\267\344\277\241\346\201\257.html"
new file mode 100644
index 0000000..61f5b49
--- /dev/null
+++ "b/\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\345\256\242\346\210\267\344\277\241\346\201\257.html"
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <form autocomplete="on">
+        <fieldset>
+            <legend>顾客信息</legend>
+            姓名：<input type="text" name="username" placeholder="请输入你的名字" autofocus required>
+            <br/><br/>
+            手机号:<input type="tel" name="userphone" placeholder="例如：15392191830" pattern="^[1][3,4,5,7,8,9][0-9]{9}$" autocomplete="off" required>
+            <br/><br/>
+            邮箱地址:<input type="email" name="useremail" placeholder="请输入邮箱地址" required>
+            <br/><br/>
+        </fieldset>
+    </form>
+    <form autocomplete="on">
+        <fieldset>
+            <legend>书籍信息</legend>
+            书籍名称：
+            <input list="booklist">
+            数量(最大值：5)：
+            <input type="number" min="1" max="5" name="quantity">
+            <!-- <input type="number" step="5"> -->
+            <datalist id="booklist">
+                <option value="小王子"></option>
+                <option value="简爱"></option>
+                <option value="瓦尔登湖"></option>
+                <option value="钢铁是怎样炼成的"></option>
+            </datalist>
+        </fieldset>
+    </form>
+    <input type="submit" value="提交">
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\346\263\250\345\206\214.html" "b/\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\346\263\250\345\206\214.html"
new file mode 100644
index 0000000..d642576
--- /dev/null
+++ "b/\346\236\227\346\265\231\351\276\231/211202--H5\350\241\250\345\215\225\345\205\203\347\264\240/\346\263\250\345\206\214.html"
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<style>
+    li{
+        list-style: none;
+        padding: 15px;
+    }
+    a{
+        text-decoration: none;
+    }
+    .zhuce{
+        width: 200px;
+        height: 50px;
+        background-color: orange;
+        margin: 0 auto;
+    }
+</style>
+<body>
+    <div class="zhuce">
+        <ul>
+            <li>
+                <a href="个人账户注册.html">个人</a>
+                <a href="企业账户注册.html">企业</a>
+            </li>
+        </ul>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\346\265\231\351\276\231/211209--CSS\346\225\210\346\236\234/demo01.html" "b/\346\236\227\346\265\231\351\276\231/211209--CSS\346\225\210\346\236\234/demo01.html"
new file mode 100644
index 0000000..d8a8483
--- /dev/null
+++ "b/\346\236\227\346\265\231\351\276\231/211209--CSS\346\225\210\346\236\234/demo01.html"
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    :root {
+        /* 定义气泡弹出背景色 */
+        --poptipBg: pink;
+        /* 弹出框字体颜色 */
+        --color: #fff;
+        /* 弹出框三角形边长 */
+        --triangle: 8px;
+        /* 弹出框与元素的偏移 */
+        --distance: -12px;
+    }
+
+    .poptip {
+        position: relative;
+        z-index: 101;
+    }
+
+    .poptip::before,
+    .poptip::after {
+        visibility: hidden;
+        opacity: 0;
+        transform: translate3d(0, 0, 0);
+        transition: all 0.3s ease 0.2s;
+        box-sizing: border-box;
+    }
+
+    .poptip::before {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: var(--triangle) var(--triangle) 0 var(--triangle);
+        border-color: var(--poptipBg) transparent transparent transparent;
+        left: calc(50% - var(--triangle));
+        top: 0px;
+        transform: translateX(-50%) translateY(var(--distance));
+        /* transform: rotate(-90deg);
+        margin-left: -84px;
+        margin-top: 37px; */
+        transform: rotate(90deg);
+        margin-left: 61%;
+    }
+
+    .poptip::after {
+        font-size: 14px;
+        color: var(--color);
+        /* 内容为标签内的属性值 */
+        content: attr(aria-controls);
+        position: absolute;
+        padding: 6px 12px;
+        /* 文本换行 */
+        white-space: wrap;
+        z-index: -1;
+        /* 朝左弹出气泡 */
+        /* top: -10%;
+        right: 107%; */
+        /* left: 50%;
+        bottom: 100%; */
+        left: 130%;
+        top:-50%;
+        transform: translateX(-50%) translateY(var(--distance));
+        background: var(--poptipBg);
+        line-height: 1;
+        border-radius: 2px;
+    }
+
+    .poptip:hover::before,
+    .poptip:hover::after {
+        visibility: visible;
+        opacity: 1;
+    }
+
+    .btn {
+        width: 100px;
+        line-height: 1.5;
+        padding: 5px 10px;
+        color: #fff;
+        background: linear-gradient(to top,skyblue,pink);
+        border-radius: 4px;
+        text-align: center;
+        cursor: pointer;
+        margin: 200px auto;
+    }
+</style>
+
+<body>
+    <div class="poptip btn" aria-controls="哈哈哈哈哈哈哈">气泡提示</div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\346\265\231\351\276\231/211210\342\200\224CSS\346\212\200\345\267\247/demo.html" "b/\346\236\227\346\265\231\351\276\231/211210\342\200\224CSS\346\212\200\345\267\247/demo.html"
new file mode 100644
index 0000000..2194c86
--- /dev/null
+++ "b/\346\236\227\346\265\231\351\276\231/211210\342\200\224CSS\346\212\200\345\267\247/demo.html"
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>自定义开关按钮</title>
+</head>
+<style>
+    /* 采用flex布局让两边固定 */
+    .box{
+        width: 500px;
+        display: flex;
+        justify-content: space-around;
+    }
+    /* 去掉input原生的样式 */
+    input[type="checkbox"]{
+        display: none;
+    }
+    /* 禁用按钮 */
+    label[disabled]{
+        cursor: not-allowed;
+        opacity:.5;
+    }
+    input[type="checkbox"] + label{
+        position: relative;
+        width: 50px;
+        height: 25px;
+        background:linear-gradient(to top,purple,plum);
+        border-radius:15px;
+        cursor: pointer;
+        transition: all .8s;
+    }
+    label::before,
+    label::after{
+        transition:all .8s;
+    }
+     input[type="checkbox"] +label::before{
+        content: "关";
+        top: 5px;
+        margin-left:25px;
+        padding: 5px 5px;
+        color: #fff;
+    }
+    input[type="checkbox"] +label::after{
+        content: '';
+        position: absolute;
+            top: 1px;
+            left:1px;
+            width: 24px;
+            height: 24px;
+            border-radius: 12px;
+            background: #fff;
+    } 
+    input[type="checkbox"]:checked + label{
+        background: linear-gradient(to left,pink,plum);
+    }
+    input[type="checkbox"]:checked + label::before{
+        content: "开";
+        margin-left: 3px;
+    }
+    input[type="checkbox"]:checked + label::after{
+       left:25px;
+    }
+    
+</style>
+<body>
+    <div class="box">
+        <input type="checkbox" id="switch" checked>
+        <label for="switch"></label>
+        <input type="checkbox" id="switch-disabled" disabled>
+        <label for="switch-disabled" disabled></label>
+        <input type="checkbox" id="switch-disabled-open" disabled checked>
+        <label for="switch-disabled-open" disabled></label>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\346\265\231\351\276\231/211210\342\200\224CSS\346\212\200\345\267\247/switch.html" "b/\346\236\227\346\265\231\351\276\231/211210\342\200\224CSS\346\212\200\345\267\247/switch.html"
new file mode 100644
index 0000000..94be65f
--- /dev/null
+++ "b/\346\236\227\346\265\231\351\276\231/211210\342\200\224CSS\346\212\200\345\267\247/switch.html"
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+   .box {
+            width: 500px;
+            display: flex;
+            justify-content: space-around;
+        }
+
+        input[type="checkbox"] {
+            display: none;
+        }
+
+        label {
+            position: relative;
+            width: 50px;
+            height: 26px;
+            background: linear-gradient(to right,plum,skyblue);
+            border-radius: 13px;
+            cursor: pointer;
+            /* 添加过渡效果 */
+            transition: all .5s;
+        }
+        /* 禁用按钮 */
+        label[disabled] {
+            cursor: not-allowed;
+            opacity: .5;
+        }
+
+        label::before,
+        label::after {
+            /* 添加过渡效果 */
+            transition: all .5s;
+            position: absolute;
+        }
+
+        label::before {
+            content: '关';
+            font-size: 16px;
+            line-height: 1;
+            top: 5px;
+            left: 28px;
+            color: #fff;
+        }
+
+        label::after {
+            content: '';
+            top: 1px;
+            left: 1px;
+            width: 24px;
+            height: 24px;
+            border-radius: 12px;
+            background: #fff;
+        }
+
+        input[type="checkbox"]:checked+label {
+            background: linear-gradient(to left,plum,pink);
+        }
+
+        input[type="checkbox"]:checked+label::before {
+            content: '开';
+            left: 6px;
+        }
+
+        input[type="checkbox"]:checked+label::after {
+        input[type="checkbox"]:active+label::after {
+            width: 24px;
+        }
-- 
Gitee

