今天无聊做了一个十二生肖查询器:
预览网址效果:http://hongxing01.hktd02u.me48.com/03Sxcx
源代码下载:http://down.51cto.com/data/1985014
这个Demo的学习非常适合php初学者学习,练练手。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>生肖查询</title>
<style>
*{
margin:0;
padding:0;
}
.knr{
margin:0 auto;
padding:0 auto;
width:540px;
}
.tit{
background:url(‘./img/tit.png‘) no-repeat;
height:40px;
padding-top:20px;
padding-left:20px;
font:normal bold 12pt serif;
color:#026ea3;
}
.main{
float:left;
border-left:1px solid #a9c9d0;
border-right:1px solid #a9c9d0;
border-bottom:1px solid #a9c9d0;
width:538px;
}
.inp{
float:left;
width:300px;
margin-left:20px;
margin-top:20px;
}
.intext{
width:250px;
height:25px;
}
.bun{
margin-top:15px;
margin-left:15px;
}
.sximg{
float:left;
border:1px solid #a9c9d0;
width:170;
height:170;
margin-bottom:10px;
}
</style>
</head>
<body>
<div class="knr">
<div class="tit">
十二生肖查询
</div>
<div class="main">
<div class="inp">
<form action="" method="post">
<input type="text" name="year" class="intext" value="请输入出行年。如:1993,右侧显示生肖" onfocus="this.value=‘‘">
<input type="image" name="submit" class="bun" src="./img/submit.gif">
<input type="image" name="reset" class="bun" src="./img/reset.gif">
</form>
</div>
<div class="res">
<?php
$year = isset($_REQUEST[‘year‘]) ? $_REQUEST[‘year‘] : 1993;
if(isset($year)&&($year>1902 && $year<2112)){
$sx = $year % 12;
?>
<div class="sximg">
<img src="./img/<?php echo $sx?>.png" width="150">
</div>
<?php
}else{
echo ‘请输入正确的出生年份!‘;
}
?>
</div>
</div>
</div>
</body>
<script src="http://app.baidu.com/static/appstore/monitor.st"></script>
<script>
baidu.app.autoHeight();
baidu.app.setHeight(200);
</script>
</html>