前言
：每写一个项目，我们都应该对此有清晰的认知和思维，就像我们要去一个地方，我们应该知道路怎么走
项目分析
： 我们将项目内容分成了 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>
扫一扫
2696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
