前言
：每写一个项目，我们都应该对此有清晰的认知和思维，就像我们要去一个地方，我们应该知道路怎么走
项目分析
： 我们将项目内容分成了 head index regist foot，
： 相对应有装饰的 head index regist foot
HEAD系列
：这里我们使用的是 id 选择器，如果不清楚的话可以点击下方 HTML 的豪华外套之 ”CSS“ 进入关于 css 的页面中进行介绍中进行查看， id选择器的大致意思是 可以具体到位，单独装饰
HTML 的豪华外套之 ”CSS“
- 装饰代码（CSS 加成）
@charset "utf-8";// 上面这个是定义我们使用的页面书写类型为 utf-8 {border: 1px solid #999;}// 该方式定义的是 jsp 中 body 的大体框架内容格式
// 并不会具体到我们单独需要定义的代码样式
body{margin:0px;padding:0px;font-family: "微软雅黑";font-size: 12px;color:#666666;}// 这是一个 id 选择器 你并不需要知道他为啥叫这个名字，因为名字是自定义的
// 你需要明白的是要和 jsp 中的内容相对应
#common_head{margin:0px;font-family:"微软雅黑";}// 该方式是 多个id选择器构成了后代选择器
// 后代选择器：在 #common_head 中的所有 #row1 都会遵循 {} 内的配置
//（该选择器也属于 css 的内容 上面那个链接也可查到改内容）
#common_head #row1{width:100%;height:35px;background-color:#FAFAFA;border-bottom:1px solid #EDEDED;
font-size:14px;color:#666666;}// 该方式是多个id选择器构成了多重后代选择器
// 作用和上面那个类似 只是多包含关系
#common_head #row1 #content{width:1200px;margin:0px auto;row-height:35px;text-align:right;}// 该方式是多个id选择器构成了多重后代选择器
// 作用和上面那个类似 只是多包含关系
#common_head #row1 #content a{font-size:14px;text-decoration: none;color:#666666;}// 该方式是多个id选择器构成了多重后代选择器
// 作用和上面那个类似 只是多包含关系
#common_head #row1 #goto a{font-size:14px;text-decoration: none;color:#666666;}/*第二行*/// 该方式是多个id选择器构成了多重后代选择器
// 作用和上面那个类似 只是多包含关系
#common_head #row2{width:1400px;height:100px;margin:0px auto;row-height:100px;text-align: center;}//该方式是 分组选择器，
//作用是以下 id选择器 都将使用 {} 内的配置
#common_head #row2 #logo,
#common_head #row2 input,#common_head #row2 #goto{vertical-align: middle;}n
// 该方式是多个id选择器构成了多重后代选择器
// 作用和上面类似 只是多包含关系
#common_head #row2 #erwm{margin-top:10px;float:right;}//该方法用的是 多重id选择器 + 属性选择器
//作用是 直接定义到具体内容的格式
#common_head #row2 input[type='text']{width:370px;height:30px;margin-left:120px;border: 2px solid #CA141D;}//该方法用的是 多重id选择器 + 属性选择器
//作用是 直接定义到具体内容的格式
#common_head #row2 input[type='button']{width:70px;height:36px;background-color: #CA141D;border: 1px solid #CA141D;color:white;margin-left:-5px;cursor: pointer;font-size: 14px;}//该方法用的是 id选择器构成了后代选择器
//作用只是多了几重包含关系
#common_head #row2 #goto{margin-left: 5px;border: 1px solid #E5E5E5;padding: 8px 0;font-size: 14px;}//该方法用的是 id选择器构成了后代选择器 + 普通后代选择器
//作用只是多了几重包含关系
#common_head #row2 #goto a{color:#555555;text-decoration: none;font-size:14px;}//该方法用的是 多个id选择器构建成了后代选择器
//作用只是多了几重包含关系
#common_head #row2 #goto #goto_order{padding-left:14px;padding-right:8px;}//该方法用的是 多个id选择器构成了后代选择器
//作用只是多了几重包含关系
#common_head #row2 #goto #goto_cart{padding-left:8px;padding-right:10px;border-left:1px solid #E5E5E5;}/*第三行*///该方法用的是 多重id选择器
//作用只是多了几重包含关系
#common_head #row3{width:100%;height:38px;background-color:#FF00FF;}//该方法用的是 多重id选择器
//作用只是多了几重包含关系
#common_head #row3 #content{width:1200px;margin:0px auto;}//该方法用的是 多重id选择器
//作用只是多了几重包含关系
#common_head #row3 #content ul{padding:0px;margin:0px;}//该方法用的是 多重id选择器
//作用只是多了几重包含关系
#common_head #row3 #content li{list-style-type:none;width:120px;float:left;}//该方法用的是 多重id选择器
//作用只是多了几重包含关系
#common_head #row3 #content li a{display: block;row-height:38px;color:white;text-decoration: none;text-align: center;font-size:16px;}//该方法用的是 分组选择器
//作用是 以下几个 id选择器 都将遵循{}的内容
#common_head #row3 #content li:hover{background-color: #D9141E;}
2.页面代码（jsp上场）
：下面代码会遇到关于 html 与 js 的内容，如果不太清楚，请到一下链接下查看相关信息用HTML做一个属于你的 “世界“，JavaScript 一个可以 “游戏” 的语言
// 该内容是定义页面的一些东西<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%> // 以下是 html 的代码书写// 这是定义 html 编码的说明// <!DOCTYPE HTML>用来指定当前页面所遵循的html的版本// 如果你不写 系统会默认是 但是推荐你写 否则会分辨不清楚 <!DOCTYPE HTML>//<link rel="stylesheet"// href="css代码所在路径" type="text/css"/>//该标签是引用外部的 css代码 //因为我们会在这里用 css 的代码进行装饰 <link rel="stylesheet" href="css/head.css"/>//这个也是 html 的代码编写的前提准备工作<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />// <div> 标签可以把文档分割为独立的、不同的部分// 注意 id选择器 在 jsp中的应用方式// <a> </a> 是超链接标签<div id="common_head"><div id="row1"><div id="content"><a href="#">登录</a> | <a href="/regist.jsp">注册</a> // <span> 标签被用来组合文档中的行内元素。<span id="goto"><a id="goto_order" href="#">我的订单</a> <a id="goto_cart" href="#">我的购物车</a> <a id="goto_collect" href="#">我的收藏</a> <a id="goto_foot" href="#">我的足迹</a> </span></div></div>// 用法同上类似<div id="row2"><img id="logo" src="img/head/logo.jpg"/><input type="text" name=""/><input type="button" value="搜 索"/></div> //用法同上类似<div id="row3"><div id="content"><ul><li><a href="#">小辰首页</a></li><li><a href="#">小辰分类</a></li><li><a href="#">小辰数码</a></li><li><a href="#">小辰家电</a></li><li><a href="#">小辰健康</a></li><li><a href="#">小辰汽车</a></li><li><a href="#">小辰美食</a></li><li><a href="#">小辰服饰</a></li><li><a href="#">小辰建材</a></li><li><a href="#">小辰彩票</a></li></ul></div></div></div>
FOOT
- foot 中本身就是就是页面最下方的内容，它并没有多少内容
@charset "utf-8";#common_foot{width:1200px;margin:15px auto;border-top: 1px solid #EEEEEE;text-align: center;font-size: 13px;color:#666666;}
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><!DOCTYPE HTML><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><link rel="stylesheet" href="css/foot.css"/><div id="common_foot"><p> 帝小辰<br/>PMI, PMP and PMB OK are registered marks of the Project Management Institute, Inc.<br/> 京ICP备09067568号<br/>Copyright © 2005-2020 51CTO.COM 京ICP证060544 版权所有 未经许可 请勿转载 </p></div>
INDEX
- 这里就不做过多的解释了，大部分使用的格式和HEAD中的用法类似
@charset "utf-8";{border: 1px solid #999;}body{margin:0px;font-family:"微软雅黑";}#index #row1,#index #row2,#index #row3,#index #row4,#index #row5{width:1200px;margin:0px auto;}/*第一行*/#index #row1{margin-top:8px;text-align: center;}/*第二行*/#index #row2{margin-top:8px;}#index #row2 #row2_2{margin-left:50px;}#index #row2 #row2_3{margin-left:50px;}/*第三行*/#index #row3{margin-top:5px;}#index #row3 #row3_2{margin-left:50px;}#index #row3 #row3_right{margin-right:42px;width:280px;float:right;}#index #row3 #row3_4{margin-top:14px;}/*第四行*/#index #row4{margin-top:8px;}/*第五行*/#index #row5{width:1200px;height:80px;border-top: 1px solid #EEEEEE;}#index #row5 img{row-height:80px;vertical-align: middle;}#index #row5 span{row-height:80px;vertical-align: middle;color:#666666;font-weight:bold;}#index #row5 #row5_2,#index #row5 #row5_3,#index #row5 #row5_4{margin-left:128px;}
2.页面代码
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8" buffer="0kb"%><!DOCTYPE HTML><html><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><link rel="stylesheet" href="css/index.css"/><title>欢迎光临LeGou</title></head><body>// 页面跳转语句// 该语句执行的时候 会跳到 _head.jsp 页面中返回 request, response 数据<% request.getRequestDispatcher("/_head.jsp").include(request, response);%>// 以下是页面图片的定义 使用 id选择器的格式 和 HEAD 中一样 <div id="index"><div id="row1"><img src="img/index/img_car_np.jpg"/></div><div id="row2"><img id="row2_1" src="img/index/img_ring_1.jpg"/><img id="row2_2" src="img/index/img_phone_1.jpg"/><img id="row2_3" src="img/index/img_book_1.jpg"/></div><div id="row3"><img id="row3_1" src="img/index/img_choco_1.jpg"/><img id="row3_2" src="img/index/img_tv_1.jpg"/><div id="row3_right"><img id="row3_3" src="img/index/img_ipad_1.jpg"/><img id="row3_4" src="img/index/adv_l3.jpg"/></div></div><div id="row4"><img src="img/index/img_1.jpg"/></div><div id="row5"><span id="row5_1"><img src="img/index/icon_g1.png"/> 500强企业 品质保证 </span><span id="row5_2"><img src="img/index/icon_g2.png"/> 7天包退 30天包换
</span><span id="row5_3"><img src="img/index/icon_g3.png"/> 50元起免运费
</span><span id="row5_4"><img src="img/index/icon_g4.png"/> 千家维修网点 全国联保
</span></div></div><%
//和 head 一样 request.getRequestDispatcher("/_foot.jsp").include(request, response);%></body></html>
REGIST
@charset "utf-8";body{background-image: url("../img/regist/zc.jpg");background-repeat: no-repeat;background-position: center top;font-family: "微软雅黑";}form{width: 350px;margin: 0 auto;}h1{width: 200px;color: #990000;margin: 120px auto 25px;text-align: center;font-size: 24px;}table{margin: 0 auto ;/*text-align: center;*/}td{padding-top: 10px;}.tds{font-size: 18px;text-align: right;}input{border: 1px solid #cccccc;width: 150px;height: 22px;}input[name='valistr']{width:80px;}img{width:97px;height: 25px;vertical-align: top;}.sub_td{text-align: center;}input[type='submit']{border: none;width:97px;height: 30px;font-size: 20px;color: #FFFFFF;font-weight: bolder;background-image: url('../img/regist/zc_btn01.jpg');}input[type='submit']:hover{background-image: url('../img/regist/zc_btn02.jpg');}
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><!DOCTYPE HTML><html><head><title>欢迎注册LeGou</title><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><link rel="stylesheet" href="css/regist.css"/><script type="text/javascript" src="/js/jquery-1.4.2.js"></script><script type="text/javascript"> var formObj={ "checkForm":function(){ //1）非空验证 //获取参数信息 //判断用户名是否为空 var flag = true;//默认就是true,控制表单提不提交 flag = this.checkNull("username","用户名不能为空")&&flag;//传递参数，判断非空验证 flag = this.checkNull("password","密码不能为空")&&flag; flag = this.checkNull("password2","确认密码不能为空")&&flag; flag = this.checkNull("nickname","昵称不能为空")&&flag; flag = this.checkNull("email","邮箱不能为空")&&flag; flag = this.checkNull("valistr","验证码不能为空")&&flag;
//2）密码一致性验证 //3）邮箱格式验证 return flag;//控制表单是否提交 }, "checkNull":function(name,msg){//判断非空方法 //非空判断，此时需要 var value = $("input[name='"+name+"']").val(); if($.trim(value)==""){ //如果参数为空，返回错误提示信息 this.setMsg(name,msg); //表单不可以提交 return false; }else{ //如果参数为空，清除错误提示信息 this.setMsg(name,""); //表单可以提交 return true; } }, "setMsg":function(name,msg){ //设置提示信息，获取指定的input标签，用选择器选择span标签，添加错误提示信息 //并设置css提示信息字体样式 $("input[name='"+name+"']").nextAll("span").html(msg).css("color","red"); } }</script></head><body><form action="/RegistServlet" method="POST" onSubmit="return formObj.checkForm()"><h1>欢迎注册LeGou网</h1><table><tr> <td colspan="2" style="text-align: center;color:red"> <%=request.getAttribute("errMsg")==null?"":request.getAttribute("errMsg") %> </td></tr><tr><td class="tds">用户名：</td><td><input type="text" name="username" value="<%=request.getParameter("username")==null?"":request.getParameter("username")%>" /><span></span></td></tr><tr><td class="tds">密码：</td><td><input type="password" name="password" value="<%=request.getParameter("passward")==null?"":request.getParameter("passward")%>"/><span></span></td></tr><tr><td class="tds">确认密码：</td><td><input type="password" name="password2" value="<%=request.getParameter("passward2")==null?"":request.getParameter("passward2")%>"/><span></span></td></tr><tr><td class="tds">昵称：</td><td><input type="text" name="nickname" value="<%=request.getParameter("nickname")==null?"":request.getParameter("nickname")%>"/><span></span></td></tr><tr><td class="tds">邮箱：</td><td><input type="text" name="email" value="<%=request.getParameter("email")==null?"":request.getParameter("email")%>"/><span></span></td></tr><tr><td class="tds">验证码：</td><td><input type="text" name="valistr" value=""/><img src="img/regist/yzm.jpg" width="" height="" alt="" /><span></span></td></tr><tr><td class="sub_td" colspan="2" class="tds"><input type="submit" value="注册用户"/></td></tr></table></form></body></html>