对照一网页截图制做的网页

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  

 

能够依据网页的样式及颜色对弹出框进行适合网页界面的修改。