第七天

这是我今天主要做的界面，通过background-color:rgb(255,255,255,0.2);这个css属性将form表单设计了出来，外阴影是通过box-shadow这个css属性弄的，下面是我的代码

<?php
session_start();
?>
<html>
<head>
<meta charset="gb2312">
<title>登陆</title>
<style>
body{background-image:url(img/bj.jpg);background-size:cover;
}
.ht{height:400px;width:400px;border-radius:10px;background-color:rgba(255,255,255,0.2); position:absolute;left:0;top: 0;bottom: 0;right: 0;margin: auto;box-shadow: 0 0 15px #4E4E4E;
}
.mc{height:50px;width:400px;color:#fff;font-size:32px;text-align:center;
}
.zt{background-color:rgba(255,255,255,0.18);height:300px;width:400px;
}
.zt .input1{ background-color:rgb(255,255,255,0);margin-left:20px; width:300px; height:40px; border-radius:5px; font-size:20px; position:relitave;border:2px solid #eee;} .zt .input2{ background-color:rgb(255,255,255,0);margin-left:20px; width:300px; height:40px; border-radius:5px; font-size:20px; border:2px solid #eee;} .zt .input3{ background-color:rgb(255,255,255,0);margin-left:20px; width:240px; height:40px; border-radius:5px; font-size:20px; border:2px solid #eee;}
.yzm{float:right;margin-top:3px;margin-right:15px;
}
.zt button{width:90%;height:50px;background-color:#66D354;color:#fff;font-size:27px;margin-left:20px;border-radius:3px;margin-top:35px;border:0px solid;
}
.zt button:hover{box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); color:#f90;
}
.t@b{width:400px;height:100px;background-color:#eee;margin-top:25px;
}
.footer{text-align:center;color:#fff;line-height:50px;
}
</style>
</head>
<body>
<div class="ht"><div class="mc"><b>交换机管理系统</b></div><div class="zt"><form action="logincheck.php" method="post"><br><input class="input1" type="text" name="user" placeholder="用户名" required><br><br><input class="input2" type="password" name="password" placeholder="密码" required><br><br><input class="input3" type="text" name="yzm" placeholder="验证码" size="20" required>&nbsp;<div class="yzm"><a href="javascript:void(0)" onclick="document.getElementById('code_img').src='form.php?r='+Math.random()"><img id="code_img" border="1" src="form.php?r=<?php echo rand();?>" width="100" alt=""></a></div><br><button name="submit">登陆</button><div class="tb"></div></form></div><div class="footer">版权所有:网络与教育技术中心</div>
</div>
</body>
</html>

这个是背景图片

这个是form.php,验证码图片

<?php
session_start();$image=imagecreatetruecolor(100,30);
$bgcolor=imagecolorallocate($image,255,255,255); //#fff
imagefill($image, 0, 0, $bgcolor);$captch_code='';
//画出4个随机的数字或者字母
for($i=0;$i<4;$i++){$fontsize=6;//为了让数字的颜色不同,使用随机颜色rand(0,120),120之前是深色$fontcolor=imagecolorallocate($image,rand(0,120),rand(0,120),rand(0,120));$data='abcdefghijklmnopqrstuvwxyz123456789';//由于o和0对于一些人不太好区别，所以把0去掉了$fontcontent=substr($data,rand(0,strlen($data)),1);$captch_code.=$fontcontent;$x=($i*100/4)+rand(5,10);$y=rand(5,10);//水平画一条字符串imagestring($image,$fontsize,$x,$y,$fontcontent,$fontcolor);
}
$_SESSION['authcode']=$captch_code;
//增加点干扰元素
for($i=0;$i<200;$i++){$pointcolor=imagecolorallocate($image,rand(50,200),rand(50,200),rand(50,200));//画一个单一像素imagesetpixel($image,rand(1,99),rand(1,99),$pointcolor);
}
//增加线干扰元素
for($i=0;$i<3;$i++){$linecolor=imagecolorallocate($image,rand(80,220),rand(80,220),rand(80,220));imageline($image,rand(1,99),rand(1,29),rand(1,99),rand(1,29),$linecolor);
}
header('content-type:image/png');
imagepng($image);imagedestroy($image);
?>

