首页 > 编程语言 >十二生肖查询网页版制作(php)

十二生肖查询网页版制作(php)

时间:2022-11-30 12:00:42浏览次数:85  
标签:网页 a9c9d0 width 1px year 十二生肖 php margin left

今天无聊做了一个十二生肖查询器:

预览网址效果:​​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;
borde-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>

 

源码面前,了无秘密



标签:网页,a9c9d0,width,1px,year,十二生肖,php,margin,left
From: https://blog.51cto.com/zhenghongxin/5898221

相关文章