網頁設計（修訂）繼上一篇_ZenDei技術網路在線

網頁設計（修訂）繼上一篇

-Advertisement-

使用eclipse打開，若用瀏覽器，且出現亂碼，將格式<meta charset="UTF-8">改為<meta charset="GB2316">規格顯示博客.html（增加了即使驗證的功能） 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset ...

使用eclipse打開，若用瀏覽器，且出現亂碼，將格式<meta charset="UTF-8">改為<meta charset="GB2316">規格顯示

博客.html（增加了即使驗證的功能）

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>博客</title>
  6 <style type="text/css">
  7 body{
  8     font-family:黑體，隸書;
  9     font-size:18px;
 10     margin:auto;
 11 }
 12 .top{
 13     margin:auto;
 14     width:100%;
 15     float:left;
 16 }
 17 .left{
 18      width:5%;
 19      float:left;
 20      height:auto;
 21 }
 22 .right{
 23     width:6.3%;
 24     height:auto;
 25     float:right;
 26 }
 27 .left1{
 28     width:24%;    
 29     float:left;    /*文本的浮動*/
 30     padding:0 5px;  /*設置邊線據內容的距離*/
 31     height:auto;
 32 }
 33 .line{
 34     border:1px green;
 35     cellspacing:0;
 36     cellpadding:0;
 37     height:400px;
 38     border-right-style:solid;
 39     border-left-style:none;
 40     border-bottom-style:none;
 41     border-top-style:none;
 42 }
 43 div{
 44     box-sizing:border-box;
 45     width:600px;
 46     line-height:1.5;
 47 }
 48 
 49 </style>
 50 <script language="JavaScript">
 51     var flag = true;
 52     var flag1 = true;
 53     var flag2 = true;
 54     function checkType(){
 55         var nm = document.getElementById("dr").value;
 56           if(nm.length<3 && nm.length>0){
 57             update("至少輸入3個字元");
 58             flag = false;
 59         }else if(nm.length>20){
 60             update("不能超過20個字元");
 61             nm =nm.substring(0,20);
 62             document.getElementById("dr").value = nm.substring(0,20);
 63             flag = false;
 64         }else{
 65             update("");
 66             flag = true;
 67         }
 68     }
 69     //輸出提示內容
 70         function update(word){
 71             document.getElementById("back").innerHTML=word;
 72         }
 73         
 74     //驗證密碼格式
 75         function checkPassword(){
 76             var pw = document.getElementById("dr1").value;
 77              if(pw.length<6 && pw.length>0){
 78                 document.getElementById("back1").innerHTML = "至少輸入6個字元！";
 79                 flag1 = false;
 80             }else if(pw.length>20){
 81                 document.getElementById("back1").innerHTML = "不能超過20個字元！";
 82                 flag1 = false;
 83             }else{
 84                 document.getElementById("back1").innerHTML = "";
 85                 flag1 = true;
 86                 }
 87      }
 88 
 89     //驗證密碼
 90     function checkPwC(){
 91         var pw1 = document.getElementById("dr1").value;
 92         var pw2 =document.getElementById("dr2").value;
 93         if(pw2!==pw1){
 94             document.getElementById("back2").innerHTML = "密碼不一致！";
 95             flag2 = false;
 96         }else if(pw2==pw1){
 97             document.getElementById("back2").innerHTML = "設置成功！";
 98             flag2 = true;
 99         }
100     }
101     //驗證條件滿足
102     function check(){
103         if(!flag){
104             return false;
105         }else if(!flag1){
106             return false;
107         }else if(!flag2){
108             return false;
109         }else{}
110     }
111 </script>
112 </head>
113 <body>
114 <img src="image/01.gif" class="top"/>
115 <img src="image/02.gif" class="left"/>
116 <div class="left1">
117 <img src="image/reg.gif"/>
118 <b>註冊幫助</b><br/>
119 <ul>
120     <li>會員名：為會員登錄網站的通行證，長度控制在3-20個字元之內。</li>
121     <br/>
122     <li>密碼：請設定在6-20位之間。</li>
123     <br/>
124     <li>確認密碼：確認密碼必須與密碼一致。</li>
125     <br/>
126     <li>Email：請填寫有效的Email地址，以便於與您聯繫。</li>
127 </ul>
128 </div>
129 <div class="left1" style="width:100px"><table class="line"></table></div>
130 <form name="form1" action="調查問卷.html" onSubmit="return check()">
131 <div class="left1">
132     <div style="height:80px"></div>
133     <table border=0>
134         <tr></tr>
135         <tr>
136             <td>用&nbsp;戶&nbsp;名：&nbsp;&nbsp;&nbsp;</td>
137             <td><input id="dr" type="text" name="Dengru" placeholder="長度控制在3-20個字元之內" size=31 oninput="checkType()"></td>
138         </tr>
139         <tr><td></td><td><span id="back" style="color:red"></span></td></tr>
140         <tr></tr>
141         <tr>
142             <td>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;碼：</td>
143             <td><input id="dr1" type="password" name="Dengru1" placeholder="請設定在6-20位之間" size=32 oninput="checkPassword()" required></td>
144         </tr>
145         <tr><td></td><td><span id="back1" style="color:red"></span></td></tr>
146         <tr></tr>
147         <tr>
148             <td>確認密碼：</td>
149             <td><input id="dr2" type="password" name="Dengru2" size=32 oninput="checkPwC()" required></td>
150         </tr>
151         <tr><td></td><td><span id="back2" style="color:red"></span></td></tr>
152         <tr></tr>
153         <tr>
154             <td>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;別：</td>
155             <td><input type="radio" name="De2" value="Male">男&nbsp;&nbsp;<input type="radio" name="De2" value="Female">女</td>
156         </tr>
157         <tr></tr>
158         <tr>
159             <td>E-mail：</td>
160             <td><input id="email" type="email" name="Dengru3"size=40></td>
161         </tr>
162     </table>
163     <br/>
164     <input type="submit" name="Submit" value="提交">&nbsp;&nbsp;&nbsp;
165     <input type="reset" name="Reset" value="重置">
166 </div>
167 </form>
168 <img src="image/04.gif" class="right"/>
169 <img src="image/03.jpg" class="top"/>
170 </body>
171 </html>

