zoukankan      html  css  js  c++  java
  • 对照一网页截图制作的网页

    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 ;100%">
    ";
    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>
    ";
    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>
    ";
    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="80px;height:35px;background:#626262;color:white;border:1px solid white;font-size:16px;line-height:15px;outline:none;margin-top: 10px"/></li>
    ";
    29         strHtml += "</ul>
    ";
    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 

     

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

  • 相关阅读:
    theano 深度学习大全
    theano 深度学习大全
    hann function
    hann function
    matlab 各种文件的读取(及读写问题的解决)
    matlab 各种文件的读取(及读写问题的解决)
    极简代码(八)—— binary activation function
    极简代码(八)—— binary activation function
    微积分基本概念相关证明
    微积分基本概念相关证明
  • 原文地址:https://www.cnblogs.com/ParaDise-LJ/p/6647385.html
Copyright © 2011-2022 走看看