zjj20163012
/
yqb
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

重做登录和注册界面、美化约球界面

Browse Source
master
CYB 6 years ago
parent 4c8f1cc141
commit 582bf3c5ca
16 changed files with 160 additions and 593 deletions
Show Stats Download Patch File Download Diff File

2
前端/个人中心.html
Unescape View File

@ -59,7 +59,7 @@ border: 1px solid black;
<p>电子邮箱</p>
<p>手机号</p>
<br>
<p><a href ="" style="text-decoration: none">修改个人资料</a></p>
<p><a href ="修改资料界面.html" style="text-decoration: none">修改个人资料</a></p>
</div>

154
前端/个人信息.html
Unescape View File

@ -1,154 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>个人信息</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background-image: url( ' 图片/timg (6).jpg');
background-position: center;
background-repeat: no-repeat;
}
.xzc-submit-box{
position:absolute;
width: 80px;
height: 40px;
line-height: 40px;
margin-top: 30px;
margin-left:100px;
border-radius: 5px;
background: grey;
}
#xzc-submit-button{
display: inline-block;
width: 100px;
height: 40px;
margin-top:140px;
margin-left:440px;
border-radius: 3px;
background: #C5C5F8;
}
.user-information-box
{
position: relative;
height: 800px;
width: 800px;
top: 50px;
margin: 0 auto;
z-index: 99999;
border: 7px solid #ccc;
}
.user-photo{
width: 80px;
height: 80px;
display: flex;
border-radius: 50%;
align-items: center;
justify-content: center;
overflow: hidden;
margin-left: 360px;
margin-top: 0px;
border: 2px solid #ccc;
}
.user-name-box
{
margin: 0;
padding: 0;
border:0;
margin-top: 0px;
margin-left:250px;
}
.user-sex-box
{
margin: 0;
padding: 0;
border:0;
margin-top: 30px;
margin-left:250px;
}
.user-age-box
{
margin: 0;
padding: 0;
border:0;
margin-top: 30px;
margin-left:250px;
}
.user-hobbit-box
{
margin: 0;
padding: 0;
border:0;
margin-top: 30px;
margin-left:220px;
}
.user-intro-box
{
margin: 0;
padding: 0;
border:0;
margin-top: 30px;
margin-left:220px;
}
.user-playtimes-box
{
margin: 0;
padding:0;
border:0;
margin-top: 60px;
margin-left:220px;
}
.user-goodtimes-box
{
margin: 0;
padding:0;
border:0;
margin-top: 30px;
margin-left:0px;
}
.user-comment-box
{
margin: 0;
padding:0;
border:0;
margin-top: 60px;
margin-left:300px;
}
}
</style>
</head>
<body>
<div class=user-information-box>
<img src="图片/timg(7).jpg" class="user-photo" alt="">
<div class="user-name-box">
<p>昵称：</p>
</div>
<div class=user-sex-box>
<p>性别:</p>
</div>
<div class=user-age-box>
<p>年龄:</p>
</div>
<div class="user-hobbit-box">
<p>擅长球类：</p>
</div>
<div class=user-intro-box>
<p>个性签名:</p>
</div>
<div class=user-playtimes-box>
<p>已约次数：</p>
<div class=user-goodtimes-box>
<p>好评次数:</p>
</div>
<div class=user-comment-box>
<p>球友评价：</p>
</div>
<input id = "xzc-submit-button" type="submit" value="编辑个人信息">
</body>
</html>

BIN
前端/图片/14_3.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 166 KiB

After

Width:  |  Height:  |  Size: 317 KiB

BIN
前端/图片/QQ截图20190110093701.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
前端/图片/QQ截图20190110093949.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
前端/图片/QQ截图20190110095831.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
前端/图片/QQ截图20190110153310.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
前端/图片/QQ截图20190110155746.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
前端/图片/QQ截图20190110160006.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
前端/图片/QQ截图20190110160059.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
前端/图片/qiuchang.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 411 KiB

BIN
前端/图片/timg (6).jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 110 KiB

BIN
前端/图片/timg(7).jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

301
前端/注册.html
Unescape View File

