对照一网页截图制作的网页
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>
可以依据网页的样式及颜色对弹出框进行适合网页界面的修改。
