第七天
这是我今天主要做的界面，通过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>
<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);调用。
这几天先缓缓，看看别的书籍，登陆进入后的页面也会一步一步的调整的。。。