电商项目--用户列表（上）

用户列表–新建user.jsp

1. 新建user.jsp、在WebContent中放入bootstrap的文件
2. 在user.jsp引入jquery、bootstrap

<link href="${pageContext.request.contextPath }/public.css" type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath }/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/js/jquery.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/js/bootstrap.min.js" type="text/javascript"></script> 

3. 引入jstl的C标签（展示列表会用到c:foreach）

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" /> 

用户列表-html代码

用户列表-css

.banner{
	width:100%;
	height:100px;
	background-image:url(../img/bgTitle.png);
	/*background-color:#FF6633;*/
}
.title{
	position: absolute;/* 绝对位置，针对父标签的位置；fixed,相对浏览器的 */
    top: 60px;
    right: 30px;/* 设置绝对位置，可以设置上边top、right、left、bottom */
	color:#FFFFFF;
	font-weight:bolder;
	font-size:16px;
}

#main{
	background-color:#EFEFEF;/* 浅灰 */
}
#left{
	width:12%;
	height:900px;
	background-color:#F2F2F2;
	float:left;/* 为了让div左右排列 */
	border-right: 1px solid #dedede;
	padding-bottom:100px;
}
#left ul{
	list-style:none;/* 去掉默认的小黑点 */
	width:100%;	
}
#left ul li{
	height:70px;
	line-height:70px;/* 垂直居中 */
	background-color:#F9F9F9;
	border-bottom: 1px solid #dedede;/* 设置下边 */
	text-align:center;
	position:relative;/* 相对位置，是为了里面那个小图标的位置 固定*/
}
#left ul li:hover{
	background-color:#FFFFFF;
}
.icon1{
	position: absolute;
    left: 30px;
	top:25px;
	display:block;/* 改成盒子模型，可以使一些例如left、top、margin这些样式管用，例如span也不是盒子模型 */
}
#left ul li a{
	text-decoration:none;/* 去下划线 */
	color:#666666;
}
#left ul li a:hover{
	color:#FF6633;
}


#right{
	float:left;
	width:86%;
	/*height:1300px;*/
	background-color:#fff;
	padding:10px;
}

用户列表-弹出新增框html

用户列表-弹出新增框css

.box{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    display: none;
}