如何制作可控制顯示或隱藏的伸縮式DIV CSS新聞列表?_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
新聞列表是我們在頁面制作中最常用的元素之一,根據(jù)項目的需要我們要求對這個新聞列表可控,可以點擊顯示或隱藏。用DIV CSS該如何制作呢?
HTML元素有display屬性,當(dāng)display:none的時候,這個元素就不可見了。我們可以根據(jù)這一特性來構(gòu)思,而元素的具體控制我們可以通過javascript腳本來實現(xiàn)。
我們看下面的javascript腳本:
示例代碼 [m.dounai2.com]
var flag=true;
function showNews(){
var fimg=document.getElementById("btnOpen");
var obj=document.getElementById("newsList");
if(flag){
obj.style.display="none";
fimg.src="open2.gif";
flag=false;
}else{
obj.style.display="";
fimg.src="open1.gif";
flag=true;
}
}
function showNews(){
var fimg=document.getElementById("btnOpen");
var obj=document.getElementById("newsList");
if(flag){
obj.style.display="none";
fimg.src="open2.gif";
flag=false;
}else{
obj.style.display="";
fimg.src="open1.gif";
flag=true;
}
}
兩種狀態(tài),兩個圖片,在第一狀態(tài)中,我們設(shè)置了元素display:none。即隱藏了HTML元素。
我們看下面的CSS代碼和XHTML代碼:
示例代碼 [m.dounai2.com]
*{
margin:0;padding:0;
}
body{
background-color:#fff;font-size:12px;text-align:left;
}
#topNews{
width: 300px;
margin: 60px auto 0 auto;
text-align:left;
padding-bottom:10px;
background: #fff url(new_bottom.gif) bottom no-repeat;
}
#newsList {
width:100%;
height:100px;
list-style:none;
padding-top:5px;
background: #fff url(new_bg.gif) repeat-y;
}
#newsList li{
text-indent:16px;
font-size:12px;
line-height: 20px;
float: left;
width:280px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#topNews h1{
background: #fff url(new_top.gif) no-repeat;
height:33px;
font-size:12px;
}
#btnOpen{
margin-top:15px;
margin-left:12px;
display: inline;
cursor:pointer;
}
#topNews a{
padding-left:12px;
text-decoration: none;
color:#c00;
}
#topNews a:hover{
color:#f60;
text-decoration: underline;
}
margin:0;padding:0;
}
body{
background-color:#fff;font-size:12px;text-align:left;
}
#topNews{
width: 300px;
margin: 60px auto 0 auto;
text-align:left;
padding-bottom:10px;
background: #fff url(new_bottom.gif) bottom no-repeat;
}
#newsList {
width:100%;
height:100px;
list-style:none;
padding-top:5px;
background: #fff url(new_bg.gif) repeat-y;
}
#newsList li{
text-indent:16px;
font-size:12px;
line-height: 20px;
float: left;
width:280px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#topNews h1{
background: #fff url(new_top.gif) no-repeat;
height:33px;
font-size:12px;
}
#btnOpen{
margin-top:15px;
margin-left:12px;
display: inline;
cursor:pointer;
}
#topNews a{
padding-left:12px;
text-decoration: none;
color:#c00;
}
#topNews a:hover{
color:#f60;
text-decoration: underline;
}
示例代碼 [m.dounai2.com]
<div id="topNews">
<h1>
<img id="btnOpen" src="open1.gif" alt="|折疊|展開|" onclick="showNews()" />
<span>模板無憂 mb5u.com</span>
</h1>
<ul id="newsList">
<li><a href="http://m.dounai2.com/" title=""></a></li>
<li><a href="http://m.dounai2.com/" title=""></a></li>
<li><a href="http://m.dounai2.com/" title=""></a></li>
<li><a href="http://m.dounai2.com/" title=""></a></li>
<li><a href="http://m.dounai2.com/" title=""></a></li>
<li><a href="http://m.dounai2.com/" title=""></a></li>
</ul>
</div>
<h1>
<img id="btnOpen" src="open1.gif" alt="|折疊|展開|" onclick="showNews()" />
<span>模板無憂 mb5u.com</span>
</h1>
<ul id="newsList">
<li><a href="http://m.dounai2.com/" title=""></a></li>
<li><a href="http://m.dounai2.com/" title=""></a></li>
<li><a href="http://m.dounai2.com/" title=""></a></li>
<li><a href="http://m.dounai2.com/" title=""></a></li>
<li><a href="http://m.dounai2.com/" title=""></a></li>
<li><a href="http://m.dounai2.com/" title=""></a></li>
</ul>
</div>
請大家注重看兩個地方:
1、id="btnOpen" src="open1.gif" alt="|折疊|展開|" onclick="showNews()" 這是切換的“開關(guān)”,點擊觸發(fā)javascript事件。
2、ul id="newsList" 這是控制的內(nèi)容區(qū)域,應(yīng)用javascript控制其css的display屬性。當(dāng)正常顯示時,屬性值為空;我們需要隱藏時,其實屬性值為none。
我們看下面的最終運行效果:
代碼調(diào)試框 [m.dounai2.com]
[ 可先修改部分代碼 再運行查看效果 ]
在實際應(yīng)用時,我們可以將javascript寫到一個單獨的文件中,在xhtml文件中調(diào)用就可以了。CSS也同樣寫入外部文件,link調(diào)用即可。
對這個問題的解決,或許您有更好的辦法,歡迎您來mb5u.com發(fā)布。大家共同進(jìn)步。
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對聯(lián)廣告不隨屏幕滾動的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級元素和內(nèi)聯(lián)元素
- 5個你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計教程
- css中px和em有什么區(qū)別
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-如何制作可控制顯示或隱藏的伸縮式DIV CSS新聞列表?。