访客计数器

<html>
<head>
<title>访客计数器</title>
</head>
<body>
<?php
$counterFile = "./tmp/counter.txt";function displayCounter($counterFile){$fp = fopen($counterFile,"rw");$num = fgets($fp,5);$num += 1;print "您是第".$num."位无聊份子";exec("del $counterFile");exec("echo $num > $counterFile");
}
if(!file_exists($counterFile)){exec("echo 0 > $counterFile");
}
displayCounter($counterFile);
?>
</body>
</html>

在任何一个文件中包含它（include 'fanke.php';)，然后通过displayCounter($counterFile);调用。
这几天先缓缓，看看别的书籍，登陆进入后的页面也会一步一步的调整的。。。

AND

祝大家五一劳动节快乐！！！

项目实战--制作web管理锐捷交换机(七)相关推荐

项目实战--制作web管理锐捷交换机(一）
最近,我们学院刚刚进行了计算机设计大赛,我却没什么可以拿出手的,所以心里想敲一个web管理交换机信息系统,这个思路是由我们网络中心的老师提出的,他给我们展示了php连接交换机并进行一些配置,包括查看是 ...
锐捷交换机Telnet/SSH 远程管理配置
锐捷交换机Telnet/SSH 远程管理配置很久没有更新CSDN了因为之前一段时间在找工作,好了废话不多说直接上图. 实验环境有锐捷设备的真机最好使用真机进行配置,如果没有真机的朋友,可以使用锐 ...
161、锐捷交换机如何配置ssh管理
通过ssh功能远程登录管理设备 1)全局开启SSH服务,并制定SSH的版本 Ruijie>enable Ruijie#configure terminal Ruijie(config)#ena ...
锐捷交换机配置命令大全_锐捷交换机常用配置命令汇总
给大家分享一下锐捷交换机的配置命令学习一些基础网络知识还是不错的,尤其在视频监控系统中应用一下,还是可以的. 一.连接及远程登录用一台计算机作为控制台和网络设备相连接,通过计算机对网络设备进行配置. ...
非常实用，华为、新华三、锐捷交换机的配置命令分享
干弱电这一行难免会接触到交换机,华为.新华三锐捷交换机又是最常见的交换机,关于他们的命令配置很容易弄混,而且在实际项目配置中也很容易出错,因此,本期我们将来介绍这三家交换机的基础配置命令,大家可以分别 ...
166、锐捷交换机如何配置？一步步详解，交换机配置再也不难了
本期内容共分为两部分,第一部分是vlan的基础配置命令,第二部分是锐捷交换机的配置实例,我们一起来看下,如何一步步的连接及配置锐捷交换机. 一.连接及远程登陆用一台计算机作为控制台和网络设备相连,通 ...
中兴交换机配置telnet连接_锐捷交换机如何配置？一步步详解，交换机配置再也不难了...
锐捷交换机最近挺火,这段时间不断的有朋友多次提到锐捷交换机的配置,本期我们来了解锐捷交换机的配置.本期内容共分为两部分,第一部分是vlan的基础配置命令,第二部分是锐捷交换机的配置实例,我们一起来看下 ...
421、锐捷交换机如何配置？一步步详解，交换机配置再也不难了
一.连接及远程登陆用一台计算机作为控制台和网络设备相连,通过计算机对网络设备进行配置. 1.硬件连接: 把Console线一端连接在计算机的串行口上,另一端连接在网络设备的Console口上. 按照 ...
三层交换机如何封装trunk_锐捷交换机常用配置命令汇总
前面我们给大家汇总了华为.华三交换机的配置命令,都是非常适合小项目的,当然碰到大型的网络工程,还是需要厂家的专业人才来做.今天再给大家分享一下锐捷交换机的配置命令,这样国内三大家就全部都有了,学习一些 ...

项目实战--制作web管理锐捷交换机(七)

第七天

AND

祝大家五一劳动节快乐！！！

项目实战--制作web管理锐捷交换机(七)相关推荐

最新文章

热门文章