调整网站主页两框中内容 css dedecms

环境：win7 apmserv5.2.6 dedecms5.7sp1 GBK版本

 

问题是这样的：

想把,

调整为：

   在index.htm中找到关于这两个框的代码，代码如下：

         <div class="tabBox">

                            <div class="hd">

                                     <ul>

                                               <li class="on"><a href="#">学术方向</a></li>

                                               <li><a href="#">科研成果</a></li>

                                               <li><a href="#">资料共享</a></li>

                                     </ul>

                                     <!-- a class="more" href="#">更多+</a--> </div>

                            <div class="bd">

                                     <div class="pan">

                                               <ul class="list_news">

                                                        {dede:arclist titlelen='60' typeid='18' row='6'}

                             <li>

                                  <a href="[field:arcurl/]">[field:title /]</p></a>

                              </li>

                                                        {/dede:arclist}

                                               </ul>

                                     </div>

                                     <div class="pan" style="display:none">

                                               <ul class="list_news">

                                                        {dede:arclist titlelen='60' typeid='7' row='6'}

                             <li>

                                  <a href="[field:arcurl/]">[field:title /]</p></a>

                              </li>

                                                        {/dede:arclist}

                                               </ul>

                                     </div>

                                     <div class="pan" style="display:none">

                                               <ul class="list_news">

                                                        {dede:arclist titlelen='60' typeid='1' row='6'}

                             <li>

                                  <a href="[field:arcurl/]">[field:title /]</p></a>

                              </li>

                                                        {/dede:arclist}

                                               </ul>

                                     </div>

                            </div>

                   </div>

                   <div class="center_col">

                            <div class="hd">

                                     <h3 class="ttl"><span>新闻动态</span></h3>

                                     <a class="more" href="#" style="visibility:hidden">更多+</a> </div>

                            <div class="bd">

                                     <ul class="list_news">

                                               {dede:arclist titlelen='60' typeid='30' row='6'}

                    <li>

                         <a href="[field:arcurl/]">[field:title /]</p></a>

                     </li>

                                               {/dede:arclist}

                                     </ul>

                            </div>

                   </div>

大致想法是这样的，只要把{dede:arclist titlelen='60' typeid='30' row='6'}中的typeid互相调换，再删除资料共享和学术方向的内容，把科研成果名称修改为最新成果。修改后代码如下：

<div class="tabBox">

                            <div class="hd">

                                     <ul>

                                               <li class="on"><a href="#">新闻动态</a></li>

                                              

                                     </ul>

                                     <!-- a class="more" href="#">更多+</a--> </div>

                            <div class="bd">

                                     <div class="pan">

                                               <ul class="list_news">

                                                        {dede:arclist titlelen='60' typeid='30' row='6'}

                             <li>

                                  <a href="[field:arcurl/]">[field:title /]</p></a>

                              </li>

                                                        {/dede:arclist}

                                               </ul>

                                     </div>

                                    

                                    

                            </div>

                   </div>

                   <div class="center_col">

                            <div class="hd">

                                     <h3 class="ttl"><span>最新成果</span></h3>

                                     <a class="more" href="#" style="visibility:hidden">更多+</a> </div>

                            <div class="bd">

                                     <ul class="list_news">

                                               {dede:arclist titlelen='60' typeid='7' row='6'}

                    <li>

                         <a href="[field:arcurl/]">[field:title /]</p></a>

                     </li>

                                               {/dede:arclist}

                                     </ul>

                            </div>

                   </div>

更新主页，效果图如下：

还想把边框去除，还有就是“新闻动态”文字下的背景色和旁边的颜色也不怎么相同。看来还得到index.css中去修改样式。

在index.css中搜索“tabBox”得到如下一段代码：

.tabBox { float:left; width:384px; padding:1px 1px 0; border:1px solid #CCC; }
.tabBox .hd, .center_col .hd { position:relative; height:33px; background:url(../images/ttl_bg.jpg) repeat-x left top; z-index:1; line-height:33px; }
.tabBox .hd .more, .center_col .hd .more { position:absolute; right:10px; top:0; color:#333; text-decoration:none;

.tabBox .hd li { float:left; width:88px; font-size:14px; text-align:center; border-right:1px solid #CCC; }
.tabBox .hd li a { color:#333; text-decoration:none; }

.tabBox .hd li.on { width:108px; background-color:#FFF; font-weight:bolder; }

.tabBox .hd li.on a { padding-left:20px; background:url(../images/ttl_icon.gif) no-repeat left center; }
.tabBox .bd, .center_col .bd { padding:10px 15px; }
.list_news li { height:22px; overflow:hidden; padding-left:10px; background:url(../images/dot.gif) no-repeat left center; line-height:22px; }
.list_news li a { color:#4b4b4b; text-decoration:none; }
/**/
.center_col { float:left; width:214px; float:left; padding:1px 1px 0; border:1px solid #CCC; margin-left:16px; }

 

 

 

<div class="tabBox">

<div class="hd">

<ul>

<li class="on"><a href="#">新闻动态</a></li>

 

从上面i这些代码，我就推断.tabBox .hd li 控制的是显示“新闻动态”那个框的样式（长度啊，显示字体是否居中啊，什么的），所以把控制边框的“border-right:1px”去掉，.tabBox .hd li.on控制的是“新闻动态”这个个文本的样式（背景啊，字体加粗啊，什么的），所以把控制背景的“background-color:#FFF”去掉。去掉后更新主页，成功！