JavaWeb网上图书商城完整项目--24.注册页面的css样式实现

现在框架已经做好了，即下来我们要对页面进行装饰了，第一步给每一个元素添加id

1、最外面的div添加id为divMain

2、第二个div添加id为divTitle，里面的span对应的id为spanTitle

3、第三个div添加id为divBody，里面的table对应的id为tableForm

4、table里面对应的input 对应的id的名称就是其那么对应的名称

添加的id如下：

复制代码
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册</title>
</head>
<body>
<div id="divMain">
<div id="divTitle"><span id="spanTitle">新用户注册</span></div>
<div id="divBoby"><table id="tableForm">
<tr>
<td>用户名：</td>
<td><input type="text" name ="loginname" id="loginname"/></td>
<td><label>用户名不能为空</label></td>
</tr>

<tr>
<td>登陆密码：</td>
<td><input type="password" name ="loginpass" id="loginpass"/></td>
<td><label></label></td>
</tr>

<tr>
<td>确认密码：</td>
<td><input type="password" name ="reloginrepass" id="reloginrepass"/></td>
<td><label></label></td>
</tr>

<tr>
<td>Emain：</td>
<td><input type="password" name ="email" id="email"/></td>
<td><label></label></td>
</tr>

<tr>
<td>图形验证码：</td>
<td><input type="text" name ="verifyCode" id="verifyCode"/></td>
<td><label></label></td>
</tr>

<tr>
<td></td>
<td><img  src=""></td>
<td><label><a href="">换一张</a></label></td>
</tr>


<tr>
<td></td>
<td><input  type="image"  src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/></td>
<td><label></label></td>
</tr>


</table></div>
</div>
</body>
</html>
复制代码

接下来我们要创建一个regist.css

 

然后在html中引入该css

<link  rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">

我们来如何进行regist.css代码的编写：

我们先来看一个简单的列子：

复制代码
<style type="text/css">
#container {
    width: 80%;
    height: 500px;
}

.attr {
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    background-color: #008b57;
}
</style>



<div id='container'>
    <div class='attr'></div>
</div>
复制代码

这里是我们是使用id的方式

第一步首先给divTitle和divBody设置宽度和高度

#divTitle{width:880px;heigth:30px}
#divBody{width:880px;heigth:400px}

然后添加边框

#divTitle{width:880px;heigth:30px;border:1px solid #d0d0d0}
#divBoby{width:880px;heigth:400px;border:1px solid #d0d0d0}
border:1px solid #d0d0d0 1px表示线条宽度 solid是实心线条，
#d0d0d0表示线条的颜色
我们运行看下效果

 

我们会发现divTitle下方的边框和divBody上方的边框重合了变粗了

我们修改下样式，不设置divBody上面的边框

#divTitle{width:880px;heigth:30px;border:1px solid #d0d0d0}
#divBoby{width:880px;heigth:400px;border-left:1px solid #d0d0d0;border-right: 1px solid #d0d0d0 ; border-bottom: 1px solid #d0d0d0}

接下来将整个注册页面的布局向中间移动我们需要给divMain添加外边距

#divMain{margin-left: 240px}
#divTitle{width:880px;heigth:30px;border:1px solid #d0d0d0}
#divBoby{width:880px;heigth:400px;border-left:1px solid #d0d0d0;border-right: 1px solid #d0d0d0 ; border-bottom: 1px solid #d0d0d0}

接下来我们设置spanTitle，外边18px，字体是粗体

#divMain{margin-left: 240px}
#divTitle{width:880px;heigth:50px;border:1px solid #d0d0d0}
#divBoby{width:880px;heigth:400px;border-left:1px solid #d0d0d0;border-right: 1px solid #d0d0d0 ; border-bottom: 1px solid #d0d0d0}
#spanTitle{margin-left: 18px;font-weight: 900}

接下来我们设置spanTitle背景图片，我们取一张图片的部分区域作为背景色

 

 

 
#divMain{margin-left: 240px}
#divTitle{width:880px;heigth:50px;border:1px solid #d0d0d0;background: url(/goods/images/bg_btns.png)}
#divBoby{width:880px;heigth:400px;border-left:1px solid #d0d0d0;border-right: 1px solid #d0d0d0 ; border-bottom: 1px solid #d0d0d0}
#spanTitle{margin-left: 18px;font-weight: 900;}

 

 

url(/goods/images/bg_btns.png)背景图片的位置

接下来设置表格

 

