帝国模板之家为广大用户提供专业、一站式建站服务。

帝国cms教程

帝国cms教程栏目,提供精品建站,仿站,二次开发,安装,标签使用等图文教程,帮助建设和管理好你的帝国cms站点。

当前位置:首页 > 教程 > 帝国cms教程 > 正文

如何修改帝国cms搜索提示框,使其更加美观

帝国模板之家 2020-10-12 帝国cms教程 评论

帝国cms默认的搜索提示框,样式真的很难看,如何美化一下呢?下面给大家分享一下帝国模板之家网美化搜索框的代码。

1.首先找到并打开/e/message/index.php ,替换为如下代码:

<?php
if(!defined('InEmpireCMS'))
{
    exit();
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跳转提示</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="stylesheet" type="text/css" href="<?=$public_r[newsurl]?>skin/web/css/jump.css" />
</head>

<body>
<div class="popup" style="display: block;">
    <div class="pop-big" style="opacity: 0.3;"></div>
    <div class="pop-jump">
        <div class="jump-top">
            <h3>提示信息</h3>
        </div>
        <div class="jump-bom">
            <section>
                <img src="<?=$public_r[newsurl]?>skin/web/images/jump.jpg"/>
                <p>正在跳转,请稍后…</p>
            </section>
                    <span>
                        <h3><?=$error?></h3>
                        <p>正在为您打开页面...等待时间: <b id="wait">3</b></p>
                        <a id="href" href="<?=$gotourl?>">如果您的浏览器没有自动跳转,请点击这里</a>
                    </span>
        </div>
    </div>

</div>
</body>
<script type="text/javascript">
    (function(){
        var wait = document.getElementById('wait'),
            href = document.getElementById('href').href;
        var interval = setInterval(function(){
            var time = --wait.innerHTML;
            if(time <= 0) {
                location.href = href;
                clearInterval(interval);
            };
        }, 1000);
    })();
</script>
</html>

2.创建jump.css文件 放在/skin/web/css/中,代码如下:

@charset "utf-8";
*html{background-image:url(about:blank);background-attachment:fixed}
body{position:relative;padding:0;margin:0;color:#333;font:16px/1.4 "Microsoft YaHei",Arial,'\5b8b\4f53';background-color:#fafafa; margin:0 auto;word-break:break-all;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,figure,input,textarea,blockquote,p,th,td,span{margin:0;padding:0}
address,caption,cite,code,dfn,em,strong,th,var,i{font-style:normal;font-weight:normal}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,button,img{border:0;margin:0;padding:0}
input{vertical-align:middle}
img{border:none;-ms-interpolation-mode:bicubic}
ol,ul,li{list-style: outside none none;}
em,i{font-style:normal}
a{text-decoration:none;color:#333;font-weight:normal}
a:hover{text-decoration:none;}
.clear{clear:both}
.clearfix{display:block;zoom:1}
.clearfix:after{content:".";display:block;height:0;font-size:0;line-height:0;clear:both;visibility:hidden}
.o-h{overflow:hidden}
.p-r{position:relative}
.p-a{position:absolute}
.ta-c{text-align:center;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.m-0{ margin:0 auto;}
.pt-20{padding-top: 20px;}
.pb-35{padding-bottom: 35px;}
.mt-20{margin-top: 20px !important;}
.mb-15{margin-bottom: 15px;}
.mb-20{margin-bottom: 20px;}
.mb-30{margin-bottom: 30px;}
.mb-40{margin-bottom: 40px !important;}

/*图标*/
.mem-icon{background:url(../images/mem-icon.png) no-repeat center 0px;}
.member-main_left .main-l_ul li:nth-child(2) i{background-position: center -25px;}
.member-main_left .main-l_ul li:nth-child(3) i{background-position: center -50px;}
.member-main_left .main-l_ul li:nth-child(4) i{background-position: center -78px;}
.member-main_left .main-l_ul li:nth-child(5) i{background-position: center -107px;}
.member-main_left .main-l_ul li:nth-child(6) i{background-position: center -136px;}
.mem-vip{background: url(../images/mem-ind.png) no-repeat 11px 0px;}
.member-main_right .buy-vip li .mem-vip.vip-1{background-position: 0px 0px;}
.member-main_right .buy-vip li .mem-vip.vip-2{background-position: -100px 0px;}
.member-main_right .buy-vip li .mem-vip.vip-3{background-position: -202px 0px;}
.member-main_right .buy-vip li .mem-vip.ace-1{background-position: 0px -98px;}
.member-main_right .buy-vip li .mem-vip.ace-2{background-position: -90px -98px;}
.member-main_right .buy-vip li .mem-vip.ace-3{background-position: -168px -98px;}
.mem-vip.infor-qq{background-position: 0px -153px;}
.mem-vip.infor-wx{background-position: -62px -153px;}
.on .mem-vip.op-1{background-position: -131px -177px;}
.on .mem-vip.op-2{background-position: -166px -177px;}
.on .mem-vip.op-3{background-position: -201px -177px;}

/*弹窗*/
.popup{display: none;}
.pop-big{width: 100%;height: 100%;background: #000000;opacity: 0.5;position: fixed;top: 0px;}
.pop-con{width: 430px;background: #fff;position: fixed;top: 30%;left: 50%;margin-left: -240px;border-radius:5px;padding: 7px 25px 20px 25px;}
.pop-tele{width: 100%;display: block;height: 45px;border-bottom: 1px solid #eee;}
.pop-tele li{height: 45px;text-align: center;line-height: 43px;display: block;float: left;font-size: 18px;min-width: 90px;}
.pop-tele li a{display: block;height: 43px;line-height: 43px;padding: 0 15px;}
.pop-tele li.aito a{border-bottom: 3px solid #3366ff;color: #3366FF;font-weight: bold;}

/*跳转*/
.pop-jump{width: 634px;height: 334px;background: #fff;position: fixed;top: 30%;left: 50%;margin-left: -317px;box-shadow: 0px 0px 15px 5px #878787;}
.pop-jump .jump-top{height: 42px;background: #f8f8f8;border-bottom: 1px solid #eee;}
.pop-jump .jump-top h3{font-size: 14px;color: #333;line-height: 42px;padding:0 20px;}
.pop-jump .jump-bom section{float: left;width: 280px;}
.pop-jump .jump-bom img{width: 150px;height: 155px;margin: 40px 0 0 65px;}
.pop-jump .jump-bom section p{width: 280px;text-align: center;}
.pop-jump .jump-bom span{width: 354px;float: right;padding-top: 30px;}
.pop-jump .jump-bom span h3{font-size: 20px;color: #003398;height: 75px;line-height: 75px;}
.pop-jump .jump-bom span p{font-size: 14px;height: 28px;line-height: 28px;}
.jump-bom span a{font-size: 14px;height: 28px;line-height: 28px;text-decoration:underline;}

推荐教程:帝国CMS教程

以上就是如何修改帝国cms搜索提示框,使其更加美观的方法,更多相关内容请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言