PHP选课系统第一集——页眉（header.php）

最新推荐文章于 2022-07-09 21:01:39 发布

Dozenboy

最新推荐文章于 2022-07-09 21:01:39 发布

阅读量387

点赞数 1

文章标签： php

本文链接：https://blog.csdn.net/weixin_51382471/article/details/124409531

版权

PHP选课系统第一集——页眉（header.php）

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

一、页眉的制作

1.构思

首先，我们先要有一个页眉的构思，它应该是什么样子的，需要什么功能。接下来我们再将构思好的样子进行分解。
在这里插入图片描述

2.分解

以本例为例，通过构思和观察，我们可以将它分解。首先，这一堆东西，它是应该在一个<div>里的。在这个div中，分成三块内容，分别是选课的图片、欢迎使用的欢迎文字、实时的日期和时间。(来个红配绿)
所以我们可以想到这里面会有至少一个<img>、一个<span>和一个包含各种时间的<div>
在这里插入图片描述
这个小<div>中又有三行内容，所以能分为三个能回车的能输入文字的标签，这里用的是<p>，其中的实时变化的时间就改用到PHP代码了。

3.写框架

先写出刚才分解后的框架，这里将“欢迎使用”和后面的“系统名字”分开，是为了方便更改内容，同时提示大家<span>和<p>的区别，一个是行元素，一个是块元素。

<div >
            <a href="index.php"><img src="image/logo.png"  /> </a>
            <span >欢迎使用</span>
            <span >教学选课系统！</span>
            <div >
                <p >年月日</p>
                <p >星期</p>
                <p >时间</p>
            </div>

        </div>

4.css调格式

我们需要将图片（在最左）、文字（在中间）、时间（在最右）放在“一行”中，先将最外层的<div>的字体、背景、宽度等调试，再用float来调试每块内容，其中的时间内容块，我们也加上背景，方便看清格式。

<div style="font-family: 宋体; background-color: #eeeeee; width: 90%; margin:0 auto;">
            <a href="index.php"><img src="image/logo.png" style="float:left;" /> </a>
            <span >欢迎使用</span>
            <span >教学选课系统！</span>
            <div style="font-size: 13px; float:right; background-color: aqua; text-align: right;">
                <p >年月日</p>
                <p >星期</p>
                <p >时间</p>
            </div>

        </div>

在这里插入图片描述

2）
接下来调试中间的文字位置和大小，以及最重要的边框间距，这些都是需要自己去慢慢试的，唯一的捷径就是勤加练习。
注：
可能有人注意到了，之前明明在大<div>中加了background-color，怎么没颜色呀？这个问题非常的nice，这个时候在下面代码中的那个位置上（大家善于发现的双眼一定找到在哪里了）加上<div style="clear: both;"></div>，会神奇的发现，背景颜色出现了！因为clear:both意思就是清除浮动，在不加它的时候，这个大<div>中的三块东西是没有让它有内容的，因为这三块是float形态的，而clear:both就是一个有东西的div，它排在这三块的后面，使得它（clear:both）的大小覆盖过了三块内容。具体解释，大家可以再去搜索一下。

<div style="font-family: 宋体; background-color: #eeeeee; width: 90%; margin:0 auto;">
            <a href="index.php"><img src="image/logo.png" style="float:left;" /> </a>
            <span style="font-size: 28px; font-family: 楷体; float: left; margin: 20px 5px 0 20px">欢迎使用</span>
            <span style="font-size: 28px; float:left; margin-top: 20px;">教学选课系统！</span>
            <div style="font-size: 13px; float:right; background-color: aqua; text-align: right;">
                <p style="margin: 3px 3px 8px 0">年月日</p>
                <p style="margin: 8px 3px 8px 0">星期</p>
                <p style="margin: 8px 3px 3px 0">时间</p>
            </div>
			<div style="clear: both;"></div>
        </div>

在这里插入图片描述

5.PHP代码

最后，我们只差实时的时间了。首先是改时区，然后就用几个简单的php代码就ok啦，代码具体意思大家可以去搜索一下，巩固自己哟。

<?php
        date_default_timezone_set("PRC");//时区改为PRC，是北京的时区
        $c=  time();
        $d=  date("Y年n月d日");
        $weeks=array("日","一","二","三","四","五","六");
        $w="星期".$weeks[date("w",$c)];
        $t=(date("a",$c)=="am"?"上午":"下午")." ".date("h:i:s",$c);
        ?>
        <div style="font-family: 宋体; background-color: #eeeeee; width: 90%; margin:0 auto;">
            <a href="index.php"><img src="image/logo.png" style="float:left;" /> </a>
            <span style="font-size: 28px; font-family: 楷体; float: left; margin: 20px 5px 0 20px">欢迎使用</span>
            <span style="font-size: 28px; float:left; margin-top: 20px;">教学选课系统！</span>
            <div style="font-size: 13px; float:right; background-color: aqua; text-align: right;">
                <p style="margin: 3px 3px 8px 0"><?php echo $d; ?></p>
                <p style="margin: 8px 3px 8px 0"><?php echo $w; ?></p>
                <p style="margin: 8px 3px 3px 0"><?php echo $t; ?></p>
            </div>
            <div style="clear: both;"></div>
        </div>

这也就是它最终的模样啦
在这里插入图片描述

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

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <link rel="stylesheet" type="text/css" href="xk.css"/>
        <?php
        date_default_timezone_set("PRC");
        $c=  time();
        $d=  date("Y年n月d日");
        $weeks=array("日","一","二","三","四","五","六");
        $w="星期".$weeks[date("w",$c)];
        $t=(date("a",$c)=="am"?"上午":"下午")." ".date("h:i:s",$c);
        ?>
        <div style="font-family: 宋体; background-color: #eeeeee; width: 90%; margin:0 auto;">
            <a href="index.php"><img src="image/logo.png" style="float:left;" /> </a>
            <span style="font-size: 28px; font-family: 楷体; float: left; margin: 20px 5px 0 20px">欢迎使用</span>
            <span style="font-size: 28px; float:left; margin-top: 20px;">教学选课系统！</span>
            <div style="font-size: 13px; float:right; background-color: aqua; text-align: right;">
                <p style="margin: 3px 3px 8px 0"><?php echo $d; ?></p>
                <p style="margin: 8px 3px 8px 0"><?php echo $w; ?></p>
                <p style="margin: 8px 3px 3px 0"><?php echo $t; ?></p>
            </div>
            <div style="clear: both;"></div>
        </div>
        
    </body>
</html>

Dozenboy

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
PHP选课系统第一集——页眉（header.php）

PHP选课系统第一集——页眉（header.php）这是PHP选课系统系列的第一篇，此系列会带领新学习PHP的萌新们一点一点的自己完成一个选课系统。我也是新学的菜鸟，所以大家一起努力吧！在这里用的环境是NetBeans IDE 8.0.2和XAMPP。一、页眉的制作1.构思首先，我们先要有一个页眉的构思，它应该是什么样子的，需要什么功能。接下来我们再将构思好的样子进行分解。2.分解以本例为例，通过构思和观察，我们可以将它分解。首先，这一堆东西，它是应该在一个<div>里的。在这个
复制链接

扫一扫