大三小学期 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>