我们使用class来定义，为啥使用class不使用id了，表格中第一列是一个样式，第二列是一样样式，第三列是一个样式，每个样式有多个元素，多个元素具有相同的样式我们使用class比较好
我们先定义样式的id
复制代码
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册</title>
<link  rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">
</head>
<body>
<div id="divMain">
<div id="divTitle"><span id="spanTitle">新用户注册</span></div>
<div id="divBoby"><table id="tableForm">
<tr>
<td class="tdText">用户名：</td>
<td class="tdInput"><input type="text" name ="loginname" id="loginname"/></td>
<td class="tdError"><label>用户名不能为空</label></td>
</tr>

<tr>
<td class="tdText">登陆密码：</td>
<td class="tdInput"><input type="password" name ="loginpass" id="loginpass"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">确认密码：</td>
<td class="tdInput"><input type="password" name ="reloginrepass" id="reloginrepass"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">Emain：</td>
<td class="tdInput"><input type="password" name ="email" id="email"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">图形验证码：</td>
<td class="tdInput"><input type="text" name ="verifyCode" id="verifyCode"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText"></td>
<td class="tdInput"><img  src=""></td>
<td class="tdError"><label><a href="">换一张</a></label></td>
</tr>


<tr>
<td class="tdText"></td>
<td class="tdInput"><input  type="image"  src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/></td>
<td class="tdError"><label></label></td>
</tr>


</table></div>
</div>
</body>
</html>
复制代码

即下来我们在css中设置class的样式

首先设置tableForm的行高为50px，边框为1px

#divMain{margin-left: 240px}
#divTitle{width:880px;heigth:50px;border:1px solid #d0d0d0;background: url(/goods/images/bg_btns.png)}
#divBoby{width:880px;heigth:400px;border-left:1px solid #d0d0d0;border-right: 1px solid #d0d0d0 ; border-bottom: 1px solid #d0d0d0}
#spanTitle{margin-left: 18px;font-weight: 900;}
#tableForm{line-height: 50px;border: 1px}
.tdText{width:300px }
.tdInput{width:250px }
.tdError{width:250px }

接下来让tdText右对齐

#divMain{margin-left: 240px}
#divTitle{width:880px;heigth:50px;border:1px solid #d0d0d0;background: url(/goods/images/bg_btns.png)}
#divBoby{width:880px;heigth:400px;border-left:1px solid #d0d0d0;border-right: 1px solid #d0d0d0 ; border-bottom: 1px solid #d0d0d0}
#spanTitle{margin-left: 18px;font-weight: 900;}
#tableForm{line-height: 50px;border: 1px}
.tdText{width:300px ;text-align: right;}
.tdInput{width:250px }
.tdError{width:250px }

我们运行看下样式

接下来设置input的宽度和高度

我们先给input添加class

复制代码
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册</title>
<link  rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">
</head>
<body>
<div id="divMain">
<div id="divTitle"><span id="spanTitle">新用户注册</span></div>
<div id="divBoby"><table id="tableForm">
<tr>
<td class="tdText">用户名：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="loginname" id="loginname"/></td>
<td class="tdError"><label>用户名不能为空</label></td>
</tr>

<tr>
<td class="tdText">登陆密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="loginpass" id="loginpass"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">确认密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="reloginrepass" id="reloginrepass"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">Emain：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="email" id="email"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">图形验证码：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="verifyCode" id="verifyCode"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText"></td>
<td class="tdInput"><img  src=""></td>
<td class="tdError"><label><a href="">换一张</a></label></td>
</tr>


<tr>
<td class="tdText"></td>
<td class="tdInput"><input  type="image"  src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/></td>
<td class="tdError"><label></label></td>
</tr>


</table></div>
</div>
</body>
</html>
复制代码

 

我们编写css的样式：

