帝国cms教程栏目，提供精品建站，仿站，二次开发，安装，标签使用等图文教程，帮助建设和管理好你的帝国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搜索提示框，使其更加美观
本文永久链接地址：https://www.moyouyouw.cn/code/551.html
郑重声明：本站所有主题/文章除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！我们不承担任何技术及版权问题，且不对任何资源负法律责任。
售价： 399 55 ℃ 0 评论
售价： 399 86 ℃ 0 评论
售价： 399 49 ℃ 0 评论
已有 位小伙伴发表了看法
欢迎 你 发表评论