DedeCMS搜索模块的样式讲解

 

一、自定义样式实现自己的效果

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="在这里搜索..." οnfοcus="if(this.value=='在这里搜索...'){this.value='';}"  οnblur="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>
		</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号就是我们在

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