first commit

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.7/pds(130)/css/clear.css

@@ -0,0 +1,18 @@
+body,ul,li,p,h1,h2,h3,h4,h5,h6 {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+input {
+    outline: none;
+    border: none;
+    padding: 0;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.7/pds(130)/css/index.css

@@ -0,0 +1,112 @@
+.header{
+    background-color: #fff;
+    display: flex;
+    justify-content:flex-start;
+    padding-left: 0.21rem;
+    padding-top: 0.3rem;
+    font-size: 0;
+    position: fixed;
+    z-index: 999;
+    top: 0;
+    right: 0;
+    left: 0;
+}
+.header img{
+    width: 0.2rem;
+	height: 0.35rem;
+}
+.content{
+    padding:0 0.6rem;
+    font-size: 0;
+    margin-top: 0.65rem;
+}
+.content h2{
+    font-size: 0.54rem;
+    color: #000000;
+    margin-top: 2.16rem;
+    margin-bottom: 1.25rem;
+}
+.xj{
+
+}
+.xj li{/*问题1 li的宽高问题*/
+    display: flex;
+    width: 100%;
+    align-items:center;
+    position: relative;
+    margin-bottom: 0.73rem;
+    padding-left: 0.05rem;
+}
+.xj li::after{
+    content: "";
+    width: 100%;
+    height: 0.01rem;
+	background-color: #d9e2e9;
+    position: absolute;
+    right: 0;
+    bottom: -0.24rem;
+    
+}
+
+.xj li img {
+    width: 0.3rem;
+	height: 0.42rem;
+    padding-right: 0.35rem;
+}
+.xj li input{
+    font-size: 0.28rem;
+    color: #b6c2ce;
+    width: 100%;
+}
+.yanz{
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content:space-between;
+    height: 0.42rem;
+}
+.ccc{
+    display: flex;
+    align-items: center;
+}
+.yanz span{
+    width: 1.38rem;
+	height: 0.52rem;
+	background-color: #f2f6f9;
+	border-radius: 0.26rem;
+    font-size: 0.24rem;
+    color: #555555;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content:center;
+
+}
+.xj li:last-child{
+    margin-bottom: 0.38rem;
+}
+.xuanzhong{
+    padding-left: 0.05rem;
+    margin-bottom: 0.53rem;
+}
+.xuanzhong img{
+	width: 0.18rem;
+	height: 0.18rem;
+	
+}
+.zi_1{font-size: 0.2rem;
+    color: #333333;
+    padding-left: 0.12rem;
+}
+.zi_2{
+    font-size: 0.2rem;
+    color: #79c9ff;
+}
+.anniu{
+    background-color: #5697f4;
+	border-radius: 0.49rem;
+    padding: 0.33rem 2.48rem;
+    font-size: 0.3rem;
+    color: #ffffff;
+    
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.7/pds(130)/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<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>Document</title>
+    <script src="./js/rem.js"></script>
+    <link rel="stylesheet" href="./css/clear.css">
+    <link rel="stylesheet" href="./css/public.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+<body>
+    <div class="header">
+        <img src="./img/left.png" alt="">
+    </div>
+    <div class="content">
+        <h2>注册</h2>
+        <ul class="xj">
+            <li>
+                <img src="./img/sj.png" alt="">
+                <input type="text" placeholder="填写手机号">
+            </li>
+            <li class="yanz">
+                <div class="ccc">
+                <img src="./img/sj.png" alt="">
+                <input type="text" placeholder="填写手机号">
+                </div>
+                <span>验证码</span>
+            </li>
+            <li>
+                <img src="./img/sj.png" alt="">
+                <input type="text" placeholder="填写手机号">
+            </li>
+            <li>
+                <img src="./img/sj.png" alt="">
+                <input type="text" placeholder="填写手机号">
+            </li>
+            
+        </ul>
+        <div class="xuanzhong">
+            <img src="./img/right.png" alt="">
+            <span class="zi_1">我已阅读并同意</span>
+            <span class="zi_2">《用户协议和隐私协议》</span>
+        </div>
+        <div class="anniu">
+
+                立即注册
+            
+        </div>
+    </div>
+</body>
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/6.7/pds(130)/js/rem.js

@@ -0,0 +1,11 @@
+window.onload = function () {
+    getRem(750, 100)
+};
+window.onresize = function () {
+    getRem(750, 100)
+};
+function getRem(pwidth, prem) {
+    var html = document.getElementsByTagName("html")[0];
+    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+    html.style.fontSize = oWidth / pwidth * prem + "px";
+}