冲刺总结（二）
完成任务：前端设计。
设计系统前端，利用html和css对登录页面和进入系统操作界面进行界面化设计，使系统看起来美观、简洁。
一、设计思路
利用HTML对整个网页页面进行布局和设计内容，使用CSS对每一个组件的具体样式进行设计美化，在整体的布局和样式做好后让 JavaScript 负责与后台进行交互，实现整个网页的动态实现。
二、 登录界面
各部分代码功能：
1、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
这段代码叫做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。这里说明你用的是"HTML 4.01"版本。类似的还有: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"这里声明本文档使用的是XHTML 1.0版本。其中的DTD(例如loose.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。
2、头部分<head></head>：
<base href="<%=basePath%>">
base标记是一个基链接标记，是一个单标记。用以改变文件中所有连结标记的参数内定值。它只能应用于标记<head>与</head>之间。你网页上的所有相对路径在链接时都将在前面加上基链接指向的地址。
href—设定前缀的链接地址
target—设定文件显示的窗口,同a标记中的target
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
meta是html的元标签,其中包含了对应html的相关信息,客户端浏览器或服务端程序都会根据这些信息进行处理.
http类型：这个网页是表现内容用的
content(内容类型)：这个网页的格式是文本的。
charset(编码)：这个网页的编码是UTF-8,需要注意的是这个是网页内容的编码,而不是文件本身的。编码不用说，content常见的还有xml等类型。
http-equiv类似于http的头部协议，他回应浏览器一些有用的信息，以帮助正确和精确地显示网页内容。常用的http-equiv类型有：Content-Type和Content-Lanauage(显示字符集的设定)。
说明：设定页面使用的字符集，用以说明主页制作所使用的语言和文字，浏览器会根据此来调用相应的字符集显示网页内容。
<title>公文传输系统</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
定义css样式。将body部分上下左右页边距设为0像素。
<link href="css/css.css" rel="stylesheet" type="text/css" />
调用一个外部的CSS样式文件。他是通过<link/>这个标签来调用的。然后， href="css/css.css" 表示外部样式文件的路径。rel="stylesheet"表示：调用的是一种样式。告诉浏览器你将采用一个样式表文件简单来说就是告诉浏览器你将采用什么编码来对下面的内容进行处理。type="text/css" 表示：就具体说明调用样式的文件类型为CSS样式！
<script type="text/javascript">
function commit() {
if(form1.username.value=="") {
alert("请您输入用户名！");
form1.username.focus();
return false;
}
if(form1.password.value=="") {
alert("请您输入密码！");
form1.password.focus();
return false;
}
return true;
}
</script>
在页面中插入一段JavaScript脚本。用于输入用户名和密码。
3、主体部分<body></body>：
<body>
<form action="files/login/check_login.jsp" method="post" name="form1" onsubmit="return commit()">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="147" background="images/top02.gif" width="100%" >
<h1 align="center">公文传输系统</h1>
</td>
</tr>
</table>
<center>
<fieldset style="width:562px;align=center">
<table width="562" border="0" align="center" cellpadding="0" cellspacing="0" class="right-table03">
<tr>
<td width="221"><table width="95%" border="0" cellpadding="0" cellspacing="0" class="login-text01">
<tr>
<td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="login-text01">
<tr>
<td align="center"><img src="images/ico14.gif" width="107" height="97" /></td>
</tr>
<tr>
<td height="40" align="center"> </td>
</tr>
</table></td>
<td><img src="images/line01.gif" width="5" height="292" /></td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="31%" height="35" class="login-text02">帐 号 <br /></td>
<td width="69%"><input name="username" id= "username" type="text" size="28" style="width:150px" /></td>
</tr>
<tr>
<td height="35" class="login-text02">密 码 <br /></td>
<td><input name="password" id="password" type="password" size="30" style="width:150px"/></td>
</tr>
<tr>
<td height="35" class="login-text02">角 色 <br /></td>
<td><input name="role" type="radio" value="0" />管理员<input name="role" type="radio" value="1" />单位<input name="role" type="radio" value="2" />员工</td>
</tr>
<tr>
<td height="35"> </td>
<td><input name="Submit2" type="submit" class="right-button02" style="color: red" value="登 录" />
<input name="reset232" type="reset"" class="right-button02" style="color: red" value="重 置" /></td>
</tr>
<%
if("0".equals(request.getParameter("info"))){ %>
<font color="red">密码错误，请重新填写！</font>
<%}else if("1".equals(request.getParameter("info"))){ %>
<font color="red">账号不存在，请重新填写！</font>
<%}%>
</table></td>
</tr>
</table>
</fieldset>
</center>
</form>
</body>
创建界面HTML表单，当提交表单时，发送登录界面表单中用户输入的数据到files/login/check_login.jsp中处理输入内容。
再通过建立表单的方式，对登录界面这一整个表单进行划分，划分成为不同的表格，在其中设计出账户、密码、角色等表格模块。最终根据实现效果进行美化。
当账号不存或者密码错误时，调用JavaScript脚本，出示相应提示信息。
登录界面：
三、操作界面
该部分为用户登录进入系统后网页左边显示的菜单栏。首先用HTML对整个菜单栏页面进行布局和设计内容，该部分我建立了一个表单，再将表单切割为几大模块。分别是管理员、单位和员工所对应的不同功能。再用CSS对每一个组件的具体样式进行设计美化。最后调用 JavaScript脚本， 实现与后台进行交互，让菜单栏显示出与登录页面所选角色相对应的具体功能。
JavaScript脚本如下：
<SCRIPT language=JavaScript>
function tupian(idt){
var nametu="xiaotu"+idt;
var tp = document.getElementById(nametu);
tp.src="../images/ico05.gif";//图片ico04为白色的正方形
for(var i=1;i<80;i++)
{
var nametu2="xiaotu"+i;
if(i!=idt*1)
{
var tp2=document.getElementById('xiaotu'+i);
if(tp2!=undefined)
{tp2.src="../images/ico06.gif";}//图片ico06为白色的正方形
}
}
}
function list(idstr){
var name1="subtree"+idstr;
var name2="img"+idstr;
var objectobj=document.all(name1);
var imgobj=document.all(name2);
//alert(imgobj);
if(objectobj.style.display=="none"){
for(i=1;i<10;i++){
var name3="img"+i;
var name="subtree"+i;
var o=document.all(name);
if(o!=undefined){
o.style.display="none";
var image=document.all(name3);
//alert(image);
image.src="../images/ico04.gif";
}
}
objectobj.style.display="";
imgobj.src="../images/ico03.gif";
}
else{
objectobj.style.display="none";
imgobj.src="../images/ico04.gif";
}
}
</SCRIPT>
主体运用HTML和CSS设计部分代码略。
操作界面——菜单栏：
四、问题与解决
1、问题：如何在input输入框中自动获取焦点？
解决：在该input标签后添加autofocus=“autofocus”。
用户名：<input type="text" id="username" name="username" autofocus="autofocus"/><br/>
密码：<input type="text" id="password" name="password"/><br/>
2、问题：在用CSS设计时，如何让背景有透明度文字不变？
（1）背景为纯色背景非图片
用background:rgba(x,x,x,x)来让背景带有透明度
四个参数的值是指:
red红色;green绿色;blue蓝色;alpha透明度
rgb三个参数有正整数值和百分数值2两个取值范围：
正整数值的取值范围为：0 - 255；
百分数值的取值范围为：0.0% - 100.0%。
a取值范围在:0~1(数值越小,越透明)。
HTML代码：
<body>
<div class="纯色背景div"></div>
</body>
CSS代码：、
.纯色背景div{
background:rgba(0,0,0,.6);
（2）背景为图片背景
用opacity(x)来设置背景的透明度。
x指的是alpha透明度，取值范围也在 0~1(数值越小,越透明)。
css的opacity属性可以让很多元素都变透明,这里要让背景变透明而文字不变透明需要一点小技巧：将背景取出来单独放个div再把这个div和原来的div重叠。
HTML代码：
<body>
<div class="背景"></div>
<div class="其他内容">可得解脱处，唯神佛前，与山水间</div>
</body>
CSS代码：
.背景{
background:url("bg.jpg") no-repeat;
background-size: 100% 100%;
height: 800px;
position: absolute;
opacity:0.6;
}
.其他内容{
height: 800px;
background-size: 100% 100%;
color:white;
}
3、问题：如何让一个标签禁止点击？
解决：在标签的样式加上以下属性：
<a style="pointer-events: none;"/>
pointer-events是CSS3的一个属性，支持的值非常多，其中大部分都是和SVG有关；
pointer-events: none;可以让鼠标事件失效（链接、点击等事件），阻止用户的点击动作产生任何效果，不仅在a标签中可以用，在img标签等元素中也可以使用、阻止鼠标点击事件。
4、问题：mysql连接报错：ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
解决：系统偏好设置 -> 最下面mysql -> 进入 -> 点击initialize database -> 输入密码，连解时也输入这个密码。
