PHP选课系统第三集——登录页面(login.php)

PHP选课系统第三集——登录页面(login.php)

这是PHP选课系统系列的第三篇,此系列会带领新学习PHP的萌新们一点一点的自己完成一个选课系统。我也是新学的菜鸟,所以大家一起努力吧!
如果不想看过程,最后有最终代码。
在这里用的环境是NetBeans IDE 8.0.2和XAMPP。

一、登录页面的制作

1.构思

老样子,构思一下登录页面需要有什么
一个标题,一个输入用户名和一个输入密码的地方,一个选择是学生还是老师的选项,一个确认提交的按钮。
PHP选课系统第三集——登录页面(login.php)_第1张图片

2.分解

用我们经典配色将它分解。首先,大家应该已经熟悉了,它应该在一个

里的。在这个div中,分成三块内容,分别是请登录这个标题,其他各种需要填写的信息,还有一个提交按钮。(这里的后两块按照功能划分了一下)
这里我们需要注意,在外层的
的外面,我们还要套一层表单
。表单用于向服务器传输数据。然后在表单里有一个大
,在其中又分别有三个

PHP选课系统第三集——登录页面(login.php)_第2张图片

第一个小

只有标题,很简单;第二个小
中则要复杂许多。通过分解,我们需要一个“用户名”,并用写用户名,密码同理;学生和老师的选项按钮则也用完成;第三个小
中也只有一个提交按钮
PHP选课系统第三集——登录页面(login.php)_第3张图片

3.写框架

先写出刚才分解后的框架,并做一些外层的简单的css设置,效果如下
PHP选课系统第三集——登录页面(login.php)_第4张图片

		
            
请登录

4.css调格式

到了最麻烦的调格式环节,这个框我们不想它有这么宽,想让它的width跟着内容的多少走,我们只需要在大

加上display: inline-block ;这样外层的设置就差不多了,接下来就是调整里面的内容了
PHP选课系统第三集——登录页面(login.php)_第5张图片

2)
先从简单的入手,第一个小

给它起名字class="ct",在style中写入css代码

 .ct{
                font-family: 宋体;
                font-size: 18px;
                padding: 15px 0;
                background-color: lightblue;
            }

PHP选课系统第三集——登录页面(login.php)_第6张图片
3)
接下来再写第二简单的小

,最后的提交按钮,给它起名字class="ci2"(由于这里讲解和实际写的时候的顺序有一些出入,所以出现的名字可能有一些混乱,大家趁机可以锻炼自己的读代码能力),这里 cursor: pointer;的意思就是鼠标指针变成 手 的形状,和放到链接上面的鼠标指针一样。

		 .ci2{
                font-family: 宋体;
                font-size: 16px;
                padding: 5px 25px;
                cursor: pointer;
            }

最后调试的就是最复杂的第二个

,我们观察得知他们现在都处于一行,如何运用我们所学将他们分行呢?方法有很多,大家可以去尝试,我这里用了

“行”和“块”的知识。将需要在一行的内容放在同一个

中,这样就都分好行了。

PHP选课系统第三集——登录页面(login.php)_第7张图片

				

接下来我们先来调试用户名和密码这两行,分别给前面的label和后面的input起名class="cl"class="ci1",设置好宽度就可以让他们整整齐齐。
接下来我们给用户名和密码再添加一个功能,就是点这几个字就可以直接在后面的input中输入了,不必非点在后面的input中。给inputid名,再再前面的label中写入for="这是id名"就完成了。

PHP选课系统第三集——登录页面(login.php)_第8张图片

			.ci1{
                font-family: 宋体;
                font-size: 13px;
                width: 150px;
            }
             .cl{
                display: inline-block;
                width: 70px;
            }
			

最后,来到inputradio功能,分别给他们起名,同理用for
其中的checked="checked"是预选功能
这样,登录页面就完成了

PHP选课系统第三集——登录页面(login.php)_第9张图片

二、为了方便,这里又放上了代码


    
        
        
    
    
         
        
请登录

你可能感兴趣的:(php,html5)