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

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

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





本文出自 “分享心得” 博客,请务必保留此出处http://zhenghongxin.blog.51cto.com/8686638/1615964

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。