對照一網頁截圖製做的網頁

github源碼：https://github.com/littleredhatli/April

要模仿製做的網頁圖片：

功能：在js中內置幾個帳號密碼，當用戶登錄正確的帳號密碼的時候提示登錄成功，不然提示登陸失敗。

 

完成製做時的截圖：

 

js內置帳號密碼，當用戶登錄正確的帳號密碼的時候提示登錄成功，不然提示登陸失敗。效果圖：

1.用戶名或密碼爲空

2.登陸失敗

2.登錄成功：

 

 

用到的主要知識：

1.CSS3漸變（gradients)

背景、按鈕等顏色的設置均可以用到漸變，造成一種更強的視覺效果。

CSS3兩種類型的漸變：

• 線性漸變（linear gradients） - 向下/向上/向左/向右/向對角線 方向
• 徑向漸變（radial gradients） - 由它們的中心定義

語法：

線性漸變

background:linear-gradient(direction,start-color,···last-color);

 徑向漸變

background:radial-gradient(shape size,start-color,···last-color);

shape 參數定義了形狀。它能夠是值 circle 或 ellipse。默認值是 ellipse。

size不一樣尺寸大小關鍵字的使用：定義漸變的大小，能夠爲四個值

• closest-side
• farthest-side
• closest-corner
• farthest-corner（默認）

 

2.使用js內置用戶名、密碼

 

 1     <button class="submit" type="submit" onclick="check(this.form)">Login</button>      
 2     <script language="javascript">
 3         function check(form){
 4             if(form.userid.value==""||form.pswrd.value=="")
 5             {
 6                 alert("請輸入您的用戶名及密碼！");
 7                 form.reset();
 8             }
 9             else if((form.userid.value=="april"&& form.pswrd.value =="123456")||(form.userid.value=="tom"&& form.pswrd.value=="12345678"))
10             {
11                 alert("Congratulations!登錄成功！");
12                 form.reset();
13             }
14             else
15             {
16                 alert("The username and password you entered don't match!(您輸入的用戶名或密碼不正確！)");
17                 form.reset(); 
18             }
19         } 
20     </script>

以上代碼調用javascript自帶的彈出框提示信息，效果如圖：

 

3.修改js自帶的彈出框樣式

在大多數網頁製做中，自帶的彈出框較爲簡陋，通常都選擇自定義彈出框。下面爲開始效果圖中自定義的彈出框的僞代碼：

 1     <script language="javascript">
 2     window.alert = function(str){
 3         var shield = document.createElement("DIV");
 4         shield.id = "shield";
 5         shield.style.position = "absolute";
 6         shield.style.left = "50%";
 7         shield.style.top = "50%";
 8         shield.style.width = "350px";
 9         shield.style.height = "300px";
10         shield.style.marginLeft = "-140px";
11         shield.style.marginTop = "-110px";
12         shield.style.zIndex = "25";
13         var alertFram = document.createElement("DIV");
14         alertFram.id="alertFram";
15         alertFram.style.position = "absolute";
16         alertFram.style.width = "540px";
17         alertFram.style.height = "300px";
18         alertFram.style.left = "40.5%";
19         alertFram.style.top = "48%";
20         alertFram.style.marginLeft = "-140px";
21         alertFram.style.marginTop = "-110px";
22         alertFram.style.textAlign = "center";
23         alertFram.style.lineHeight = "150px";
24         alertFram.style.zIndex = "300";
25         strHtml = "<ul style=\"list-style:none; margin:0px; padding:0px ;width:100%\">\n";
26         strHtml += " <li style=\"background:#968267; text-align:left; padding-left:20px; font-size:16px;font-weight:bold;height:60px;line-height:54px;border:1px solid #655545;color:white\">DiveCoders提示框</li>\n";
27         strHtml += " <li style=\"background:#C8B487;text-align:center;font-size:18px;height:180px; padding-top:10px;line-height:80px;border-left:1px solid #655545;border-right:1px solid #655545;color:white\">"+str+"</li>\n";
28         strHtml += " <li style=\"background:#968267;text-align:center;font-weight:bold;height:60px;line-height:25px; border:1px solid #655545;\"><input type=\"button\" value=\"確 定\" onclick=\"doOk()\" style=\"width:80px;height:35px;background:#626262;color:white;border:1px solid white;font-size:16px;line-height:15px;outline:none;margin-top: 10px\"/></li>\n";
29         strHtml += "</ul>\n";
30         alertFram.innerHTML = strHtml;
31         document.body.appendChild(alertFram);
32         document.body.appendChild(shield);
33         this.doOk = function(){
34             alertFram.style.display = "none";
35             shield.style.display = "none";
36         }
37         alertFram.focus();
38         document.body.onselectstart = function(){return false;};
39     }
40     </script>
41     <script>
42         function check(form){
43             if(form.userid.value==""||form.pswrd.value=="")
44             {
45                 alert("請輸入您的用戶名及密碼！");
46                 form.reset();
47             }
48             else if((form.userid.value=="april"&& form.pswrd.value =="123456")||(form.userid.value=="tom"&& form.pswrd.value=="12345678"))
49             {
50                 alert("Congratulations!登錄成功！");
51                 form.reset();
52             }
53             else
54             {
55                 alert("The username and password you entered don't match!(您輸入的用戶名或密碼不正確！)");
56                 form.reset(); 
57             }
58         } 
59     </script>

View Code  

 

能夠依據網頁的樣式及顏色對彈出框進行適合網頁界面的修改。