div居中显示方法

来源:互联网 发布:算法分析与设计基础pdf 编辑:程序博客网 时间:2024/05/17 21:40

页面效果:

显示效果

//html网页代码:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.order{width:521px;height:20px;padding:9px 7px;border:1px solid #b8b8b8;border-right:0;text-align:left;height:38px;}
.btn{color:white;background-color:#38f;height:38px;font-size:18px;border:0;}
html { height:100%;}
body { height:100%; text-align:center;}
.centerDiv { display:inline-block; zoom:1; *display:inline; vertical-align:middle; text-align:center; width:800px; padding:10px; }
.hiddenDiv { height:100%; overflow:hidden; display:inline-block; width:1px; overflow:hidden; margin-left:-1px; zoom:1; *display:inline; *margin-top:-1px; _margin-top:0; vertical-align:middle;}
</style>

</head>
<body>
    <form name="f" id="form" action="" method="post">
        <div class="centerDiv">
            <input placeholder="请输入支付宝订单号" class="order" name="order_alino"  maxlength="100"  type="text">
            <input value="下载报告" class="btn" id="submit" name="submit" type="submit">
            <div class="centerDiv2">
                <br><span name="ShowEsg" id="ShowEsg" style="color: red; font-weight: bold">{$message}</span>
                <span name="report_path" id="report_path" style="color: blue; font-weight: bold"><a href="{$data['report_path']}">{$data['report_path']}</a></span>
            </div>

        </div>  
        <div class="hiddenDiv"></div>

    </form>
</body>

</html>

控制器获取模板输出数据:

function down_load_report(){
        $CheckTask = M('CheckTask');
        if(IS_POST){
            $cond['order_alino'] = $_POST['order_alino'];
            $data = $CheckTask->where($cond)->find();
            if(!$data){
                $this->assign('message','该订单不存在') ;
                $this->display();
                return false;
            }
            elseif($data['result_status']==0){
                $this->assign('message','论文检测还未完成,请等检测完成后再下载') ;
                $this->display();
                return false;
            }
            elseif($data['result_status']==2){
                $this->assign('message','论文检测失败,请重新上传论文进行检测') ;
                $this->display();
                return false;
            }else{
                $this->assign('message','请点击链接下载:') ;
                $this->assign('data',$data) ;
                $this->display();
            }

        }else
            $this->display();
    }

0 0
原创粉丝点击