Emlog 搜索功能美化教程

发布日期:2019-03-29 20:31:00 作者:何以往事

  • 正文内容
  • 相关推荐

Emlog 自带的搜索功能界面是在有点....  这个是FLY模板里面的,拿出来分享一下

效果图:

搜索

方法:

1、打开 模板下的 module.php文件加入下面代码

<?PHP
//搜索:手机搜索标签
function search_tag ($ title ){
    全球$ CACHE ;
    $ tag_cache = $ CACHE - > readCache ('tags' );?>
        <?php shuffle ($ tag_cache );
		$ tag_cache = array_slice ($ tag_cache ,0 ,15 ); foreach ($ tag_cache as $ value ):?> 
			<LI 类= “搜索去” > <a href=" <? PHP回波BLOG_URL; ?> 标签/ <?PHP的回声$值[ '标记名' ]; ?> “> <?php echo $ value [ 'tagname' ]; ?> </a> </ li>    
        <?php endforeach ; ?> 
<?php }?>


2、打开模板公用CSS文件增加如下的CSS

。搜索- 表格。是- 可见{ display :block ;}
。搜索- 表格。是- 可见{ 动画:褪色- 中; 动画- 持续时间:。3S ; - WebKit的- 动画:褪色- 在。3s ;}  
。搜索- 表格{ position :fixed ; 顶部:0 ; 左:0 ; 右:0 ; 底部:0 ; background :#fff; -webkit-animation:fade-zoom-in .3s forwards; -o-animation:fade-zoom-in .3s forward; animation:fade-zoom-in .3s forward; display:none; z- index:9999; -webkit-backface-visibility:hidden; overflow:hidden;}      
。搜索- 表格。search - form - inner { max - width :640px ; 填充:0 20px ; 保证金:自动; 位置:绝对; 宽度:100 %; 左:0 ; 右:0 ; 身高:285px ; 上:- 100px ; 底部:0          ;}
。搜索- 表格。search - form - box { position :relative ; 保证金- 底部:40px ;} 
。search - forms input { background :#fff; display:inline-block; line-height:58px; height:58px; color:#949494; font-size:15px; border-radius:3px; padding:0 20px; width: 100%; border:1px solid#e2e2e2; text-align:left; -webkit-appearance:none;} 
。search - forms按钮{ background :#000; display:inline-block; line-height:58px; height:58px; width:100px; color:#fff; font-size:15px; padding:0 25px; margin:0; border-radius:0 3px 3px 0; position:absolute; right:0; top:0; border:0;} 
。搜索- 表格。search - form - box { position :relative ; 保证金- 底部:40px ;} 
。搜索- 表格。search - form - inner { max - width :640px ; 填充:0 20px ; 保证金:自动; 位置:绝对; 宽度:100 %; 左:0 ; 右:0 ; 身高:285px ; 上:- 100px ; 底部:0          ;}
。搜索- 表格。close - search { display :block ; 位置:绝对; 最高:3 %; 右:1 %; 宽度:50px ; 身高:50px ; 游标:指针; 背景:RGBA (255 ,255 ,255 ,0 );}    
。搜索- 推荐ul li a { display :inline - block ; 线- 高度:1 ; 填充:5px 5px ; border :1px solid #e2e2e2; border-radius:2px; color:#949494;}     
。search - commend ul li { display :inline - block ; 保证金- 底部:10px ; 保证金- 右:10px ;}   
。搜索- 推荐h4 { position :relative ; font - size :16px ; 保证金:0 0 20px ;}    
.close-search {display: block;position: absolute;top: 10%;right: 10%;width: 80px;height: 80px;cursor: pointer;background: rgba(255,255,255,0);}
。关闭- 底部,。close - top { position :absolute ; 左:14px ; 背景:#333;宽度:22px;高度:2px;过渡:.3s;}   
。关闭- 搜索。关闭- 底部,。关闭- 搜索。close - top { width :30px !重要的; 左:5px !重要的;}   
。关闭- 搜索。close - top { top :15px !重要的;} 
。close - top { top :19px ;} 
。关闭- 搜索。关闭- 底部,。关闭- 搜索。close - top { width :45px ; 左:16px ;}   
。关闭- 顶部{ - WebKit的- 变换:翻译(0 ,5像素)旋转(225deg ); 变换:翻译(0 ,5像素)旋转(225deg );}
。关闭- 搜索。close - top { top :34px ;} 
。搜索- 表格。close - search { display :block ; 位置:绝对; 最高:3 %; 右:1 %; 宽度:50px ; 身高:50px ; 游标:指针; 背景:RGBA (255 ,255 ,255 ,0 );}    
。close - bottom { - webkit - transform :translate (0 , - 5px )rotate (135deg ); transform :translate (0 , - 5px )rotate (135deg );}
。关闭- 搜索。close - bottom { bottom :24px !重要的;} 
3、打开 footer.php文件加入下面代码


<div class = “search-forms” > 
	<form method =“get”action =“ <?php echo BLOG_URL ;?> ”>
		<div class = “search-form-inner” > 
			<div class = “search-form-box” > 
				 <input class = “form-search” type = “text” name = “keyword” placeholder = “输入搜索关键词” >    
				 <button type = “submit” id = “btn-search” class = “search-go” > <i class = “fa fa-search” > </ i> </ button>     				 
			</ DIV>
			<div class = “search-commend” > 
				<H4> 大家都在搜</ H4>
				<UL>
					<?php search_tag ($ title ); ?> 
				</ UL>
			</ DIV>
		</ DIV>                
	</ FORM> 
	<div class = “close-search” > 
		<span class = “close-top” > </ span> 
		<span class = “close-bottom” > </ span> 
    </ DIV>
</ DIV>
5、把下面代码 添加到要显示的地方即可


<li> <a href = “javascript:;” class = “fly-search-s” > <span class = “fa fa-search” > </ span> 搜索</a> </ li>   


头像
描述: ღ 我愿用一世阳光换你的微笑 ღ

本文标签:

文章标题:Emlog 搜索功能美化教程

文章链接:https://www.dcqzz.cn/post/569

版权声明:若无特殊注明,本文皆为 何以往事 原创,转载请保留文章出处。

发表评论

电子邮件地址不会被公开。 必填项已用*标注