第二版帝国cms前台搜索、注册、登录提示页面界面美化

这是一篇帝国cms教程,帝国cms官方默认的提示页总是有点不堪入目,所以对他进行美化一下,希望对有需要的朋友有一些帮助!之前有发过另外一种风格的美化界面,有需要的可以看看https:

这是一篇帝国cms教程,帝国cms官方默认的提示页总是有点不堪入目,所以对他进行美化一下,希望对有需要的朋友有一些帮助!

之前有发过另外一种风格的美化界面,有需要的可以看看https://www.soqiy.com/ecms/1695.html

效果图:

使用教程

打开文件/e/message/index.php将内容替换为如下代码:

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>温馨提示</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-transform"/>
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<script src="//apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script><!--调用的百度共用jquery.min.js库,你可以保存本地,或不用管-->
<SCRIPT language=javascript>
var secs=3;//3秒
for(i=1;i<=secs;i++) 
{ window.setTimeout("update(" + i + ")", i * 1000);} 
function update(num) 
{ 
if(num == secs) 
{ history.go(-1); } 
else 
{ } 
}
</SCRIPT>
<style>
body.panpwd,body.msgbg{height:100%;overflow:hidden;background:#f1f1f1}
.message{background:#fff;box-shadow:1px 1px 6px rgba(0, 0, 0, 0.1)}
.message h3{font-size:14px;font-weight:500}
.message p{font-size:20px;color:#f90;margin:10px 0 20px;letter-spacing:1px}
.message p i{font-size:18px;margin:0px 8px 0 0;color:#ffc46c}
.message a{color:#2D8AC5;text-decoration: none;}
.pb1,.pb2,.pb3{position:absolute;border-radius:100%}
.pb1{top:-172px;right:-240px;background:-webkit-gradient(linear,0 0,0 bottom,from(#FECCC2),to(#FDE0AE));width:400px;height:440px}
.pb2{width:284px;height:275px;background:#f1f1f1;top:-100px;right:-220px}
.pb3{width:400px;height:400px;background:#00FED9;bottom:-200px;left:-200px}
.passport,.message{width:600px;margin:-160px 0 0 -300px;border-radius:4px;padding:30px 0;text-align:center;position:absolute;top:50%;left:50%;z-index:100}
.passport h3{font-size:24px;font-weight:700;color:#333}
.passport form{margin:20px auto;display:block;width:100%;border-radius:6px;position:relative}
.passport form i{position:absolute;font-size:32px;color:#ddd;left:16px;top:8px}
.passport form .text{width:90%;display:block;height:48px;padding:0;border-radius:100px;font-size:16px;color:#555;background:#fff;text-indent:52px}
.passport form .btn{color:#fff;position:absolute;right:0;top:0;width:18%;display:inline-block;font-size:16px;text-align:center;cursor:pointer;height:48px;line-height:48px;border-radius:100px}
.passport p{font-size:14px;color:#f90}
.passport p i{font-size:14px;margin:0 6px 0 0}
.orbtn{background:#ff6f00;background:linear-gradient(to right,#f07d17 0,#ffae12 100%);box-shadow:0 5px 10px rgba(255,111,0,.25)}
.orbtn:hover{background:#ff9f16}
.orbtn{transition-duration:0s}
@-webkit-keyframes orbloop{
  from{-webkit-transform:rotate(0deg)}
  to{-webkit-transform:rotate(360deg)}
}
@keyframes orbloop{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@-webkit-keyframes orbmove{
  from{-webkit-transform:translateX(-1000px)}
  to{-webkit-transform:translateX(2000px)}
}
@keyframes orbmove{
  from{transform:translateX(-1000px)}
  to{transform:translateX(2000px)}
}
#bg{position:absolute;width:1000px;height:1000px;top:50%;left:50%;margin-left:-500px;margin-top:-500px}
#bg div div{position:absolute}
#bg{opacity:0}
#bg .row1 div{-webkit-animation:orbmove 48s linear infinite;animation:orbmove 96s linear infinite}
#bg .row1 .orb1{position:absolute;width:60px;height:60px;top:50%;left:50%;margin-left:-30px;margin-top:-380px}
#bg .row1 .orb1 div{width:100%;height:100%;border-radius:60px;background:-webkit-linear-gradient(top,#ffffff,#dedede);background:linear-gradient(to bottom,#ffffff,#dedede);-webkit-animation:orbloop 6s linear infinite;animation:orbloop 6s linear infinite}
#bg .row1 .orb2{position:absolute;width:100px;height:100px;top:50%;left:50%;margin-left:450px;margin-top:50px}
#bg .row1 .orb2 div{width:100%;height:100%;border-radius:100px;background:-webkit-linear-gradient(top,#ffffff,#dedede);background:linear-gradient(to bottom,#ffffff,#dedede);-webkit-animation:orbloop 6s linear infinite;animation:orbloop 6s linear infinite}
#bg .row1 .orb1c{position:absolute;width:60px;height:60px;top:50%;left:50%;margin-left:1970px;margin-top:-380px}
#bg .row1 .orb1c div{width:100%;height:100%;border-radius:60px;background:-webkit-linear-gradient(top,#ffffff,#dedede);background:linear-gradient(to bottom,#ffffff,#dedede);-webkit-animation:orbloop 6s linear infinite;animation:orbloop 6s linear infinite}
#bg .row1 .orb2c{position:absolute;width:100px;height:100px;top:50%;left:50%;margin-left:2450px;margin-top:50px}
#bg .row1 .orb2c div{width:100%;height:100%;border-radius:100px;background:-webkit-linear-gradient(top,#ffffff,#dedede);background:linear-gradient(to bottom,#ffffff,#dedede);-webkit-animation:orbloop 6s linear infinite;animation:orbloop 6s linear infinite}
#bg .row2 div{-webkit-animation:orbmove 24s linear infinite;animation:orbmove 48s linear infinite}
#bg .row2 .orb1{position:absolute;width:200px;height:200px;top:50%;left:50%;margin-left:-500px;margin-top:-300px}
#bg .row2 .orb1 div{width:100%;height:100%;border-radius:200px;background:-webkit-linear-gradient(top,#ffffff,#dedede);background:linear-gradient(to bottom,#ffffff,#dedede);-webkit-animation:orbloop 6s linear infinite;animation:orbloop 6s linear infinite}
#bg .row2 .orb2{position:absolute;width:250px;height:250px;top:50%;left:50%;margin-left:175px;margin-top:-125px}
#bg .row2 .orb2 div{width:100%;height:100%;border-radius:250px;background:-webkit-linear-gradient(top,#ffffff,#dedede);background:linear-gradient(to bottom,#ffffff,#dedede);-webkit-animation:orbloop 6s linear infinite;animation:orbloop 6s linear infinite}
#bg .row2 .orb1c{position:absolute;width:200px;height:200px;top:50%;left:50%;margin-left:1500px;margin-top:-300px}
#bg .row2 .orb1c div{width:100%;height:100%;border-radius:200px;background:-webkit-linear-gradient(top,#ffffff,#dedede);background:linear-gradient(to bottom,#ffffff,#dedede);-webkit-animation:orbloop 6s linear infinite;animation:orbloop 6s linear infinite}
#bg .row2 .orb2c{position:absolute;width:400px;height:400px;top:50%;left:50%;margin-left:2100px;margin-top:-200px}
#bg .row2 .orb2c div{width:100%;height:100%;border-radius:400px;background:-webkit-linear-gradient(top,#ffffff,#dedede);background:linear-gradient(to bottom,#ffffff,#dedede);-webkit-animation:orbloop 6s linear infinite;animation:orbloop 6s linear infinite}
#bg .row3 div{-webkit-animation:orbmove 12s linear infinite;animation:orbmove 24s linear infinite}
#bg .row3 .orb1{position:absolute;width:300px;height:300px;top:50%;left:50%;margin-left:850px;margin-top:-300px}
#bg .row3 .orb1 div{width:100%;height:100%;border-radius:300px;background:-webkit-linear-gradient(top,#dedede,#ffffff);background:linear-gradient(to bottom,#dedede,#ffffff);-webkit-animation:orbloop 6s linear infinite;animation:orbloop 6s linear infinite}
#bg .row3 .orb2{position:absolute;width:600px;height:600px;top:50%;left:50%;margin-left:0px;margin-top:0px}
#bg .row3 .orb2 div{width:100%;height:100%;border-radius:600px;background:-webkit-linear-gradient(top,#dedede,#ffffff);background:linear-gradient(to bottom,#dedede,#ffffff);-webkit-animation:orbloop 6s linear infinite;animation:orbloop 6s linear infinite}
#bg .row3 .orb1c{position:absolute;width:300px;height:300px;top:50%;left:50%;margin-left:2850px;margin-top:-300px}
#bg .row3 .orb1c div{width:100%;height:100%;border-radius:300px;background:-webkit-linear-gradient(top,#dedede,#ffffff);background:linear-gradient(to bottom,#dedede,#ffffff);-webkit-animation:orbloop 6s linear infinite;animation:orbloop 6s linear infinite}
#bg .row3 .orb2c{position:absolute;width:600px;height:600px;top:50%;left:50%;margin-left:2000px;margin-top:0px}
#bg .row3 .orb2c div{width:100%;height:100%;border-radius:600px;background:-webkit-linear-gradient(top,#dedede,#ffffff);background:linear-gradient(to bottom,#dedede,#ffffff);-webkit-animation:orbloop 6s linear infinite;animation:orbloop 6s linear infinite}
@media (max-width:600px){
  .passport,.message{width:95%;margin:-160px 0 0 -47.5%}
  .passport h3,.message p{font-size:16px;font-weight:500}
  .message p{margin:8px 0 14px}
  .message p i{font-size:16px;margin:0px 6px 0 0}
  .passport form{width:90%}
  .passport form .text{width:100%;float:none}
  .passport form .btn{width:100%;border-radius:6px;top:60px}
  .passport p{margin-top:80px}
	}
</style>
</head>
<body class="msgbg">
<div class="message">
  <h3>温馨提示</h3>
  <p><i class="fa fa-exclamation-triangle"></i><?=$error?></p>
  <a href="javascript:history.go(-1)">点击返回上一页</a>
</div>
  <div class="pb1"></div>
  <div class="pb2"></div>
  <div class="pb3"></div>
<div id="stage">
<div id="bg" class="" style="transform: translateX(-200px) translateY(300px) rotateZ(-60deg); opacity: 1; z-index:-1;">
    <div class="row1">
        <div class="orb1"><div></div></div>
        <div class="orb2"><div></div></div>
        <div class="orb1c"><div></div></div>
        <div class="orb2c"><div></div></div>
    </div>
    <div class="row2">
        <div class="orb1"><div></div></div>
        <div class="orb2"><div></div></div>
        <div class="orb1c"><div></div></div>
        <div class="orb2c"><div></div></div>
    </div>
    <div class="row3">
        <div class="orb1"><div></div></div>
        <div class="orb2"><div></div></div>
        <div class="orb1c"><div></div></div>
        <div class="orb2c"><div></div></div>
    </div>
    <div class="row1c">
        <div class="orb1"><div></div></div>
        <div class="orb2"><div></div></div>
        <div class="orb1c"><div></div></div>
        <div class="orb2c"><div></div></div>
    </div>
    <div class="row2c">
        <div class="orb1"><div></div></div>
        <div class="orb2"><div></div></div>
        <div class="orb1c"><div></div></div>
        <div class="orb2c"><div></div></div>
    </div>
    <div class="row3c">
        <div class="orb1"><div></div></div>
        <div class="orb2"><div></div></div>
        <div class="orb1c"><div></div></div>
        <div class="orb2c"><div></div></div>
    </div>
</div>
</div>
</body>
</html>

稍微注意一下,搜索页面或者提示页面是新打开的标签页面,自动返回上一页或者点击转跳是其作用的,并不是代码问题。如果你是新打开页面,最好把<?=$gotourl?>替换成你想转跳的页面,是在原来页面转跳打开的可以忽视这个问题,本站就是原页面打开,可以试着搜索看看哦,

文章来源: 搜其一
本文地址: https://www.soqiy.com/ecms/1696.html
声明:本文收集转载自互联网,版权归原作者所有,转载目的在于传递更多的信息,并不代表本网站的观点和立场。如发现本站文章存在内容、版权或其它问题,烦请联系Email:xuxlc@qq.com ,我们将及时删除。
上一篇
下一篇

为您推荐

联系我们

联系我们

在线咨询: QQ交谈

邮箱: xuxlc@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们