@ -1,280 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>账户注册</title>
<style type="text/css">
body,input{
margin: 0;
padding: 0;
background-image: url("图片/timg(5).jpg");
background-position: left;
background-repeat: no-repeat;
}
input{
display: inline-block;
background: #fff;
}
.xiao-container{
width: 100%;
}
.xiao-register-box{
<style>
a:link {color:#87CEFA;}
#section{
width: 450px;
height: 600px;
padding: 10px;
float: left;
background-color: white;
transform: translateY(50px);
position: relative;
height: 800px;
width: 800px;
top: 50px;
margin: 0 auto;
z-index: 99999;
border: 7px solid #ccc;
background-image: url( '' );
background-position:right;
background-repeat: no-repeat;
}
.xiao-title-box{
position: absolute;
width: 300px;
height: 50px;
margin-left: 250px;
margin-top: 5px;
text-align: center;
font-size: 28px;
font-weight: 800;
color: #ff5000;
line-height: 50px;
}
.xiao-username-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:100px;
margin-left:80px;
font-weight: 700;
}
.xiao-username-input{
display: inline-block;
margin-left: 45px;
/*background: green;*/
}
#username{
height: 35px;
width: 290px;
border: 2px solid #ccc;
border-radius: 5px;
}
.xiao-userPassword-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:180px;
margin-left:80px;
font-weight: 700;
}
.xiao-userPassword-input{
display: inline-block;
margin-left: 61px;
}
#userPassword{
height: 35px;
width: 290px;
border: 2px solid #ccc;
border-radius: 5px;
left:540px;
}
.xiao-userRePassword-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:260px;
margin-left:80px;
font-weight: 700;
}
.xiao-userRePassword-input{
display: inline-block;
margin-left: 28px;
}
#userRePassword{
height: 35px;
width: 290px;
border: 2px solid #ccc;
border-radius: 5px;
}
.xiao-userPhone-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:340px;
margin-left:80px;
font-weight: 700;
}
.xiao-userPhone-input{
display: inline-block;
margin-left: 28px;
}
#userPhone{
height: 35px;
width: 290px;
border: 2px solid #ccc;
border-radius: 5px;
}
.xiao-userEmail-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:420px;
margin-left:80px;
font-weight: 700;
}
.xiao-userEmail-input{
display: inline-block;
margin-left: 28px;
}
#userEmail{
height: 35px;
width: 290px;
border: 2px solid #ccc;
border-radius: 5px;
}
.xiao-userIntro-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:500px;
margin-left:80px;
font-weight: 700;
#section1{
width:240px;
height: 60px;
padding: 10px;
float:right
}
.xiao-userIntro-input{
#name{
display: inline-block;
margin-left: 28px;
}
#userIntro{
height: 35px;
width: 290px;
border: 2px solid #ccc;
border-radius: 5px;
}
margin-left: 20px;
.xiao-userGender-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:580px;
margin-left:82px;
font-weight: 700;
}
.xiao-userGender-input{
#name1{
display: inline-block;
margin-left: 62px;
}
.xiao-require{
color: red;
}
.xiao-submit-box{
position:absolute;
width: 80px;
height: 40px;
line-height: 40px;
margin-top: 660px;
margin-left:200px;
border-radius: 5px;
background: grey;
margin-left: 20px;
}
#xiao-submit-button{
#button{
width:350px;
height: 50px;
background: #DC143C;
display: inline-block;
width: 80px;
height: 40px;
border-radius: 5px;
background: #C5C5F8;
}
.xiao-goLogin-box{
position:absolute;
width: 150px;
height: 20px;
margin-top: 670px;
margin-left:320px;
transform: translateY(450px);
position: relative;
left:-223px;
}
</style>
</head>
<body>
<div class="xiao-container">
<div class="xiao-register-box" >
<div class="xiao-title-box">
<span>用户注册</span>
</div>
<form action="#" method="post">
<div class="xiao-username-box">
<span class="xiao-require">*</span>
<label for="username">用户名</label>
<div class="xiao-username-input">
<input type="text" id="username" name="username" placeholder="请输入用户名 长度:6-12个字符" />
</div>
</div>
<div class="xiao-userPassword-box">
<span class="xiao-require">*</span>
<label for="userPassword">密码</label>
<div class="xiao-userPassword-input">
<input type="password" id="userPassword" name="userPassword" placeholder="请输入密码 长度:6-12个字符" />
</div>
</div>
<div class="xiao-userRePassword-box">
<span class="xiao-require">*</span>
<label for="userRePassword">确认密码</label>
<div class="xiao-userRePassword-input">
<input type="password" id="userRePassword" name="userRePassword" placeholder="请重复输入密码" />
</div>
</div>
<div class="xiao-userPhone-box">
<span class="xiao-require">*</span>
<label for="userPhone">手机号码</label>
<div class="xiao-userPhone-input">
<input type="text" id="userPhone" name="userPhone" placeholder="请输入您的手机号码，11位有效数字" />
</div>
</div>
<div class="xiao-userEmail-box">
<span class="xiao-require">*</span>
<label for="userEmail">电子邮箱</label>
<div class="xiao-userEmail-input">
<input type="text" id="userEmail" name="userEmail" placeholder="请输入您的邮箱地址，如：123@qq.com" />
</div>
</div>
<div class="xiao-userIntro-box">
<span class="xiao-require">*</span>
<label for="userIntro">个人资料</label>
<div class="xiao-userIntro-input">
<input type="Introduction" id="userIntro" name="userIntro" placeholder="介绍下自己吧" />
</div>
</div>
<div class="xiao-userGender-box">
<span class="xiao-require">*</span>
<label for="userGender">性别</label>
<div class="xiao-userGender-input">
<input type="radio" id="userGender_01" name="userGender" value="0" checked="checked" />男   
<input type="radio" id="userGender_02" name="userGender" value="1" />女
</div>
</div>
<div class="xiao-submit-box">
<input id = "xiao-submit-button" type="submit" value="注册">
</div>
<body style="background-image: url( 图片/QQ截图20190110093949.png);background-repeat:no-repeat">
<div id="section">
<div class="xiao-goLogin-box">
<a href="#" style="text-decoration: none;">已有账号？去登录</a>
</div>
</form>
<div id="section1" style="background:url(图片/QQ截图20190110095831.png);transform: translateY(80px);position: relative;right:610px;"></div>
<div id="name">
<input style="transform: translateY(200px);position: relative;left: 115px; width: 350px;height:40px;" type="text" id="username" name="username" placeholder=" 请输入用户名" />
</div>
<div id="name1">
<input style="transform: translateY(268px);position: relative;left: -265px; width: 350px;height:40px;" type="text" id="password" name="password" placeholder=" 请输入密码" />
</div>
<input style="transform: translateY(288px);position: relative;left: 134px; width: 350px;height:40px;" type="text" id="repassword" name="repassword" placeholder=" 确认密码" />
<input style="transform: translateY(356px);position: relative;left: -225px; width: 350px;height:40px;" type="text" id="phonenum" name="phonenum" placeholder=" 请输入手机号" />
<input style="transform: translateY(380px);position: relative;left: 134px; width: 350px;height:40px;" type="text" id="email" name="email" placeholder=" 请输入邮箱" />
<input id="button" type="submit" value="注册">
<a href="登录.html" style="text-decoration: none;position: relative;left:-350px;bottom: -520px">已有账号，立即登录</a>
</body>
</html>