复制代码
#divMain{margin-left: 240px}
#divTitle{width:880px;heigth:50px;border:1px solid #d0d0d0;background: url(/goods/images/bg_btns.png)}
#divBoby{width:880px;heigth:400px;border-left:1px solid #d0d0d0;border-right: 1px solid #d0d0d0 ; border-bottom: 1px solid #d0d0d0}
#spanTitle{margin-left: 18px;font-weight: 900;}
#tableForm{line-height: 50px;border: 1px}
.tdText{width:300px ;text-align: right;}
.tdInput{width:250px }
.tdError{width:250px }
.inputClass{width: 240px;height: 32px;border: 1px solid #7f9db9;line-height: 32px}
复制代码
width: 240px;height: 32px;border: 1px solid #7f9db9;line-height: 32px，其中width是宽度，heigth是高度，border是边框的厚度，边框是实心线，边框的颜色是
#7f9db9，line-height设置为和heigth的值一样是为了保证光标居中显示


我们运行看下效果

我们给光标添加下内边距

复制代码
#divMain{margin-left: 240px}
#divTitle{width:880px;heigth:50px;border:1px solid #d0d0d0;background: url(/goods/images/bg_btns.png)}
#divBoby{width:880px;heigth:400px;border-left:1px solid #d0d0d0;border-right: 1px solid #d0d0d0 ; border-bottom: 1px solid #d0d0d0}
#spanTitle{margin-left: 18px;font-weight: 900;}
#tableForm{line-height: 50px;border: 1px}
.tdText{width:300px ;text-align: right;}
.tdInput{width:250px }
.tdError{width:250px }
.inputClass{width: 240px;height: 32px;border: 1px solid #7f9db9;line-height: 32px;padding-left: 10px}
复制代码

我们再来看下运行的效果

 

接下来我们要让验证码的图片显示出来，请看

JavaWeb网上图书商城完整项目--验证码

显示在web.xml中配置servlet

复制代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:web="http://java.sun.com/xml/ns/javaee" 
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
 version="2.5">
  <filter>
    <filter-name>EncdoingFilter</filter-name>
    <filter-class>cn.itcast.filter.EncodingFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>EncdoingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
   <servlet>
    <servlet-name>VerifyCodeServlet</servlet-name>
    <servlet-class>cn.itcast.vcode.servlet.VerifyCodeServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>VerifyCodeServlet</servlet-name>
    <url-pattern>/VerifyCodeServlet</url-pattern>
  </servlet-mapping>
</web-app>
复制代码

接下来在regist.jsp中引入该servlet

复制代码
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册</title>
<link  rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">
</head>
<body>
<div id="divMain">
<div id="divTitle"><span id="spanTitle">新用户注册</span></div>
<div id="divBoby"><table id="tableForm">
<tr>
<td class="tdText">用户名：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="loginname" id="loginname"/></td>
<td class="tdError"><label>用户名不能为空</label></td>
</tr>

<tr>
<td class="tdText">登陆密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="loginpass" id="loginpass"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">确认密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="reloginrepass" id="reloginrepass"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">Emain：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="email" id="email"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">图形验证码：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="verifyCode" id="verifyCode"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText"></td>
<td class="tdInput"><img  src="<c:url value='/VerifyCodeServlet'/>"></td>
<td class="tdError"><label><a href="">换一张</a></label></td>
</tr>


<tr>
<td class="tdText"></td>
<td class="tdInput"><input  type="image"  src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/></td>
<td class="tdError"><label></label></td>
</tr>


</table></div>
</div>
</body>
</html>
复制代码

我们运行看下效果

接下来我们给这个验证码图片增加样式

首先给验证码添加id

复制代码
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册</title>
<link  rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">
</head>
<body>
<div id="divMain">
<div id="divTitle"><span id="spanTitle">新用户注册</span></div>
<div id="divBoby"><table id="tableForm">
<tr>
<td class="tdText">用户名：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="loginname" id="loginname"/></td>
<td class="tdError"><label>用户名不能为空</label></td>
</tr>

<tr>
<td class="tdText">登陆密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="loginpass" id="loginpass"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">确认密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="reloginrepass" id="reloginrepass"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">Emain：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="email" id="email"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">图形验证码：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="verifyCode" id="verifyCode"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText"></td>
<td class="tdInput"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"></td>
<td class="tdError"><label><a href="">换一张</a></label></td>
</tr>


<tr>
<td class="tdText"></td>
<td class="tdInput"><input  type="image"  src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/></td>
<td class="tdError"><label></label></td>
</tr>


</table></div>
</div>
</body>
</html>
复制代码

我们在css中进行定义样式

将图片放大显示将宽度设置成100px

复制代码
#divMain{margin-left: 240px}
#divTitle{width:880px;heigth:50px;border:1px solid #d0d0d0;background: url(/goods/images/bg_btns.png)}
#divBoby{width:880px;heigth:400px;border-left:1px solid #d0d0d0;border-right: 1px solid #d0d0d0 ; border-bottom: 1px solid #d0d0d0}
#spanTitle{margin-left: 18px;font-weight: 900;}
#tableForm{line-height: 50px;border: 1px}
.tdText{width:300px ;text-align: right;}
.tdInput{width:250px }
.tdError{width:250px }
.inputClass{width: 240px;height: 32px;border: 1px solid #7f9db9;line-height: 32px;padding-left: 10px}
#imgVerifyCode{width: 100px}
复制代码

即下来我们需要验证码居中显示，我们先给包括图片的div添加id，然后再给其设置样式

复制代码
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册</title>
<link  rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">
</head>
<body>
<div id="divMain">
<div id="divTitle"><span id="spanTitle">新用户注册</span></div>
<div id="divBoby"><table id="tableForm">
<tr>
<td class="tdText">用户名：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="loginname" id="loginname"/></td>
<td class="tdError"><label>用户名不能为空</label></td>
</tr>

<tr>
<td class="tdText">登陆密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="loginpass" id="loginpass"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">确认密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="reloginrepass" id="reloginrepass"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">Emain：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="email" id="email"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText">图形验证码：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="verifyCode" id="verifyCode"/></td>
<td class="tdError"><label></label></td>
</tr>

<tr>
<td class="tdText"></td>
<td class="tdInput"><div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"></div></td>
<td class="tdError"><label><a href="">换一张</a></label></td>
</tr>


<tr>
<td class="tdText"></td>
<td class="tdInput"><input  type="image"  src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/></td>
<td class="tdError"><label></label></td>
</tr>


</table></div>
</div>
</body>
</html>
复制代码

我们来看下css的代码

复制代码
#divMain{margin-left: 240px}
#divTitle{width:880px;heigth:50px;border:1px solid #d0d0d0;background: url(/goods/images/bg_btns.png)}
#divBoby{width:880px;heigth:400px;border-left:1px solid #d0d0d0;border-right: 1px solid #d0d0d0 ; border-bottom: 1px solid #d0d0d0}
#spanTitle{margin-left: 18px;font-weight: 900;}
#tableForm{line-height: 50px;border: 1px}
.tdText{width:300px ;text-align: right;}
.tdInput{width:250px }
.tdError{width:250px }
.inputClass{width: 240px;height: 32px;border: 1px solid #7f9db9;line-height: 32px;padding-left: 10px}
#imgVerifyCode{width: 100px}
#divVerifyCode{text-align: center;border: 1px solid #e2e2e2;}
复制代码
#divVerifyCode{text-align: center;border: 1px solid #e2e2e2;}其中
text-align: center让div中的内容居中，div中的内容是img验证码图片，这样验证码图片就居中中
;border: 1px solid #e2e2e2给验证码添加边框

运行的效果如下：

即下来我们设置用户名不能为空的样式，首先我们添加class和id

复制代码


复制代码


<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册</title>
<link  rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">
</head>
<body>
<div id="divMain">
<div id="divTitle"><span id="spanTitle">新用户注册</span></div>
<div id="divBoby"><table id="tableForm">
<tr>
<td class="tdText">用户名：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="loginname" id="loginname"/></td>
<td class="tdError"><label class="errorClass" id="loginnameError">用户名不能为空</label></td>
</tr>

<tr>
<td class="tdText">登陆密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="loginpass" id="loginpass"/></td>
<td class="tdError"><label class="errorClass" id="loginpassError"></label></td>
</tr>

<tr>
<td class="tdText">确认密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="reloginrepass" id="reloginrepass"/></td>
<td class="tdError"><label class="errorClass" id="reloginrepassError"></label></td>
</tr>

<tr>
<td class="tdText">Email：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="email" id="email"/></td>
<td class="tdError"><label class="errorClass" id="emailError"></label></td>
</tr>

<tr>
<td class="tdText">图形验证码：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="verifyCode" id="verifyCode"/></td>
<td class="tdError"><label class="errorClass" id="verifyCodeError"></label></td>
</tr>

<tr>
<td class="tdText"></td>
<td class="tdInput"><div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"></div></td>
<td class="tdError"><label ><a href="">换一张</a></label></td>
</tr>


<tr>
<td class="tdText"></td>
<td class="tdInput"><input  type="image"  src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/></td>
<td class="tdError"><label></label></td>
</tr>


</table></div>
</div>
</body>
</html>


复制代码




 


 


复制代码


 


即下来在css中添加样式




复制代码


#divMain{margin-left: 240px}
#divTitle{width:880px;heigth:50px;border:1px solid #d0d0d0;background: url(/goods/images/bg_btns.png)}
#divBoby{width:880px;heigth:400px;border-left:1px solid #d0d0d0;border-right: 1px solid #d0d0d0 ; border-bottom: 1px solid #d0d0d0}
#spanTitle{margin-left: 18px;font-weight: 900;}
#tableForm{line-height: 50px;border: 1px}
.tdText{width:300px ;text-align: right;}
.tdInput{width:250px }
.tdError{width:250px }
.inputClass{width: 240px;height: 32px;border: 1px solid #7f9db9;line-height: 32px;padding-left: 10px}
#imgVerifyCode{width: 100px}
#divVerifyCode{text-align: center;border: 1px solid #e2e2e2;}
.errorClass{color:#f40000;font-size: 10pt;border: 1px solid #ffb8b8;background-color: #fef2f2;
padding: 8px 8px 8px 35px;background: url(/goods/images/error.png) no-repeat;}


复制代码


no-repeat表示背景图片有且仅仅显示一次背景图像将仅显示一次。


CSS里的 no-repeat是针对背景图片来说的。当你设置了no-repeat这个属性后，你的背景图片将不会被重复，再换一种说法，你在网站上所看到的背景图片就是你所添加的图片， 不会出现平铺或者重复的现象。


　　你仍然可以通过其他方式来控制图片的位置


我们来看程序运行的效果：




 


整个regist.jsp的代码为：


复制代码


<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册</title>
<link  rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">
</head>
<body>
<div id="divMain">
<div id="divTitle"><span id="spanTitle">新用户注册</span></div>
<div id="divBoby"><table id="tableForm">
<tr>
<td class="tdText">用户名：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="loginname" id="loginname"/></td>
<td class="tdError"><label class="errorClass" id="loginnameError">用户名不能为空</label></td>
</tr>

<tr>
<td class="tdText">登陆密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="loginpass" id="loginpass"/></td>
<td class="tdError"><label class="errorClass" id="loginpassError"></label></td>
</tr>

<tr>
<td class="tdText">确认密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="reloginrepass" id="reloginrepass"/></td>
<td class="tdError"><label class="errorClass" id="reloginrepassError"></label></td>
</tr>

<tr>
<td class="tdText">Email：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="email" id="email"/></td>
<td class="tdError"><label class="errorClass" id="emailError"></label></td>
</tr>

<tr>
<td class="tdText">图形验证码：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="verifyCode" id="verifyCode"/></td>
<td class="tdError"><label class="errorClass" id="verifyCodeError"></label></td>
</tr>

<tr>
<td class="tdText"></td>
<td class="tdInput"><div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"></div></td>
<td class="tdError"><label ><a href="">换一张</a></label></td>
</tr>


<tr>
<td class="tdText"></td>
<td class="tdInput"><input  type="image"  src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/></td>
<td class="tdError"><label></label></td>
</tr>


</table></div>
</div>
</body>
</html>


复制代码


 








 







		

			posted on 
 
luzhouxiaoshuai 
阅读(1477) 
评论(0) 
编辑 
收藏 
举报

		

	

	
	
	






    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· SQL Server 2025 AI相关能力初探
    

· Linux系列：如何用 C#调用 C方法造成内存泄露
    

· AI与.NET技术实操系列（二）：开始使用ML.NET
    

· 记一次.NET内存居高不下排查解决与启示
    

· 探究高空视频全景AR技术的实现原理
    



    

    阅读排行：
    

 ·          阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
        

 ·          AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
        

 ·          开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
        

 ·          Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
        

 ·          被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
        



    

    











	
		

导航




		
					
		




    
        

            
                

                    
                        

                            
                                <
                            
                            2025年3月
                            
                                >
                            
                        

                    
                

            		
        

    

        日
        一
        二
        三
        四
        五
        六
    

            

                            23
                            24
                            25
                            26
                            27
                            28
                    
                        1
                    
            

                

                        
                            2
                        
                            
                                3
                            
                            
                                4
                            
                            
                                5
                            
                            
                                6
                            
                            
                                7
                            
                        
                            8
                        
                

                

                        
                            9
                        
                            
                                10
                            
                            
                                11
                            
                            
                                12
                            
                            
                                13
                            
                            
                                14
                            
                        
                            15
                        
                

                

                        
                            16
                        
                            
                                17
                            
                            
                                18
                            
                            
                                19
                            
                            
                                20
                            
                            
                                21
                            
                        
                            22
                        
                

                

                        
                            23
                        
                            
                                24
                            
                            
                                25
                            
                            
                                26
                            
                            
                                27
                            
                            
                                28
                            
                        
                            29
                        
                

                

                        
                            30
                        
                            
                                31
                            
                            
                                1
                            
                            
                                2
                            
                            
                                3
                            
                            
                                4
                            
                        
                            5
                        
                

    


		
统计




		































                    
		


	

			
			
	



    

    
    








  

  
点击右上角即可分享

  微信分享提示

   
    
AI IDE Trae