博客

調查問卷.html（增加了選四項，清除第五項的功能）

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="UTF-8">
  5 <style type="text/css">
  6 body{
  7     background-color:#DEDEDE;
  8     width:640px;
  9     margin:auto;    /*設置頁面邊距*/
 10 }
 11 .headline{
 12     font-size:22px;
 13     font-family:宋體;
 14     text-align:center;    /*設置居中*/
 15     font-weight:bold;    /*設置為粗體*/
 16 }
 17 .top{
 18     font-size:10。5px;    /*字體大小*/
 19     font-family:楷體;
 20     line-height:2;    /*設置行高為1.5*/
 21 }
 22 .right{
 23     text-align:right;
 24     line-height:2;
 25 }
 26 .left{
 27     text-align:left;
 28 }
 29 .d

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

oracle 判斷欄位相等，但類型不同引起的性能問題

最近做ogg數據同步，然後觸發器加工數據放入另外一張表，由於數據量很大，一分鐘幾萬條數據，由於一些條件欄位類型不匹配，引起ogg阻塞，比較頭大。最後分析發現性能問題。請看下圖： phmxxh是varchar2類型，note_id是integer類型，用to_char轉換以後，性能提高60倍以後註意避 ...
MySQL 筆記整理（14） --count(*)這麼慢，我該怎麼辦？

筆記記錄自林曉斌（丁奇）老師的《MySQL實戰45講》（本篇內圖片均來自丁奇老師的講解，如有侵權，請聯繫我刪除） 14） --count(*)這麼慢，我該怎麼辦？有時你會發現，隨著系統中記錄數越來越多，select count(*) from t執行得也越來越慢。那麼今天，我們就來聊聊count ...
基於nodejs的流水線式的CRUD服務。依賴註入可以支持插件。

寫代碼好多年了，發現大家的思路都是寫代碼、寫代碼、寫代碼，還弄了個稱號——碼農。我是挺無語的，我的思路是——不寫代碼、不寫代碼、不寫代碼！無聊的代碼為啥要重覆寫呢？甚至一寫寫好幾年。舉個例子吧，要不然大家肯定很懵。當我們剛開始學習資料庫編程的時候，我們會先寫一段代碼，實現往一個表裡添加數據的 ...
Android項目實戰（五十四）：zxing 生成二維碼圖片去除白色內邊距的解決方案

目錄：zxing->encoding->EncodingHandler類中修改 createQRCode方法 ...
全球票房73億的《海王》，是怎麼煉成的！

寫在前面用Python加上一些數據分析，來證明《海王》好看。《海王》一部電影帶你重溫《馴龍高手》《變形金剛》《星球大戰》《星河戰隊》《鐵血戰士》《安德的游戲》《異形》可能還借鑒了對手的《鋼鐵俠》與《黑豹》劇情，再稍稍帶一點《大魚海棠》的味道，配上一丟丟溫子仁式恐怖片套路，優秀的商業片，應該是DC ...
HTML文本框樣式大全

粘貼自Christian.Cao 博客園地址 : https://www.cnblogs.com/QQ862668193/p/6893797.html 輸入框景背景透明：<input style="background:transparent;border:1px solid #ffffff"> 鼠 ...
flex佈局基本語法

註 : 本文章按照菜鳥教程 Flex佈局語法教程為原型稍加修改,以方便自己學習. 菜鳥教程地址:http://www.runoob.com/w3cnote/flex-grammar.html 2009年，W3C提出了一種新的方案—-Flex佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經 ...
記錄代碼的點滴！

2019年4月1日，我註冊了博客園的賬戶，開始記錄我的代碼日常。學習web前端，是我之前沒有考慮過的事情。在大學渾渾噩噩度過了四年後，終於意識到就業的危機，剛入學的時候聽到學長學姐們說畢業即失業，感覺離自己很遙遠，但臨近畢業我卻親身體會到了。可能是習慣了高中老師們的督促，初入大學校園卻迷失了自我， ...