160
前端/登录.html
Unescape View File

@ -1,146 +1,62 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background:url(' 图片/timg (4).jpg');
background-position: center;
background-repeat: no-repeat;
}
input{
display: inline-block;
background: #fff;
}
.xzc-title-box{
position: absolute;
width: 300px;
height: 50px;
margin-left: 100px;
margin-top: 5px;
text-align:center;
font-size: 28px;
font-weight: 800;
color: #ff5000;
line-height: 50px;
}
.xzc-login-box{
<style>
a:link {color:#87CEFA;}
#section{
width: 450px;
height: 500px;
padding: 10px;
float: left;
background-color: white;
transform: translateY(50px);
position: relative;
height: 400px;
width: 500px;
top: 50px;
margin: 0 auto;
z-index: 99999;
background: white;
border: 7px solid #ccc;
left:540px;
}
.xzc-username-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:100px;
margin-left:80px;
font-weight: 700;
#section1{
width:240px;
height: 60px;
padding: 10px;
float:right
}
.xzc-username-input{
#name{
display: inline-block;
margin-left: 5px;
/*background: green;*/
}
#username{
height: 35px;
width: 290px;
border: 2px solid #ccc;
border-radius: 5px;
}
margin-left: 20px;
.xzc-userPassword-box{
position: absolute;
width: 420px;
height: 40px;
line-height: 40px;
margin-top:180px;
margin-left:80px;
font-weight: 700;
}
.xzc-userPassword-input{
#name1{
display: inline-block;
margin-left: 20px;
}
#userPassword{
height: 35px;
width: 290px;
border: 2px solid #ccc;
border-radius: 5px;
}
.xzc-submit-box{
position:absolute;
width: 80px;
height: 40px;
line-height: 40px;
margin-top: 30px;
margin-left:100px;
border-radius: 5px;
background: grey;
}
#xzc-submit-button{
#button{
width:350px;
height: 50px;
background: #DC143C;
display: inline-block;
width: 80px;
height: 40px;
border-radius: 5px;
background: #C5C5F8;
}
.xzc-goGetback-box{
position:absolute;
width: 150px;
height: 20px;
margin-top: 80px;
margin-left:40px;
transform: translateY(350px);
position: relative;
left:130px;
}
.xzc-goback-box
{
position:absolute;
margin-top: 80px;
margin-left:200px;
}
}
</style>
</head>
<body>
<div class=xzc-login-box>
<div class=xzc-title-box>
<span>约球吧</span>
</div>
<form action="#" method="post">
<div class="xzc-username-box">
<label for="username">用户名</label>
<div class="xzc-username-input">
<input type="text" id="username" name="username" placeholder="请输入用户名" />
</div>
</div>
<div class="xzc-userPassword-box">
<label for="userPassword">密码</label>
<div class="xzc-userPassword-input">
<input type="password" id="userPassword" name="userPassword" placeholder="请输入密码" />
</div>
<div class="xzc-submit-box">
<input id = "xzc-submit-button" type="submit" value="登录">
</div>
<div class="xzc-goGetback-box">
<a href="#" style="text-decoration: none;">忘记密码？去找回</a>
<body style="background-image: url( 图片/QQ截图20190110093949.png);background-repeat:no-repeat">
<div id="section">
</div>
<div class=xzc-goback-box>
<a href="">返回上一页</a>
<div id="section1" style="background:url(图片/QQ截图20190110095831.png);transform: translateY(80px);position: relative;right:610px;"></div>
<div id="name">
<input style="transform: translateY(200px);position: relative;left: 115px; width: 350px;height:40px;" type="text" id="username" name="username" placeholder=" 用户名/手机号/邮箱" />
</div>
<div id="name1">
<input style="transform: translateY(268px);position: relative;left: -265px; width: 350px;height:40px;" type="text" id="password" name="password" placeholder=" 密码" />
</div>
<div>
<a href="注册.html" style="text-decoration: none;position: relative;left:330px;bottom: -300px;">没有账号，立即注册</a>
</div>
<input id="button" type="submit" value="登录">
</body>
</html>

