精华内容
下载资源
问答
  • 这是一套完整的web前端旅游页面, 一共7个页面, 并且在登录、注册时具有js表单校验, 页面之间实现了跳转。
  • Web前端静态页面.zip

    2019-05-11 14:37:39
    只包涵前端静态页面,包括html,css和js,有一整套的页面,包括首页,搜索,订单,个人主页,商标,注册,登陆和秒杀团购页面等。
  • 自己平时的练习,我是今年才学的web,做的不好,希望大家不要介意,希望对大家有帮助。
  • web前端如何做注册页面

    万次阅读 2017-04-07 16:41:47
    1.首先,设计整个页面: 此界面的代码段落:(前端代码)            用户名 

    1.首先,设计整个页面:


    代码片段如下:

    <div class="width100 marT15 content_news_list">
            <div class="width96 mauto">
                    <div class="width100" >
                        <table style="width:100%" id="tabRegister">
                            <tr class="trHight">
                                <td class="td1">
                                     用户名 
                                </td><!--用户名信息验证-->
                                <td  class="td2"><input type="text" id="inp_user" class="textInput" οnblur="m_userTipOnblur();"  />
                                    <span id="span_userTip" style="color:#f00;display:inline-block;" >*</span>
                                </td><!--用户名信息验证-->
                            </tr>
                            
                            <tr class="trHight">
                                <td class="td1">
                                     姓名 
                                </td><!--姓名信息验证-->
                                <td  class="td2"><input type="text" id="inp_name" class="textInput" οnfοcus="m_nameTipOnFocus();" οnblur="m_nameTipOnblur();" />
                            <span style="color:#f00">*</span>
                                    <span id="span_nameTip"  style="color:#f00;display:none;" ></span>
                                </td><!--姓名信息验证-->
                            </tr>
                            <tr class="trHight">
                                <td class="td1">
                                      密码 
                                </td><!--密码信息验证-->
                                <td  class="td2"><asp:TextBox id="asp_psw" class="textInput"  runat="server"  TextMode="Password" οnblur="m_PasswordTipOnblur();"></asp:TextBox>
                            <span style="color:#f00">*</span>
                                  <span id="span_PasswordTip"  style="color:#f00;display:none;" ></span>
                                </td><!--密码信息验证-->
                            </tr>
                            <tr class="trHight">
                                <td class="td1">
                                     确认密码 
                                </td><!--确认密码信息验证-->
                                <td  class="td2"><asp:TextBox id="asp_cpsw" class="textInput"  runat="server"  TextMode="Password" οnblur="m_ConfirmPasswordTipOnblur();"></asp:TextBox>
                            <span style="color:#f00">*</span>
                                    <span id="span_ConfirmPasswordTip" style="color:#f00;display:none;"></span>
                                </td><!--确认密码信息验证-->
                            </tr>
                            <tr class="trHight">
                                <td class="td1">
                                     职称 
                                </td><!--职称-->
                                <td  class="td2"><input type="text"id="Text2" class="textInput" οnclick="zcchoose()"/>
                           </td><!--职称-->
                            </tr>
                            <tr class="trHight">
                                <td class="td1">
                                     委员职务 
                                </td><!--委员职务-->
                                <td  class="td2"><input type="text" id="Text3" class="textInput" οnclick="zwchoose()"/>
                            </td><!--委员职务-->
                            </tr>
                            <tr class="trHight">
                                <td class="td1">
                                     联系方式 
                                </td><!--联系方式-->
                                <td  class="td2"><input type="text"id="inp_tel" class="textInput" οnblur="m_telTipOnblur();"/>
                            <span style="color:#f00">*</span>
                                    <span id="span_tel"  style="color:#f00;display:none;" ></span>
                                </td><!--联系方式-->
                            </tr>
                            <tr class="trHight">
                                <td class="td1">
                                     单位 
                                </td><!--单位-->
                                <td  class="td2"><input type="text" id="Text4" class="textInput" οnclick="dwchoose()"/>
                           </td><!--单位-->
                            </tr>
                            <tr class="trHight">
                                <td class="td1">
                                     工作组 
                                </td><!--工作组-->
                                <td  class="td2"><input type="text" id="Text5" class="textInput" οnclick="wgchoose()"/>
                            </td><!--工作组-->
                            </tr>
                            <tr  style="height:70px;line-height:70px;">
                                 <td class="td1">
                                </td>
                                <td  class="td2" style="padding-top :10px;" >
                                    <img  src="images/zhuce.png" / οnclick="m_zhuce();">
                                </td>
                            </tr>
                        </table>
                </div>
            </div>
            </div>


    
    
    其中有css样式设置:

    .detail p{width:100%;font-size:14px; color:#353535; text-indent:28px; padding-bottom:10px; line-height:30px; padding:5px 0;}
    #tabRegister .td1 {width:37%; text-align:right;font-size:16px;}/*注册委员*/
    #tabRegister .td2 { text-align:left;}
    #tabRegister .textInput { border-width:1px;border-style:solid;border-radius:5px;border-color:#0094ff; height:25px;width:300px}
    #tabRegister .trHight { height:50px;line-height:50px;}/*注册委员*/
    如果用户名有被占用,则会有相应的提示:比如输入sa,提示改用户被占用

    如果用户名没有被占用,提示此用户名可以放心使用




    主要的代码段:

      var m_inp_user, m_useOrNo;
            function m_userTipOnblur() {
                m_inp_user = $("#inp_user").val();//获取inp_user控件
               $("#span_userTip").css("display", "inline-block");//使span_userTip控件显示,对一个对象指定inline-block属性,可以将对象呈递为内联对象,但是对象的内容作为块对象呈递。
               if (m_inp_user == "") { //如果用户名为空,提示不可为空
                    $("#span_userTip").css("color", "#f00");//span_userTip控件的字为红色
                    $("#span_userTip")[0].innerText = "* 用户名不能为空";//赋给span_userTip控件的值内容为:用户名不能为空
                } else {//如果有值
                    //要通过ajax去访问这个服务页面 
                   //在mber_Registered.aspx注册委员页面里通过$.ajax传一个用户名到Inter_AccToUseOrNo.aspx.cs里
                   var m_encode_user = encodeURIComponent(m_inp_user);//对用户名进行编码
                   var m_url = "Inter_AccToUseOrNo.aspx?acc1=" + m_encode_user;//连接到这页面的地址,参数acc1代表用户名
                    $.ajax({
                        url: m_url,//地址
                        type: "GET",//用get方法
                        // dataType: "",//类型为空
                        //data:"",//参数为空
                        //async: false,//同步请求
                        success: function (data) {
                            m_useOrNo = data;
                            if (data == "True") {//为true,则该用户已经被占用
                                $("#span_userTip").css("color", "#f00");//span_userTip控件的字为红色
                                $("#span_userTip")[0].innerText = "* 该用户名已经被占用";//赋给span_userTip控件的值内容为:该用户名已经被占用
                            } else if (data == "False") {//此用户名可以放心使用     
                                $("#span_userTip").css("color", "#0094ff");//span_userTip控件的字为蓝色
                                $("#span_userTip")[0].innerText = "* 此用户名可以放心使用";//赋给span_userTip控件的值内容为:此用户名可以放心使用
                            }
                        },
                        error: function (error) {
                            var m_error = error.responseText;
                            if (m_error.indexOf("在请求中检测到包含潜在危险的数据") >= 1000) {
                                $("#span_userTip").css("color", "#f00");//span_userTip控件的字为红色
                                $("#span_userTip")[0].innerText = "* 存在不合法字符,请更换!";//赋给span_userTip控件的值内容为:存在不合法字符,请更换
                            
                            }else{
                                $("#span_userTip").css("color", "#f00");//span_userTip控件的字为红色
                                $("#span_userTip")[0].innerText = "* 无法确定该用户名是否被占用,请稍后再试!";//赋给span_userTip控件的值内容为:无法确定该用户名是否被占用,请稍后再试
                            }
                            
                        
                        }
                        
                       
                    });
    
    
                }
    
            }
    这边涉及到一个难点:就是用$.ajax();来请求另一个页面,通过另一个页面的后端,进行数据库查询,并做出判断:若返回true,则说明此用户名被占用,反之,返回false。

    $.ajax()详细参数如下:

     

    1.url
    要求为String类型的参数,(默认为当前页地址)发送请求的地址。

    2.type
    要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。

    3.timeout
    要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。

    4.async
    要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。

    5.cache
    要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。

    6.data
    要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看  processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

    7.dataType
    要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
    xml:返回XML文档,可用JQuery处理。
    html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
    script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
    json:返回JSON数据。
    jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
    text:返回纯文本字符串。

    8.beforeSend
    要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
                function(XMLHttpRequest){
                   this;   //调用本次ajax请求时传递的options参数
                }
    9.complete
    要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。
              function(XMLHttpRequest, textStatus){
                 this;    //调用本次ajax请求时传递的options参数
              }

    10.success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
             (1)由服务器返回,并根据dataType参数进行处理后的数据。
             (2)描述状态的字符串。
             function(data, textStatus){
                //data可能是xmlDoc、jsonObj、html、text等等
                this;  //调用本次ajax请求时传递的options参数
             }

    11.error:
    要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:
           function(XMLHttpRequest, textStatus, errorThrown){
              //通常情况下textStatus和errorThrown只有其中一个包含信息
              this;   //调用本次ajax请求时传递的options参数
           }

    12.contentType
    要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

    13.dataFilter
    要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
                function(data, type){
                    //返回处理后的数据
                    return data;
                }

    14.dataFilter
    要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
                function(data, type){
                    //返回处理后的数据
                    return data;
                }

    15.global
    要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。

    16.ifModified
    要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。

    17.jsonp
    要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

    18.username
    要求为String类型的参数,用于响应HTTP访问认证请求的用户名。

    19.password
    要求为String类型的参数,用于响应HTTP访问认证请求的密码。

    20.processData
    要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。

    21.scriptCharset
    要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

    如果页面中,带*的text,没有按要求填写完整,然后点击立即注册时,会自动提示:请把注册信息填完整


    如果注册信息按照要求填写完整后,则提示:注册成功,点击确定后,自动关闭子页面,并回到父页面中

    相关的代码段:

    //立即注册,首先要判断一下:用户名,姓名,密码,确认密码,联系方式是否为空,如果为空,就跳出提示:请把注册信息填写完整。如果不为空,则把数据插入到对应的网上注册委员登记fjsw.w_mbertoreg的这张表里。并跳出提示:注册成功,并关闭当前注册页
            function m_zhuce() {
                m_inp_user =encodeURIComponent( $("#inp_user").val());//用户名的值,并进行编码
                m_asp_psw = encodeURIComponent($("#asp_psw").val());//密码的值,并进行编码
                m_asp_cpsw = encodeURIComponent($("#asp_cpsw").val());//确认密码的值,并进行编码
                m_inp_name = encodeURIComponent($("#inp_name").val());//姓名的值,并进行编码
                m_inp_tel = encodeURIComponent($("#inp_tel").val());//联系方式的值,并进行编码
                var m_zc = $("#txt_zc").val();//职称的值
                var m_dw = $("#txt_dw").val();//单位的值
                var m_zw = $("#txt_zw").val();//职务的值
                var m_wg = $("#txt_wg").val();//工作组的值
                window.setTimeout(function () {//延迟
                    if (m_inp_user == "" || m_inp_name== "" || m_asp_psw== "" || m_asp_cpsw == ""||m_inp_tel=="") {//判断用户名,姓名,密码,确认密码,联系方式,是否为空
                        alert("请把注册信息填写完整");//为空时提示:请把注册信息填写完整
                    } else if (m_asp_psw != m_asp_cpsw) {//不为空时,判断密码和确认密码是否相同,若不同时
                        $("#span_ConfirmPasswordTip").css("color", "#f00");//span_ConfirmPasswordTip控件的字为红色
                        $("#span_ConfirmPasswordTip")[0].innerText = "密码不一致,请重新输入";//赋给span_ConfirmPasswordTip控件的值内容为:密码不一致,请重新输入
                        alert("密码与确认密码不一致");
                    } else if (m_useOrNo == "True") {//判断用户名若被占用时
                        
                        alert("该用户名已经被占用,请更换用户名");//提示:该用户名已经被占用,请更换用户名
                    }
                    else {
                        $("#span_ConfirmPasswordTip").css("color", "#0094ff");//span_ConfirmPasswordTip控件的字为蓝色
                        $("#span_ConfirmPasswordTip")[0].innerText = "密码输入一致";//赋给span_ConfirmPasswordTip控件的值内容为:密码输入正确
                        //account用户名m_inp_user  //name姓名//pwd密码//contact联系方式         
                        var m_url2 = "insert_mber_reg.aspx?acc=" + m_inp_user + "&nam=" + m_inp_name + "&pwd=" + m_asp_psw + "&con=" + m_inp_tel+"&zc="+m_zc+"&dw="+m_dw+"&zw="+m_zw+"&wg="+m_wg;
                        $.ajax({
                            url: m_url2,//地址
                            type: "GET",//用get方法
                            success: function (data) {
                                if (data == "True") {//数据已成功插入注册委员登入表,返回true
                                    alert("注册成功");
                                    window.close()//关闭窗口
                                }
                                if (data == "False") {
                                    $("#span_userTip").css("color", "#f00");//span_userTip控件的字为红色
                                    $("#span_userTip")[0].innerText = "* 该用户名已被占用,请更换!";//赋给span_userTip控件的值内容为:存在不合法字符,请更换
                                }
                                
                            },
                            error: function (error) {//违反唯一约束条件
                                var m_error = error.responseText;//获取错误text
                                if (m_error.indexOf("违反唯一约束条件")==63) {
                                   
                                    $("#span_userTip").css("color", "#f00");//span_userTip控件的字为红色
                                    $("#span_userTip")[0].innerText = "* 该用户名已被占用,请更换!";//赋给span_userTip控件的值内容为:存在不合法字符,请更换
    
                                }
                                
                            }
    
                        });
                        
                    }
                }, 1000);
                
            }
            

    涉及到的难点:window.setTimeout();
    window.setTimeout

    功能:用于在指定的毫秒数后调用函数或计算表达式。

    语法:setTimeout(code,millisec)

    参数:

    • code:在定时时间到时要执行的JavaScript代码串。
    • millisec:设定的定时时间,用毫秒数表示。

    返回值:定时器的ID值,可用于clearTimeout()方法停止指定的定时器。

    注:setTimeout()只执行code一次。如果要多次调用,可使用setInterval()或者让code自身再次调用setTimeout()。


    我是初学者,请各位前辈多多指教哈!
    展开全文
  • web的开发中有的时候我们需要用户登录注册页面 需要在输入框的里面有灰色字体进行提示 我之前都是使用复杂的JavaScript来实现 实现点击出现字符出现与消失 以及字符的颜色在灰色和黑色中变换 特别是密码...

    在web的开发中有的时候我们需要用户登录注册页面
    需要在输入框的里面有灰色字体进行提示
    我之前都是使用复杂的JavaScript来实现
    实现点击出现字符出现与消失
    以及字符的颜色在灰色和黑色中变换
    特别是密码输入框中需要涉及到两个输入框的显示与隐藏
    非常麻烦
    但是使用了placeholder占位符就不一样了
    可以方便快捷的实现这个功能

    示例代码:

    <body>
            <div id="div1">
                <div style="position: relative;">
                    <img src="../img/headportrait-login-register.png" class="img1">
                    <input id="button_login" class="button1" type="button" value="登录" style="color:#E59A00" onclick="login_onclick()">
                    <input id="button_register" class="button1" type="button" value="注册" style="color: black;" onclick="register_onclick()">
                </div>
                <div class="line"></div>
                <div id="user_register" style="display: none;">
                    <input placeholder="用户名" id="user_register_username" name="用户名" class="input1" type="text" />
                    <input placeholder="邮箱/手机号" id="user_register_contact" name="邮箱/手机号" class="input1" type="text" />
                    <input placeholder="密码" id="user_register_password" name="密码1" class="input1" type="password" />
                    <input placeholder="确认密码" id="user_register_ensurepassword" name="确认密码1" class="input1" type="password" />
                    <input placeholder="验证码" name="验证码" class="securitycode" type="text" /><input value="获取验证码" class="securitycode_made" type="button"><br>
                    <input value="同意协议并注册" name="同意协议并注册" class="agreement" type="radio"><span class="agreement">同意协议并注册</span><br>
                    <input value="注册" id="user_register_button" class="button2" type="button" onclick="ajax_user_register()" />
                </div>
                <form id="merchant_register" style="display: none">
                    <input placeholder="用户名" value="" name="用户名" class="input1" type="text" />
                    <input placeholder="邮箱/手机号" value="" name="邮箱/手机号" class="input1" type="text" />
                    <input placeholder="密码" value="" name="密码3" class="input1" type="password" />
                    <input placeholder="确认密码" value="" name="确认密码3" class="input1" type="password" />
                    <input placeholder="验证码" value="" name="验证码" class="securitycode" type="text"><input value="获取验证码" class="securitycode_made" type="button"><br>
                    <!-- style="color: #747474;"-->
                    <div class="havefile" id="leftfile">
                        <input name="店铺门面照" class="file" id="photo" type="file">
                        <span class="infile">店铺门面照</span>
                    </div>
                    <div class="havefile" id="rightfile">
                        <input name="经营许可证" class="file" type="file">
                        <span class="infile">经营许可证</span>
                    </div><br>
                    <input value="同意协议并注册" name="同意协议并注册" class="agreement" type="radio"><span class="agreement">同意协议并注册</span><br>
                    <input value="注册" type="submit" class="button2">
                </form>
                <form id="login" style="display: block;">
                    <input placeholder="用户名/邮箱/手机号" id="login_username_email_mobilephone" name="用户名/邮箱/手机号" class="input2" type="text">
                    <input placeholder="密码" id="login_password" name="密码2" class="input2" type="password">
                    <input placeholder="验证码" name="验证码" class="securitycode" type="text"><input value="获取验证码" class="securitycode_made" type="button"><br>
                    <input value="登录" type="button" class="button2" style="margin-top: 20px;" onclick="ajax_login()">
                </form>
                <div>
                    <input id="button_merchant" class="button1" type="button" value="商家" style="color: black;" onclick="merchant_onclick()">
                    <input id="button_user" class="button1" type="button" value="用户" style="color: rgb(229, 154, 0);" onclick="user_onclick()">
                </div>
            </div>
        </body>
    展开全文
  • web前端登录页面设计技巧

    千次阅读 2019-10-25 23:08:44
    首先我们先来了解的用户登录流程,先点击是注册,然后是登录,再有就是忘记密码,然后,每个功能做一个界面,这是最早的流程,现在越来越多的大型网站把登录和首页放在一起设计,原因就在于用户体验度;好的用户体验...

    首先我们先来了解的用户登录流程,先点击是注册,然后是登录,再有就是忘记密码,然后,每个功能做一个界面,这是最早的流程,现在越来越多的大型网站把登录和首页放在一起设计,原因就在于用户体验度;好的用户体验度,将提升产品的品质,赋予产品独特的气质,登录界面虽然功能简单,但是也是一个发挥情感化设计,提升用户体验;想要做的完美,必须要掌握以下几点

    1、精致的外观

    外观的重要性不言而喻,外观是给用户的第一感觉,它的覆盖面比较广,比如配色,布局,文字大小,质感,创意,图标等,还包括鼠标特效,选中状态,提示信息等。做为web前端设计师,在重视代码的准确性的同时,也需要和像素和颜色搞好关系,必须一个像素一个像素地检查屏幕上的每个细节,确保相关的图像准确对齐。

    2、完美用图

    在web前端开发中,配图非常具有表现力,它与颜色关系密切。所以大部分ui设计网页设计职位,对手绘能力出众者格外青睐,许多表现技法都是借鉴了绘画的表现技法。绘画与网页设计的的结合,具有独特的艺术魅力,从而更具表现力。越来越多的网页设计师,将插画运用到网页设计中来,生动有趣温情的配色和用途,能迅速的抓住用户的眼球,让登录界面的更加具有亲和力

    3、品牌传达

    虽然仅仅只是一个登录界面,客户停留的时间也比较短,但是作为开发者,我们还是要在里面强化品牌,设计以人为本,以人为本的设计不仅能提高产品的品质,还能提高设计的艺术水平,而登录页面是体现品牌文化,传播品牌理念的绝佳位置;表现形式可以是图片广告的形式,或者是文字链接的形式,或者是动画的形式等

    4、登录框

    登录界面要说谁最重要,肯定是登录框了,随着用户越来越追去人性化的操作,现在主流的登录框是越来越大,大输入框,可以让用户输入起来感到心情舒畅,登录过程非常愉悦,而且在显示器越来越大的今天,登录框和登录按钮必须要大而明显!后期还需要web工程师添加更好的用户体验效果,比如输入信息的正确性等

    5、简约而不简单

    用户看到的也许只是一个登录界面,但是作为设计师来说,里面包括的知识点是很多的,比如登录框的高度,宽度,比例,阴影,颜色,形状,纹理,背景等。作为web前端设计师来说,需要各种判断,兼容,跳转。总之现在的登录界面越来越倾向于简洁,最大程度的减少用户分心,从视觉的角度来看,简约的设计是平静的,取消了多余的元素,提高整体的视觉效果,实现真正的简约而不简单。
    在这里插入图片描述

    展开全文
  • web前端页面性能优化

    2014-05-05 14:23:45
    [size=large][color=blue]web前端页面性能优化[/color][/size] [size=medium] 影响用户访问的最大部分是前端的页面。网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:...
    [size=large][color=blue]web前端页面性能优化[/color][/size]


    [size=medium]

    影响用户访问的最大部分是前端的页面。网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。

    而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的。

    除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验。不仅仅如此,如果前端优化得好,他不仅可以为企业节约成本,他还能给用户带来更多的用户,因为增强的用户体验。说了这么多,那么我们应该如何对我们前端的页面进行性能优化呢?

    前端的页面主要包括xhtml,css,js。其实xhtml就是现实中所谈到的内容,页面的内容:文字,图片,flash,视频等。

    而前端开发工作者可以控制的是什么呢?那就是xhtml,css,js的代码及相应的修饰(背景)图片。下面我就根据我自己的经验来说说:

    一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。

    结构中主要包括了head和body两个部分,但是我们经常说的是结构语义化主要是body中的标签,但是我在这里还是简单的说一下head,head中其实包括了一些对于我们seo很有用的一些东西,比如title,Description,Keywords,这些东西在蜘蛛抓取的时候都是有帮助的,当然,还有其他的一些,我在此就不一一说明了,比如设置缓存等一些其他的信息。

    那么body中的话,包括的标签就很多了,我觉得作为一个合格的前端开发人员你应该去熟悉他们,比如div,span,h,ul,ol,dl,p等等这类的标签的使用。应该非常合理,还有就是注意h标签的断层,及h1标签的使用,这些都是非常重要的。

    同时在我们的结构中不要出现style和onclick这样的内联的样式和事件。希望大家能够注意结构与表现、行为的分离。

    二、css,js文件数量及大小的优化

    那么关于css、js的优化的话,一般情况下建议css和js采用外联式。但是如果你的页面内容比较多,设计师把整个效果做得比较花的话,恐怕css就非常多了,那么这种情况下,你一定要把你的css规划好,尽量的采用缩写,这样可以减少css文件的大小,那么对css做相应的规划也可以减少css的个数,减少http请求数,js同理。

    三、背景图片数量及大小的优化

    当我们将设计师的设计稿还原成静态页面后,除非页面所有的修饰全是色块,内容全是文字,没有图片,如果不是这样的话,那么我们需要对图片做优化处理。当然内容图片我们是没有办法了,因为他是属于内容部分的,一般情况是由于编辑处理,当然,我在还是有一个小小的建议,如果我们的网站中需要有内容图片,希望编辑能够将他们最优化以后,在进行上传,一会儿告诉我的方法,下面我在说说,作为前端开发应该如何处理我们的修饰(背景)图片。

    由于我们的背景图片数量比较多,这样的话,会给服务器带来影响,增加了http请求数,我们是否有一种好的解决办法呢?这个答案是肯定的,如果你是一个合格的前端开发,你应该清楚,在我们的css定义背景的时候,可以通过坐标来实现对背景进行定位的,既然如此,那么我们可以将这些背景合并起来,这样即可减少http请求数,同时,我们在背景整合的时候,也需要考虑图片质量,同时也需要考虑图片的大小,我在以前有写过相应的博文。

    四、内容图片的大小的优化

    其实刚才已经说了内容图片的问题,那么我在这里呢,告诉大家一个比较简单的方法,就是使用雅虎提供的一个工具。他就是smushit:http://www.smushit.com/

    不过他这个工具我觉得对于我们需要发布的内容图片还是比较麻烦,但是他可以进行优化,优化图片的目的,最开始已经说了,图片越小,我们的用户下载速度越快,当然对企业的服务器的带宽也可以起到节省的作用。

    上面是我关于前端页面性能的一些简单的看法,当然web标准中提到的结构,表现,行为,我们工作说的xhtml,css,js其实他们还有很多东西,需要我们去学习,比如结构语义化他就是一个深入研究的课题,性能优化也是如此,不过只有我们不断的去挖崛,我们才可能进步。下面对我前端开发的出品有一个简单的建议:

    1、我们做还原的页面能够通过http://validator.w3.org的验证,当然css希望也能通过http://jigsaw.w3.org/css-validator/validator难证,不过有时候由于需要兼容多浏览器,会受到hack的影响,css不做强制要求。

    2、作前端的我觉得应该知道yslow。如果不知道可以看看我以前写的文章,你觉得你的静态页面应该能够通过yslow2.0的classic(V1)级别的检测,检测的结果我觉得应该得到A。

    3、你的背景图片保证不超过3个以上,你的css文件不超过2个,js文件不超过3个。而且良好的遵守web标准的一些规定,css放到head中,js文件放到</body>之前或者之后。

    4、当然就是希望你能够对你的页面进行裸体检查。其实就是来检验你的结构语义化是否有效果。

    裸体检查:就是将你的css和js都去掉,查看你的html,看这些内容你是否能够看懂。

    5、检测你的h标签是否断层。

    6、建议body中增加text-align:center。

    7、当然还有很多,比如什么id,class的命名呀,这些东西,我觉得应该是你的团队中应该做的事情。

    8、作为大型网站来说,首页使用内联式样式表,这样可以减少http请求数的同时,也可以防止裸奔。当然其他页面需要使用外联样式表,这样才可以方便维护。因为作为大型网站来说,他的首页访问量是非常的大的,所以。。

    把样式表置于顶部
    把脚本置于页面底部
    避免使用 CSS 表达式(Expression)
    使用外部 JavaScript 和 CSS
    削减 JavaScript 和 CSS
    用 <link> 代替 @import
    避免使用滤镜
    剔除重复脚本
    减少DOM访问
    开发智能事件处理程序

    最好的方案就是按照 HTML 规范在文档 <head /> 内加载你的样式表。

    对于拥有较大浏览量的首页来说,有一种技术可以平衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和 CSS ,但是在页面下载完成后动态下载外部文件,在子页面中使用到这些文件时,它们已经缓存到浏览器了。

    Coockie:

    减小Cookie体积
    对于页面内容使用无coockie域名

    图片:

    优化图像
    优化CSS Spirite
    不要在HTML中缩放图像
    favicon.ico要小而且可缓存

    移动应用:

    保持单个内容小于25K
    打包组件成复合文本

    此文中谈到了编辑,其实通过我走过的公司来看,很多公司其实不止是编辑,甚至连开发,他们对xhtml的规划都还不够非常了解,所以经常会出现已经上线的页面出现一些这样那样的问题,比如注释,或者标签不闭合等等,所以我建议各个公司可以开一些关于交流的会,这样的话,各个职位间可以交互交流,其实也可以说是培训吧,只有这样,才能够打造出一个好的产品。[/size]
    展开全文
  • Java Web实现登陆注册页面前端与后台数据连接(代码+sql文件)。Java Web实现登陆注册页面前端与后台数据连接(代码+sql文件)。Java Web实现登陆注册页面前端与后台数据连接(代码+sql文件)。
  • 那么什么叫web前端页面性能优化呢? 我们建设网站的目的不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的。除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上...
  • 登录注册页面模板汇总WEB前端(50套)

    千次阅读 2019-06-11 16:31:00
    土地指标管理系统入口登录页面 土地指标管理系统入口登录页面.zip: https://u18740809.pipipan.com/fs/18740809-382374353 紫色响应式登录页面模板 紫色响应式登录页面模板.zip: ...
  • web前端页面性能优化

    2011-12-20 16:12:00
    影响用户访问的最大部分是前端页面。网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。 而...
  • 影响用户访问的最大部分是前端页面。网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等。而前端呢?其实应该是属于功能的表现。 而...
  • Web前端 | 注册表单验证

    万次阅读 2018-05-08 20:17:56
    注册格式要求:   页面中所有项均为必填项 登录账号:只能是数字或字母且以字母开头 密码:大于8位且需要有字母和数字之外的字符 姓名:格式为2-4个汉字 出生年月日:格式为yyyy-mm-dd 【eg:1998-02-17】 ...
  • [color=darkblue]web前端页面性能优化小结[/color] [size=medium] PS:结合了精英的思想和自己的一些小小的总结~ 影响用户访问的最大部分是前端的页面。网站的划分一般为二:前端和后台。我们可以理解成...
  • WEB前端开发实用案例教程 第七单元注册页面 Axure动态面板与表单在网页中的应用 表单在网页中的作用不可小视,应用表单可以收集来自用户的信息,表单通 常的用处包括网上调查网上订单和建立搜素界面等当用户在表单中...
  • 效果图 用到的图片 代码: <!DOCTYPE html> <html lang="en">...注册页面</title> <style> body{ background: url("../image/register_bg.png") no-repeat center;
  • zjbims1:综合运管培训源码,只有四个必须模块1.注册中心regiester 2.网关网关3.前端页面web 4.系统管理功能系统5.前端扩展页面web-extend
  • 觉得博文有用,请点赞,请评论...注册页面1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
  • 今天研究了网易用户注册的表单,以及其及时验证,本真人不得不说无论是它的布局结构还是其风骚的“弹出式加载验证”都是让人眼前一亮,居然还可以这样玩!… html代码:<!--logo位置--> <div id="header"><img src=...
  • 1.4 HTML注册页面案例 注册页面</title> </head> <body> <!-- 定义表单--> <form action="#" method="post"> <table border="1" align="center" width="500px"> <tr> <td><label for="username">用户名</label></td...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 673
精华内容 269
关键字:

web前端注册页面