图样展示

照片在WEB-INF下方的image中

特别适用于初学者

regist.html

XINGGou

regist.css

@CHARSET "UTF-8";

/* 头部分 */

#header{

/*宽高*/

width:1200px;

height:114px;

/*外边距： 上下 左右*/

margin:0px auto;

margin-top:41px;

}

#header #line1{/*头部第一行内容*/

height:72px;

}

#header #line1 img{/*选中line1内部的img元素*/

/*外边距：上 右 下 左*/

margin:0px 33px 0px 50px;

vertical-align:middle;/*居中*/

}

#header #line1 .line{/*竖线*/

border:2px solid grey;/*边框border-width border-style border-color */

height:68px;

/*将行内元素改为行内块元素*/

display:inline-block;

vertical-align:middle;

}

#header #line1 .regist{/*欢迎注册*/

font-size:36px;/*设置字体大小*/

color:#676767;/*设置字体颜色*/

margin-left:23px;/*设置元素的左外边距*/

vertical-align:middle;/*设置元素的垂直对齐方式*/

}

#line2{ /* 头部第2行内容 */

height: 42px;

text-align: right; /* 设置元素内容居右显示 */

}

#line2 span{ /* 已有账号 */

font-size:24px;

color: #999; /* AABBCC=ABC */

}

#line2 a{ /* 请登录 */

font-size:24px;

color: #333;

text-decoration: none; /* 设置文本没有下划线(underline) */

}

/*主体部分*/

#body{

width: 1200px;

height: 545px;

/*外边距： 上下 左右*/

margin:0px auto;

/*设置主题和footer之间的间距

bottom是向下间距

top是向上间距*/

margin-bottom:109px;

border:7px solid #d0d0d0;

border-top-width:9px;

border-bottom-width:9px;

/*主体div上边框和内容的间距(上内边距)*/

padding-top:75px;

}

#body form{

width:819px;

height:470px;

margin-left:109px;

/*将元素设置为行内块元素，

可以和其他元素处在同一行*/

display:inline-block;

}

#body .regist{/*快速注册*/

/*让当前元素和行内最高元素的顶端对齐*/

vertical-align:top;

}

#body form table input{/*表单中的所有input元素*/

width:381px;

height:50px;

border:1px solid #d0d0d0;

font-size:16px;

color:#999;

text-indent:45px;

}

#body form table input[name="username"]{/*用户名输入框*/

background-image:url('../image/u_ico.jpg');

/*设置背景图片不重复(横向纵向都不重复)*/

background-repeat:no-repeat;

/*设置背景图片距离边框的距离*/

background-position:15px 15px;

}

#body form table .msg{/*用户名框下方的提示信息*/

height:32px;

font-size:12px;

color:#c3c3c3;

text-indent:45px;

background-image:url('../image/alert_1.jpg');

background-repeat:no-repeat;

background-position:17px 7px;

}

#body form table .alert{

color:#e64346;

background-image:url('../image/alert_2.jpg');

}

#body form table input[type="password"]{/*密码输入框*/

background-image:url('../image/p_ico.jpg');

/*设置背景图片不重复(横向纵向都不重复)*/

background-repeat:no-repeat;

/*设置背景图片距离边框的距离*/

background-position:15px 15px;

}

#body form table input[name="phone"]{/*验证手机*/

background-image:url('../image/phone_ico.jpg');

/*设置背景图片不重复(横向纵向都不重复)*/

background-repeat:no-repeat;

/*设置背景图片距离边框的距离*/

background-position:15px 15px;

}

/*或验证邮箱*/

#body form table #check-email{

font-size:16px;

}

/*验证邮箱*/

#body form table #check-email a{

color:#005ea7;

}

/*同意协议*/

#body form table #regist-protocol{

height:83px;

font-size:16px;

line-height:52px;

text-indent:60px;

}

/**/

/*协议*/

#body form table #regist-protocol a{

text-decoration:none;

color:#005ea7;

}

/*立即注册按钮*/

#body form table input[type="submit"]{

font-size:20px;

background:#e64346;

color:#fff;

text-indent:0px;

}

/*尾部分*/

#footer{

width:1200px;

height:120px;

margin-left:auto;

margin-right:auto;

}

#footer p{

text-align:center;

font-size:14px;

color:#999;

line-height:34px;/*行高*/

}

难道我写得很垃圾吗？在csdn上都没人看这篇，我不信，我到开源来试试！！！

Welcome to XINGGou