74
前端/约球界面.html
Unescape View File

@ -2,26 +2,50 @@
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
#button{
width:100px;
height: 45px;
background: #DC143C;
display: inline-block;
transform: translateY(350px);
position: relative;
left:252px;
bottom: 40px;
}
#section{
width: 450px;
height: 500px;
padding: 10px;
float: left;
transform: translateY(50px);
position: relative;
left:540px;
background: white;
}
#section1{
width:240px;
height: 60px;
padding: 10px;
float:right
}
</style>
</head>
<body background="图片/timg.jpg"
>
<div id="header">
<h1>约球吧</h1>
<body background="图片/timg.jpg" >
<div id= "section">
</div>
<div id="section1" style="background: url( 图片/QQ截图20190110153310.png);position: relative;left:-618px;bottom: -80px">
<div style=" background-color:#DC143C; position:relative;left: -32px;bottom: -80px; height:2px; width:300px;">
</div>
<div style=" background-color:#DC143C; position:relative;left: -32px;bottom: -83px; height:1px; width:300px;"></div>
</div>
<table>
<tr style="transform: translateX(650px);">
<td style="color: aliceblue; font-size:20px;">球类：</td>
<tr style="transform: translateX(205px)translateY(200px);">
<td style="color: black; font-size:20px;">球类：</td>
<td>
<select name="球类" >
<select style="width: 80px;height: 30px;" name="球类" >
<option value="篮球">篮球</option>
<option value="足球">足球</option>
<option value="羽毛球">羽毛球</option>
@ -29,10 +53,10 @@
</select>
</td>
</tr>
<tr style="transform: translateX(650px);" >
<td style="color: aliceblue;font-size:20px;">约球场地：</td>
<tr style="transform: translateX(195px)translateY(230px);" >
<td style="color: black;font-size:20px;">约球场地：</td>
<td>
<select name="约球场地" >
<select style="width: 100px;height: 30px;" name="约球场地" >
<option value="师大体院馆">师大体育馆</option>
<option value="江边篮球场">江边篮球场</option>
<option value="师大操场">师大操场</option>
@ -40,10 +64,10 @@
</select>
</td>
</tr>
<tr style="transform: translateX(650px);" >
<td style="color: aliceblue;font-size:20px;">约球时间：</td>
<tr style="transform: translateX(206px)translateY(268px);" >
<td style="color: black;font-size:20px;">约球时间：</td>
<td>
<select name="约球时间" >
<select style="width: 70px;height: 30px;" name="约球时间" >
<option value="7:30">7:30</option>
<option value="8:00">8:00</option>
<option value="8:30">8:30</option>
@ -75,13 +99,11 @@
</td>
</tr>
</table>
<br><br>
<table>
<tr style="transform: translateX(750px);">
<td>
<button type="button" onClick="alert('提交订单成功！')">提交</button>
</td>
</tr>
</table>
<input id="button" type="submit" onClick="alert('提交订单成功！')" value="提交">
<div style=" background-color:#DC143C; position:relative;left: 620px;bottom: -350px; height:1px; width:300px;"></div>
<div style=" background-color:#D3D3D3; position:relative;left: 620px;bottom: -100px; height:1px; width:300px;"></div>
<div style=" background-color:#D3D3D3; position:relative;left: 620px;bottom: -165px; height:1px; width:300px;"></div>
<div style=" background-color:#D3D3D3; position:relative;left: 620px;bottom: -230px; height:1px; width:300px;"></div>
<div style=" background-color:#DC143C; position:relative;left: 620px;bottom: -350px; height:2px; width:300px;"></div>
</body>
</html>

Write Preview
Loading…
Cancel
Save