大三小学期 web前端开发的一些小经验

1.html是页面的布局设计，就是页面上要放哪些东西，比如登录界面需要按钮，输入框等等；css是被用于使用设计部件和布局，例如哪些部件放在哪里，多宽多大，是否有边框等；js/jQuery是用于实现函数的，比如按按钮会调用哪些函数。

 

2.使用jquery需要调用 

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

使用bootstrap需要调用

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
//head里面

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
//body里面

3.background-size: 100% 100%;//整个部件铺满背景，但背景自适应部件可能会变形；

  background-size：cover；//整个部件铺满背景，但部件会从背景正中抠出部件大小的一块，即无法显示所有背景

4.背景透明度：eg：opacity: 0.6;

  可以用filter设置高斯模糊，可参考http://www.zhangxinxu.com/study/201502/image-local-blur-by-background-attachment-fixed.html

5.js按钮检查部件输入框是否为空：

function check(str) {
    var x=document.getElementById(str);
    var error1=document.getElementById("userError");
    var error2=document.getElementById("passwordError");
    var submitOK = true;
    if(str=="username")
    {
        if(x.value===""||x.value.replace(/(^s*)|(s*$)/g, "").length ===0)
        {

            submitOK=false;
        }
        else
        {
            submitOK=true;
        }
    }
    else if(str=="password")
    {
        if(x.value===""||x.value.replace(/(^s*)|(s*$)/g, "").length ===0)
        {

            submitOK=false;
        }
        else
        {

            submitOK=true;
        }
    }
    return submitOK;
}

 function validate() {
     var arr=["username","password"];
     var i =0;
     var submit=true;
     while(i<=2)
     {
         if(!check(arr[i]))
         {
             submit=false;
             break;
         }
         i++;
     }
     return submit;

 }

 function onclickSubmit() {
     if(validate())
     {
         location.reload();
         //window.location.replace("displayManage.jsp");
     }
     else
     {
         alert("请完成登录信息填写！");
     }
 }

HTML:

<form class="input-form" name="input-form" method="post" id="loginForm" onsubmit="return validate()">
<input type="text" id="username" placeholder="请输入用户名" name="username" onchange="check(this.id)">
<input type="submit" name="login" value="登     录" id="login" onclick="onclickSubmit()"

6.a:link:链接未点击过；a:visited:链接已经被点击过；a:hover：鼠标放上去时；a:active:鼠标点击的时候

这些都是有默认值的，如果需要可以在css中定义；

如果针对链接进行设计，例如设a.now:link，在链接中使用添加class=“now”

7.已经不可以使用<button>，使用<input>.可以设置type="image"//图片按钮,type="button"//按钮,type="submit"//提交form内容

8.js显示部件：

document.getElementById("xxx").style.display="block";

隐藏部件：

document.getElementById("xxx").style.display="none";

设置显示时间：

document.getElementById("xxx").style.display="";
setTimeout(function(){document.getElementById("xxx").style.display="none"},1500);

9.在web.xml中设置默认打开页面：

<welcome-file-list>
    <welcome-file>xxx.jsp</welcome-file>
</welcome-file-list>

10.动态获取数据显示列表：

<s:iterator value="这里填获取的动态列表名">
    <div>
    </div>
</s:iterator>