51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
织梦DEDECMS
当前位置:首页>实用代码>织梦DEDECMS>

DedeCMS搜索模块的样式讲解

时间:2017-08-10 09:44点击:
一、自定义样式实现自己的效果
1、需求说明

如下图所示,想将左边的搜索模块搬到右边的红框里。

2、解决方法
(1)第一次修改

在dedecms.css中添加样式(注意别在search.css里增加,不然找不到):


    /*chenyujing*/  
    .w960 .search{  
        padding-left:10px;  
        height:31px;  
        line-height:32px;  
    }  
    /*chenyujing*/  
    .w960 .form h4{  
        display:none;  
    }  
      
      
    /*chenyujing*/  
    .w960 .form {  
        float:right;  
        margin:0 10px 0 0;  
        *margin:0 10px 0 0;  
        _margin:5px 10px 0 0;  
    }  
然后在head.htm中的



    <div class="title">  
            <h1>  
                <a href='{dede:global.cfg_cmsurl/}/'><img src="{dede:global.cfg_templets_skin/}/images/logo.jpg" height="54"           width
="160" alt="{dede:global.cfg_webname/},HTC手机品牌专区"/>  
                </a>  
            </h1>  
            </div>  
下面增加搜索模块:



 <div class="search">  
            <form  name="formsearch" action="{dede:global.cfg_cmsurl/}/plus/search.php">  
                <div class="form">  
                  <h4>搜索</h4>  
                    <input type="hidden" name="kwtype" value="0" />  
                    <input name="q" type="text" class="search-keyword" id="search-keyword" value="在这里搜索..." onfocus="if(this.value=='在
这里搜索...'){this.value='';}"  onblur="if(this.value==''){this.value='在这里搜索...';}" />  
                    <select name="searchtype" class="search-option" id="search-option">  
                       <option value="title" selected='1'>检索标题</option>  
                       <option value="titlekeyword">智能模糊</option>  
                    </select>  
                    <button type="submit" class="search-submit">搜索</button>  
                </div>  
            </form>  
            </div>  

效果图:


(2)第二次修改

从上图可以看到在Log与栏目横栏间有很大的空格,这是因为原有模板中在<div class="title">模块下面还有两个div模块:


    <div class="banner"><script src='/plus/ad_js.php?aid=1' language='javascript'></script></div>  
            <div class="banner2"><script src='/plus/ad_js.php?aid=2' language='javascript'></script></div>  
看样子是做广告用的,且确实在plus文件夹下有ad_js.PHP的存在,把它去掉就可以了:


二、CSS控制原理分析
1、解决方法中用到的样式分析

在我的模板中的head.htm中有下面的代码,它的效果如下下图所示:

现在我们来分析“搜索”这个模块的CSS样式的得来:

(1)搜索模块的最近一层的样式是<div class="form">

在所有的.css文件中搜索到它有几处:

(1、1)表.w963样式控制下的.form样式中或有h4标签,那么是不显示的;

所以如果我们不是在.w963下,那么是会显示出来的。


    .w963 .form h4 {  
        display:none;  
    }  


(1、2)表.w963样式控制下的.form样式是向左靠的;


w963 .form {  
    float:left;  
    margin:0 10px 0 0;  
    *margin:0 10px 0 0;  
    _margin:5px 10px 0 0;  
}  
2)再上一层的样式是<div class="search">

在所有的.css文件中搜索到它有几处:

(2、1)表.w963样式控制下的.search样式左内边距的宽度是10px,行间的距离(行高)是31px;



    .w963 .search{  
        padding-left:10px;  
        height:31px;  
        line-height:32px;  
    }  
(2、2)



    .header .search {  
        overflow:hidden;  
    }  
(3)再上一层的样式是<div class="top">

在所有的.css文件中搜索到它有几处:

(3、1)

clear 属性规定元素的哪一侧不允许其他浮动元素,这里指两侧都不允许有其他浮动元素。

元素的上外边距为10px;



    .header .top{  
        clear:both;  
        overflow:hidden;  
        margin-top:10px;  
    }  
(3、2)

float 属性定义元素在哪个方向浮动,这里指元素在左边浮动,



    .module .top .t_l, .module .bottom .b_l {  
        float:left;  
        overflow:hidden;  
    }  
(3、3)



    .module .top strong {  
        cursor:pointer;  
        float:right;  
        font-weight:normal;  
        margin-right:4px;  
    }  
(3、4)



    /*------ 主色 -------*/  
    .blue .top {  
        background-position: 0 -72px;  
        background-repeat: repeat-x;  
        height: 70px;  
    }  
    .blue .top .t_l {  
        background-position: 0 0;  
        background-repeat: no-repeat;  
        height: 70px;  
        width: 5px;  
    }  
    .blue .top .t_r {  
        background-position: -6px 0;  
        background-repeat: no-repeat;  
        height: 70px;  
        width: 5px;  
    }  
(4)再上一层的样式是<div class="module blue mT10 wrapper w963">

一开始我以为这是一个名为"module blue mT10 wrapper w963"的样式,所以一直去查找都没有找到,后来大悟后才发现它是由5种样式组成的:

module、 blue、 mT10、 wrapper 、w963

在所有的.css文件中搜索到它有几处:

 2、广告ad_js.php在默认模板中的使用

2、1   在dedeCMS5.7安装自带的模板中的head区也加入了广告,不过它不是调用plus\ad_js.php:



    <div class="header">  
        <div class="top w960 center">  
          <div class="title">  
            <h1><a href="{dede:global.cfg_basehost/}"><img src="{dede:global.cfg_templets_skin/}/images/logo.gif" height="54" width="216" alt
="{dede:global.cfg_webname/}"/></a> </h1>  
          </div>  
          <div class="banner">{dede:myad name='innerTopBanner1'/}</div>  
          <div class="banner2">{dede:myad name='innerTopBanner2'/}</div>  
它产生的效果如下:


可以看到它是调用了dede标签 {dede:myad name='innerTopBanner1'/},如果我们要去掉它的广告就直接把两句屏蔽掉即可。

如果要使用把它替换成自己的广告,也是可以的,方法如下:

(1)登录后台->模块->广告管理->找到该广告(内容顶部导航大图-500*60)里正常显示内容中的广告代码修改为你的图片链接地址,修改完后生成一下页面。

2、2  ad_js.php的使用也出现在search.htm中


        </select>  
<button type="submit" class="search-submit">搜索</button>  
<a href="heightsearch.php">高级搜索</a>  
lt;/form>  
</div>     
<div id="searchTopBanner" style="float:right; margin:10px"><script src='{dede:global.cfg_cmsurl/}/plus/ad_js.php?aid=18' language='javascript'
></script> </div>  
它的调用方法与head.htm中调用广告的方法不一样,它是通过引用到plus文件夹下的ad_js.php文件,然后指定aid,其中aid=后面的id号就是我们在

 登录后台->模块->广告管理  中看到的编号


51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开