1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JS/CSS 注冊表單（模態框設置）</title> 6 <style> 7 8 input[type=email], input[type=password] { 9 width: 100%; 10 padding: 12px 20px; 11 margin: 8px 0; 12 display: inline-block; 13 border: 1px solid #ccc; 14 box-sizing: border-box; 15 } 16 17 18 button { 19 background-color: #4CAF50; 20 color: white; 21 padding: 14px 20px; 22 margin: 8px 0; 23 border: none; 24 cursor: pointer; 25 width: 100%; 26 } 27 28 29 .cancelbtn { 30 padding: 14px 20px; 31 background-color: #f44336; 32 } 33 34 35 .cancelbtn,.signupbtn {float:left;width:50%} 36 37 38 .container { 39 padding: 16px; 40 } 41 42 43 .modal { 44 display: none; 45 position: fixed; 46 z-index: 1; 47 left: 0; 48 top: 0; 49 width: 100%; 50 height: 100%; 51 overflow: auto; 52 background-color: rgb(0,0,0); 53 background-color: rgba(0,0,0,0.4); 54 padding-top: 60px; 55 } 56 57 58 .modal-content { 59 background-color: #fefefe; 60 margin: 5% auto 15% auto; 61 border: 1px solid #888; 62 width: 80%; 63 } 64 65 66 .close { 67 position: absolute; 68 right: 35px; 69 top: 15px; 70 color: #000; 71 font-size: 40px; 72 font-weight: bold; 73 } 74 75 .close:hover, 76 .close:focus { 77 color: red; 78 cursor: pointer; 79 } 80 81 82 .clearfix::after { 83 content: ""; 84 clear: both; 85 display: table; 86 } 87 88 </style> 89 </head> 90 <body> 91 <h1> 92 注冊表單 93 </h1> 94 <button onclick="document.getElementById('mymodel').style.display='block'"> 95 注冊 96 </button> 97 <h1> 98 登錄表單 99 </h1> 100 <button onclick="document.getElementById('mymodel1').style.display='block'"> 101 登錄 102 </button> 103 104 <div class="modal" id="mymodel"> 105 <span onclick="document.getElementById('mymodel').style.display='none'" class="close" >×</span> 106 <form class="modal-content animate" action="www.baidu.com"> 107 <div class="container"> 108 109 110 <div> 111 <label for="myemail">郵箱</label> 112 <input type="email" placeholder="請輸入郵箱" name="myemail"> 113 114 </div> 115 <div> 116 <label for="mypassword">密碼</label> 117 <input type="password" placeholder="請輸入密碼" name="mypassword"> 118 119 </div> 120 <div> 121 <label for="repassword">確認密碼</label> 122 <input type="password" placeholder="確認密碼" name="repassword"> 123 124 </div> 125 <div> 126 <input type="checkbox" name="checked"><label for="checked">記住密碼</label> 127 </div> 128 <div> 129 <p> 130 請仔細閱讀我們的<a href="#">服務條款</a> 131 </p> 132 </div> 133 <div class="clearfix"> 134 <button type ="button" onclick="document.getElementById('mymodel').style.display='none'" class="cancelbtn"> 135 取消 136 </button> 137 <button class="signupbtn" type="submit"> 138 注冊 139 </button> 140 </div> 141 </div> 142 </form> 143 </div> 144 <!--模態框可以作為復用組件--> 145 <div class="modal" id="mymodel1"> 146 <span onclick="document.getElementById('mymodel1').style.display='none'" class="close" >×</span> 147 <form class="modal-content animate" action="www.baidu.com"> 148 <div class="container"> 149 150 151 <div> 152 <label for="myemail">郵箱</label> 153 <input type="email" placeholder="請輸入郵箱" name="myemail"> 154 155 </div> 156 <div> 157 <label for="mypassword">密碼</label> 158 <input type="password" placeholder="請輸入密碼" name="mypassword"> 159 160 </div> 161 <div> 162 <input type="checkbox" name="checked"><label for="checked">記住密碼</label> 163 </div> 164 165 <div class="clearfix"> 166 <button type ="button" onclick="document.getElementById('mymodel1').style.display='none'" class="cancelbtn"> 167 取消 168 </button> 169 <button class="signupbtn" type="submit" > 170 登錄 171 </button> 172 </div> 173 </div> 174 </form> 175 </div> 176 <script> 177 // 獲取模型 178 var modal = document.getElementById('mymodel'); 179 180 // 鼠標點擊模型外區域關閉登錄框 181 window.onclick = function(event) { 182 183 if (event.target == modal) { 184 modal.style.display = "none"; 185 } 186 } 187 </script> 188 </body> 189 190 </html>
主要是CSS美化，每次完成一個小動作時要知道心中有圖，知道哪一種屬性能實現什么樣的效果，可以把它們封裝成不同的組件，實現復用，bootstrap就是封裝了一個css庫。和一些配合js，html的組件，