企业实训第十二节

<%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- 引入自定义的css样式 -->

<link href="public.css" type="text/css" rel="stylesheet">

<title>首页</title>

<img src="img/logBanner.png" style="width:100%;height:100%;">

<div id="loginDiv">

<p class="logTitle">登录</p>

<form action="user" method="post"><!-- action告诉程序你要提交后台servelet类的地址 -->

<!-- 填写的的纸质表格的信息，在页面展示都要放上form标签里面 -->
	
	<!-- 隐藏的文本域，一般用来传递你当前的操作名字， 不需要给客户展示的信息-->
	
	<!-- 此action自定义的，随便叫啥都行 -->
	
	<input type="hidden" name="action" value="login">
	
	<!-- 颜色：#RGB 0-9abcdef -->
	
	<span style="color:#f00;">${msg }</span>
	

	<div class="formInput">
	
		<span>用户名</span>
		
		<!-- input标签用来 type="text"展示文本框的，可以输入的 -->
		
		<input type="text" name="username">
		
	</div>
	
	<div class="formInput">
	
		<span>密码</span>
		
		<!-- input标签用来 password类型看不见输入的字是什么 -->
		
		<input type="password" name="pwd">
		
	</div>
	
	<input type="submit" class="formButton" value="登陆">
	
</form>

</div>

<%-- <!-- 接受别人jsp传来的、servlet类传来的数据 -->

<!-- 1、常用EL表达式 -->

<span>${msg }</span><p></p>

<span>${map.name}</span><p></p>

<!-- 2、有点麻烦，最原始的方法 jsp里面内置request、respense这样的对象/类 -->

<span><%=request.getAttribute("msg") %></span> --%>

@charset "utf-8";

/* CSS Document */

/* 基础选择器：id选择器# class选择器 . 标签选择器 */

/* *通配符选择器，就是应用在html所有标签，所有空白都清空 */

*{

padding:0px;

margin:0px;

}

.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;

}

#loginDiv{

width:300px;

background-color:#FFFFFF;

padding:30px;

position:fixed;

right: 20%; 

top: 25%;

border: 1px solid #CCC;

}

.box{

position: fixed;

width: 100%;

height: 100%;

background: rgba(0,0,0,0.2);

display: none;

}

.logTitle{

height:40px;

border-bottom:#ffb447 solid 1px;

font-size:28px;

margin-bottom:40px;

}

.formInput{

margin-bottom:20px;

height:40px;

width:100%;

}

.formInput img{

position: absolute;

padding-top: 12px;

padding-left: 8px;

}

.formInput input,select{

font-size:16px;

width:100%;

text-indent:5em;

height:40px;

}

.formInput span{

color:#999999;

position: absolute;

padding-top: 12px;

padding-left: 8px;

} .formButton {

margin-top: 20px;

border: 0px;

font-size: 18px;

width: 100%;

height: 40px;

background-color:#ffb447;

color:#FFFFFF;

}

转载于:https://my.oschina.net/u/4090474/blog/3052365