diff --git "a/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/4.07\347\231\273\345\275\225\346\263\250\345\206\214/demo.html" "b/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/4.07\347\231\273\345\275\225\346\263\250\345\206\214/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d959543b0c4da4895daf44201f3be3d121c72810
--- /dev/null
+++ "b/\351\273\204\351\243\236\351\276\231/vue\344\275\234\344\270\232/4.07\347\231\273\345\275\225\346\263\250\345\206\214/demo.html"
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+</head>
+<style>
+    #app {
+        position: relative;
+    }
+
+    #demo1 {
+        position: absolute;
+        left: 1000px;
+        top: 15px;
+    }
+
+    #demo2 {
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+    }
+</style>
+
+<body background="https://img0.baidu.com/it/u=1477800726,2326569738&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
+    style="background-repeat: no-repeat;background-size: 100% 100%;background-attachment: fixed;">
+    <div id="app">
+        <div id="demo1">
+            <h3>
+                <p>已有账号？<button onclick="alert('没完善登个屁哈哈哈')" style="font-size: 20PX;">登录</button></p>
+            </h3>
+        </div>
+        <div id="demo2">
+            <form action="" name="myform">
+                <h2>
+                    <p>电话号码： <input type="text" v-model="msg1" placeholder="请输入电话号码"></p>
+                    <p>密&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;： <input type="text" v-model="msg2"
+                            placeholder="请输入密码"></p>
+                    <p>确认密码：<input type="text" v-model="msg3" placeholder="请确认密码"></p>
+                    <p>验&nbsp;证&nbsp;码&nbsp;： <input type="text" v-model="yzm" placeholder="请输入验证码"></p>
+
+
+
+                    <label>性&nbsp;&nbsp;&nbsp;&nbsp;别&nbsp;&nbsp;：</label>
+                    <label>男</label>
+                    <input type="radio" value="男" v-model="xb">
+                    <label>女</label>
+                    <input type="radio" value="女" v-model="xb">
+                    <label>保密</label>
+                    <input type="radio" value="保密" v-model="xb">
+                    <p>您的选择是：{{xb}}</p>
+
+                    <p>城&nbsp;&nbsp;&nbsp;&nbsp;市&nbsp;&nbsp;：
+                        <select name="mySel" v-model="selected">
+                            <option value="">-请选择您所在的城市-</option>
+                            <option value="成都">成都</option>
+                            <option value="上海">上海</option>
+                            <option value="北京">北京</option>
+                            <option value="深圳">深圳</option>
+                            <option value="杭州">杭州</option>
+                            <option value="昆明">昆明</option>
+                            <option value="其他">其他</option>
+                        </select>
+                    </p>
+                    <p>您所在的城市是：{{ selected }}</p>
+
+                    <p>请遵守以下协议：</p>
+
+                    <label>协议1</label>
+                    <input type="checkbox" value="协议1" v-model="heros">
+
+                    <label>协议2</label>
+                    <input type="checkbox" value="协议2" v-model="heros">
+
+                    <label>协议3</label>
+                    <input type="checkbox" value="协议3" v-model="heros">
+                    <button style="font-size: 20PX;" onclick="alert('没完善注册个屁哈哈哈')">注册</button>
+                </h2>
+        </div>
+
+
+    </div>
+</body>
+<script>
+    let mv = new Vue({
+        el: "#app",
+        data: {
+            msg1: "",
+            msg2: "",
+            yzm: "",
+            xb: "",
+            xb: "",
+            xb: "",
+            selected: "",
+        }
+    });
+</script>
+
+</html>
\ No newline at end of file
