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

我们来如何进行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:}

接下来我们设置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:;}

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:;}

#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:;}

#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:;}

#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:;}

#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:;}

#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:;}

#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:;}

#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>

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

JavaWeb网上图书商城完整项目--23.注册页面之html实现
我们来分析下这个页面的代码如何实现: 我们来分下下层次结构: 1.首先最外层是一个大的div,然后又包括两个小的div,第一个div中包括一个span,第二个div是一个table表我们来看程序的代 ...
JavaWeb网上图书商城完整项目--27.注册页面之注册按钮图片切换实现
我们要实现立即注册这个按钮,光标获得焦点是一张图片,光标失去焦点的时候是另外一张图片我们需要在文档加载完成之后,设置该事件hover事件 hover(over,out)这是jQuery的一个模仿悬停 ...
JavaWeb网上图书商城完整项目--26.注册页面之验证码换一张实现
我们现在要实现点击换一张的时候实现验证码的修改我们首先在html添加函数点击事件: <%@ page language="java" contentType="t ...
JavaWeb网上图书商城完整项目--25.注册页面之隐藏没有内容的错误信息实现
在上一章中我们显示的效果如下所示: 上面后面都有错误的红色×的显示,这样是不对的,我们要解决该问题我们要循环遍历每一个错误的信息,看它的内容有没有,如果有内容我们就显示错误的×,如果没有就不显示× ...
JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...
JavaWeb网上图书商城完整项目--day02-10.提交注册表单功能之页面实现
1.当从服务器返回的注册错误信息的时候,我们在注册界面需要将错误信息显示出来我们需要修改regist.jsp页面的代码:其中error是一个haspmap,c标签对map的属性可以直接使用 ${er ...
JavaWeb网上图书商城完整项目--day02-9.提交注册表单功能之servlet层实现
1.当用户在界面提交注册提交的时候,我们在UerServlet来实现具体的业务方法标准demo: 1CommonUtils CommonUtils类就两个方法: lString uuid():生成长 ...
JavaWeb网上图书商城完整项目--day02-8.提交注册表单功能之dao、service实现
1.发送邮件发送邮件的时候的参数我们都写在了配置文件中,配置文件放在src目录下,可以使用类加载器进行加载该数据 //向注册的用户发送邮件 //1读取配置文件 Properties properti ...
JavaWeb网上图书商城完整项目--day02-7.提交注册表单功能之流程分析
1.点击注册之后将提交的信息传递到UserServlet的public String regist方法进行处理,然后将东西通过service进行处理业务流程:

随机推荐

fastjson漏洞利用备忘
预备知识: 起rmi服务用marshalsec-0.0.3-SNAPSHOT-all.jar起一个rmi服务. java -cp marshalsec-0.0.3-SNAPSHOT-all.jar ...
Chisel3 - model - Hardware Model
https://mp.weixin.qq.com/s/x6j7LZg7i7i_KcNEA8YCQw Chisel作为领域专用语言(DSL),用于构建硬件模型.待硬件模型建立后,再基于模型进行仿真. ...
Java实现蓝桥杯-算法提高 P1003
算法提高 P1003 时间限制:1.0s 内存限制:256.0MB 作为一名网络警察,你的任务是监视电子邮件,看其中是否有一些敏感的关键词.不过,有些狡猾的犯罪嫌疑人会改变某些单词的字母顺序,以逃避检 ...
Java实现蓝桥杯算法训练出现次数最多的整数
算法训练出现次数最多的整数时间限制:1.0s 内存限制:512.0MB 提交此题问题描述编写一个程序,读入一组整数,这组整数是按照从小到大的顺序排列的,它们的个数N也是由用户输入的,最多不会 ...
Java实现蓝桥杯G将军
G将军有一支训练有素的军队,这个军队除开G将军外,每名士兵都有一个直接上级(可能是其他士兵,也可能是G将军).现在G将军将接受一个特别的任务,需要派遣一部分士兵(至少一个)组成一个敢死队,为了增加队员 ...
Java实现堆排序问题（变治法）
问题描述用基于变治法的堆排序算法对任意一组给定的数据进行排序 2.1 堆排序原理简介堆可以定义为一颗二叉树,树的节点中包含键(每个节点是一个键),并且满足下面两个条件: (1)树的形状要求--这颗 ...
Java实现二进制幂
1 问题描述使用n的二进制表示,计算a的n次方. 2 解决方案 2.1 从左至右二进制幂此方法计算a的n次方具体思想,引用<算法设计与分析基础>第三版一段文字介绍: package c ...
02 . Tomcat集群会话共享
redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sor ...
对LinkedList源码的一些个人理解
由于转行的原因,最近打算开始好好学习,昨天看到了部分的LinkedList源码,并且看了一点数据结构的视频,现总结部分自己的心得体会,以供后期给现在的自己拍砖~ 双向链表每一个元素都有数据本身加指向前 ...
Hadoop之hadoop fs和hdfs dfs、hdfs fs三者区别
适用范围案例备注小记 hadoop fs 使用范围最广,对象:可任何对象 hadoop dfs 只HDFS文件系统相关 hdfs fs 只HDFS文件系统相关(包括与 ...

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

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

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

随机推荐

热门专题