調整網站首頁兩框中內容 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”去掉。去掉後更新首頁，成功！