开发PHP小项目-查询录取结果（1）：前端设计

Comments

开发PHP小项目-查询录取结果（1）：前端设计

前端网页设计

查询页面设计

  • 在网站根目录新建一个目录zhunkao，在目录里新建一个search.php文件，新建一个表单，包括一个输入框，一个提交按钮。

  • 源码如下

  • <html>

<head>
<meta charset="utf-8">
<title>录取查询</title>
</head>

<body>

<form action="reach.php" method="post">
准考证号: <input type="text" name="num" placeholder="请输入您的准考证号">
//placeholder是input标签的一个属性，为input类型输入框提供相关提示信息。
 <input type="submit" value="查询" >
</form>

</body>
</html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47

      ![image-20200914222504176](http://cr_7.gitee.io/git-hub-image/image-20200914222504176.png)

    - 下面进行页面美化。
    - 添加背景。在根目录建立一个images文件夹，将背景图片放进去。在head标签体中增加一个内嵌样式<style></style>标签。

    | 代码                                                         | 解释                   |
    | :----------------------------------------------------------- | ---------------------- |
    | background-image: url(../images/bg.jpg);                     | 解释指定背景图片路径   |
    | background-position: center; //水平方向的有left、center、right。垂直方向有：top、center、bottom。如果想要右小角的话就可以right bottom | 设置背景图片位置       |
    | backgound-size: cover;                                       | 将图像完全覆盖背景区域 |

    ![image-20200914231259011](http://cr_7.gitee.io/git-hub-image/image-20200914231259011.png)

    发现背景只是用了图片的一半，所以调整背景图片为视窗的100%

    min-height: 100vh;

    - 完整代码：

    - ```php
      <html>
      
      <head>
      <meta charset="utf-8">
      <title>录取查询</title>
      <style>
      	body{
      
      
      		background-image: url(../images/bg.jpg);
      		background-position: center;
      		background-size: cover;
      	    min-height: 100vh;
      	}
      	</style>
      
      </head>
      <body>
      
      <form action="search.php" method="post">
      准考证号: <input type="text" name="num" placeholder="请输入您的准考证号">
       <input type="submit" value="查询" >
      </form>
      
      </body>
      </html>
    

效果图：![image-20200914231411418](http://cr_7.gitee.io/git-hub-image/image-20200914231411418.png)

  • 调整输入框和按钮的样式。在style里添加两个样式，.button和.input。

  • .button

  • 代码 效果
    color: #000000; 字体颜色为黑色
    background-color: #dedddd; 底部颜色为#dedddd
    border-radius: 1px; 圆角半径一个像素
    border:1px solid #dedddd 边框线宽度1像素，实线，颜色为#dedddd
    width: 50px; 边框宽度为50像素
    height: 25px; 边框高度为25像素

  • .input与.button相似。在创建完样式后，需要将样式和输入框或按钮等绑定在一起才会有相应的效果。例如：

    意思就是查询按钮用.button样式

  • 全部代码

  • <html>

<head>
<meta charset="utf-8">
<title>录取查询</title>
<style>
    body{


        background-image: url(../images/bg.jpg);
        background-position: center;
        background-size: cover;
        min-height: 100vh;
    }
    .button{
        color: #000000;
        background-color: #dedddd;
        border-radius: 1px;
        border:1px solid #dedddd;
        width: 50px;
        height: 25px;


    }
    .input{
    
        border-radius: 1px;
        border:1px solid #000000;
        width:410px;
        height: 25px;
    
    }
    </style>

</head>
<body>

<form action="search.php" method="post">
准考证号: <input class='input' type="text" name="num" placeholder="请输入您的准考证号">
 <input class='button' type="submit" value="查询" >
</form>

</body>
</html>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115

      ![image-20200916153742543](http://cr_7.gitee.io/git-hub-image/image-20200916153742543.png)

    - 下面就将输入框和按钮移到页面的中间。用到CSS盒子模型。创建三个样式，.box（总的大盒子）.boxtittle（标题盒子）.input（输入框和按钮）

    - | 代码                              | 效果                                               |
      | --------------------------------- | -------------------------------------------------- |
      | filter: alpha(Opacity=70);        | 滤镜通道选择alpha他的透明度为70%                   |
      | -moz-opacity:0.7;                 | 透明度70%                                          |
      | opacity: 0.7;                     | 透明度70%（和上面一样，只是浏览器的规定不一样。）  |
      | box-shadow: 1px 1px 50px #ffffff; | 添加阴影，左右上下偏移，扩散的范围，扩散颜色为白色 |
      | margin: auto;                     | 外边框间距自动设置                                 |
      | margin-top: 180px;                | 距离浏览器顶部180像素                              |
      | text-align:center;                | 文字居中                                           |

    - 完整代码

    - <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>录取查询</title>
      <style>
      	body{
              background-image: url(../images/bg.jpg);
      		background-position: center;
      		background-size: cover;
      	    min-height: 100vh;
      	}
      	.button{
      		color: #000000;
      		background-color: #dedddd;
      		border-radius: 1px;
      		border:1px solid #dedddd;
      		width: 50px;
      		height: 25px;
      

      

      ```html
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>录取查询</title>
      <style>
      	body{
              background-image: url(../images/bg.jpg);
      		background-position: center;
      		background-size: cover;
      	    min-height: 100vh;
      	}
      	.button{
      		color: #000000;
      		background-color: #dedddd;
      		border-radius: 1px;
      		border:1px solid #dedddd;
      		width: 50px;
      		height: 25px;
      
      
      	}
      	.input{
      
      		border-radius: 1px;
      		border:1px solid #000000;
      		width:410px;
      		height: 25px;
      
      	}
      	.box{
      
      		filter: alpha(Opacity=70);
      		-moz-opacity:0.7;
      		opacity: 0.7;
      		border-radius: 1px solid #ffffff;
      		box-shadow: 1px 1px 50px #ffffff;
      		width:410px;
      		height: 50px;
      		margin: auto;
      		margin-top: 180px;
      		margin-right: center;
      		border-radius: 6px;
      	}
      	.boxtittle{
      		width: 310px;
      		margin: auto;
      		margin-right: center;
      		padding-top: 10px;
      		text-align:center;
      		cloor:#000000;
      
      	}
      	.inputbox{
      
      		width: 410px;
      		margin: auto;
      		padding-top: 10px;
      	}
      	</style>
      </head>
      <body>
          <div class="box">
             <div class="boxtitle">
             <p><h3>录取查询</h3></p>
          </div >
              <div class="inputbox">
      <form action="search.php" method="post">
       <input class='inputbox' type="text" name="num" placeholder="请输入您的准考证号">
       <input class='button' type="submit" value="查询" >
      </form>
       </div>
      </body>
      </html>

image-20200916223939261

管理员登陆页面设计

沿用search.php页面格式，加多一个密码框，修改一些设置完成。完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>管理员登录</title>
<style>
	body{
        background-image: url(../images/bg.jpg);
		background-position: center;
		background-size: cover;
	    min-height: 100vh;
	}
	.button{
		color: #000000;
		background-color: #dedddd;
		border-radius: 1px;
		border:1px solid #dedddd;
		width: 50px;
		height: 25px;


	}
	.input{

		border-radius: 1px;
		border:1px solid #000000;
		width:410px;
		height: 25px;

	}
	.box{

		filter: alpha(Opacity=70);
		-moz-opacity:0.7;
		opacity: 0.7;
		border-radius: 1px solid #ffffff;
		box-shadow: 1px 1px 50px #ffffff;
		width:410px;
		height: 50px;
		margin: auto;
		margin-top: 180px;
		margin-right: center;
		border-radius: 6px;
	}
	.boxtittle{
		width: 310px;
		margin: auto;
		margin-right: center;
		padding-top: 10px;
		text-align:center;
		cloor:#000000;

	}
	.inputbox{

		width: 410px;
		margin: auto;
		padding-top: 10px;
	}
	</style>
</head>
<body>
    <div class="box">
       <div class="boxtitle">
       <p><h3>管理员登陆</h3></p>
    </div >
        <div class="inputbox">
<form action="login.php" method="post">
 <input class='inputbox' type="text" name="account" placeholder="请输入您的管理员账号">
 <input class='inputbox' type='password' name='password' placeholder='请输入您的密码'>
 <input class='button' type="submit" value="登录" >
</form>
 </div>
</body>
</html>

效果如下：image-20200917195639631

上传页面设计

  • 背景相同，只有一个文件上传域。

  • 代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>录取查询</title>
    <style>
    	body{
            background-image: url(../images/bg.jpg);
    		background-position: center;
    		background-size: cover;
    	    min-height: 100vh;
    	}
    	.button{
    		color: #000000;
    		background-color: #dedddd;
    		border-radius: 1px;
    		border:1px solid #dedddd;
    		width: 50px;
    		height: 25px;


    	}
    	.input{

    		border-radius: 1px;
    		border:1px solid #000000;
    		width:410px;
    		height: 25px;

    	}
    	.box{

    		filter: alpha(Opacity=70);
    		-moz-opacity:0.7;
    		opacity: 0.7;
    		border-radius: 1px solid #ffffff;
    		box-shadow: 1px 1px 50px #ffffff;
    		width:410px;
    		height: 50px;
    		margin: auto;
    		margin-top: 180px;
    		margin-right: center;
    		border-radius: 6px;
    	}
    	.boxtittle{
    		width: 310px;
    		margin: auto;
    		margin-right: center;
    		padding-top: 10px;
    		text-align:center;
    		cloor:#000000;

    	}
    	.inputbox{

    		width: 410px;
    		margin: auto;
    		padding-top: 10px;
    	}
    	</style>
    </head>
    <body>
        <div class="box">
           <div class="boxtitle">
           <p><h3>上传信息</h3></p>
        </div >
            <div class="inputbox">
    <form action="upload.php" method="post">
     <input class='input' type="file" >
     <input class='botton' type="submit" value="提交">
    </form>
     </div>
    </body>
    </html>

    image-20200917211705763

发现少了几个按钮连接。新增上去。

1
2
3
<input type="button" value="插入信息" onclick="window.location.href='insert.php';"/>
<input type="button" value="修改信息" onclick="window.location.href='update.php';"/>
<input type="button" value="上一页" onclick="window.location.href='search.php';"/>

image-20201029154736757

插入信息页面设计

在根目录创建一个insert.php

沿用之前模板，增加几个输入框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上传信息</title>
<style>
	body{
        background-image: url(../images/bg.jpg);
		background-position: center;
		background-size: cover;
	    min-height: 100vh;
	}
	.button{
		color: #000000;
		background-color: #dedddd;
		border-radius: 1px;
		border:1px solid #dedddd;
		width: 50px;
		height: 25px;


	}
	.input{

		border-radius: 1px;
		border:1px solid #000000;
		width:410px;
		height: 25px;

	}
	.box{

		filter: alpha(Opacity=70);
		-moz-opacity:0.7;
		opacity: 0.7;
		border-radius: 1px solid #ffffff;
		box-shadow: 1px 1px 50px #ffffff;
		width:410px;
		height: 50px;
		margin: auto;
		margin-top: 180px;
		margin-right: center;
		border-radius: 6px;
	}
	.boxtittle{
		width: 310px;
		margin: auto;
		margin-right: center;
		padding-top: 10px;
		text-align:center;
		cloor:#000000;

	}
	.inputbox{

		width: 410px;
		margin: auto;
		padding-top: 10px;
	}
	</style>
</head>
<body>
    <div class="box">
       <div class="boxtitle">
       <p><h3>插入信息</h3></p>
    </div >
        <div class="inputbox">
<form action="insert.php" method="post" enctype="multipart/form-data">
  <input class='input' type="test" name="num" placeholder='请输入插入学生的准考证号'>
    <input class='input' type="test" name="name" placeholder='请输入插入学生的姓名'>
      <input class='input' type="test" name="sdept" placeholder='请输入插入学生的院系'>
        <input class='input' type="test" name="profession" placeholder='请输入插入学生的专业'>
         <input class='botton' type="submit" value="插入">
        <input type="button" value="上一页" onclick="window.location.href='upload.php';"/>


</form>
 </div>
</body>
</html>

image-20201029155022933

修改信息页面设计

根目录创建update.php

原理一样。源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上传信息</title>
<style>
	body{
        background-image: url(../images/bg.jpg);
		background-position: center;
		background-size: cover;
	    min-height: 100vh;
	}
	.button{
		color: #000000;
		background-color: #dedddd;
		border-radius: 1px;
		border:1px solid #dedddd;
		width: 50px;
		height: 25px;


	}
	.input{

		border-radius: 1px;
		border:1px solid #000000;
		width:410px;
		height: 25px;

	}
	.box{

		filter: alpha(Opacity=70);
		-moz-opacity:0.7;
		opacity: 0.7;
		border-radius: 1px solid #ffffff;
		box-shadow: 1px 1px 50px #ffffff;
		width:410px;
		height: 50px;
		margin: auto;
		margin-top: 180px;
		margin-right: center;
		border-radius: 6px;
	}
	.boxtittle{
		width: 310px;
		margin: auto;
		margin-right: center;
		padding-top: 10px;
		text-align:center;
		cloor:#000000;

	}
	.inputbox{

		width: 410px;
		margin: auto;
		padding-top: 10px;
	}
	</style>
</head>
<body>
    <div class="box">
       <div class="boxtitle">
       <p><h3>修改信息</h3></p>
    </div >
        <div class="inputbox">
        	<form action="alter.php" method="post" enctype="multipart/form-data">
     <input class='input' type="test" name="num" placeholder='请输入要修改学生的准考证号'>
       <input class='input' type="test" name="name" placeholder='请输入修改后姓名'>
       <input class='input' type="test" name="sdept" placeholder='请输入修改后的院系'>
       <input class='input' type="test" name="profession" placeholder='请输入修改后的专业'>
        <input class='botton' type="submit" value="修改">
                <input type="button" value="上一页" onclick="window.location.href='upload.php';"/>



</form>
 </div>
</body>
</html>

image-20201029155130481

chickenmushroomWeb

平平无奇的小红帽。