简单实用的新闻模块常用效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<meta name="copyright" content="" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<title></title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ background:#fff;}
.btn{ margin:10px 0;}
#wrapper{ clear:both; width:100%; height:100%; background:#fff;}
.btn a{ float:left; width:10px; height:10px; margin-right:4px; border:1px solid #000; overflow:hidden;}
.btn a.red{ background:#f00;}
.btn a.blue{ background:blue;}
.btn a.white{ background:#fff;}
.btn a:hover{ border:none; width:12px; height:12px;}
li{ list-style-type:none; margin:10px 0; border-bottom:1px dotted}
li.last{ border:none;}
ul{ padding:15px;}
</style>
<script language="javascript">
function $(str){ return document.getElementById(str);}
function ss(obj,color){
$(obj).style.backgroundColor=color;
}
function change(){
var obj=$("u").getElementsByTagName("p");
for(var i=0;i<obj.length;i++){
//注意这里if条件语句的顺序，一定要这样写，有兴趣的朋友可以把if和else条件互换试试
if(obj[i].style.display=="none"){
obj[i].style.display="block";
$("btn_change").firstChild.nodeValue="精简模式";
}
else{
obj[i].style.display="none";
$("btn_change").firstChild.nodeValue="预览模式";
}
}
}
</script>
</head>
<body>
<div class="btn">
<a class="red" href="javascript://" onclick="ss('u','#f00');"></a>
<a class="blue" href="javascript://" onclick="ss('u','blue');"></a>
<a class="white" href="javascript://" onclick="ss('u','#fff');"></a>
</div>
<a id="btn_change" href="#" onclick="change();">精简模式</a>
<ul id="u">
<li>
<a href="#">dddddddddddd</a><p>热恋中的情侣、新婚夫妇总能想出许多办法来使双方的性爱生活得到更新与发展。然而，随着时间推移，久而久之，由于种种原因，人们或许就懒得努力去促使性爱生活充满新鲜活力了。 结果当然要付出代价，双方过着...</p>
</li>
<li>
<a href="#">dddddddddddd</a><p>坚决不娶性感女人 狐狸 30岁 市场营销 我坚决不娶性感女人，原因很简单，我有轻微的“心脏病”，而性感女人带来的灾难会使心脏担上不能承受之重。 在此事上我有发言权，前几年，我鬼迷...</p>
</li>
<li>
<a href="#">dddddddddddd</a><p>婚姻问题是中国人讨论最多的话题之一，人们都渴望婚姻生活幸福而美满，成家与立业成为人生中极为重要的两件事。而越来越多的家庭无法用幸福、不幸福来衡量，而是一种介于两者之间的“灰色地带”—亚婚姻状...</p>
</li>
<li>
<a href="#">dddddddddddd</a><p>工作会越来越忙，房子会越来越贵,孩子会越来越少，她的爸妈越来越老，我们结婚需不需要和他们住在一道？独生子女纷纷长大成人的年代，是不是宣告着“新倒插门女婿”时代的到来？ 马西利(男) 31岁 ...</p>
</li>
<li>
<a href="#">dddddddddddd</a><p>一提到婚前准备，人们立刻会想到新房、新衣、家具、彩电和冰箱等物品。这些东西都有了，就说是准备齐全了。其实，这仅仅说对了一半儿。因为，结婚不仅要做必要的物质准备，还包括比物质准备更为重...</p>
</li>
<li class="last">
<a href="#">男人的婚前婚后心理</a><p>首先想警告女性一点，那就是，无论是怎样的浪漫，怎样的有才华，怎样出众，怎样温柔怎样体贴人照顾人，总之无论怎样满意的男性，在结婚后不久，如果你仍用原来的标准去衡量他，你都会失望</p>
</li>
</ul>
</body>
</html>
原文网址：http://xxrblog.cn/article.asp?id=417
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<meta name="copyright" content="" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<title></title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ background:#fff;}
.btn{ margin:10px 0;}
#wrapper{ clear:both; width:100%; height:100%; background:#fff;}
.btn a{ float:left; width:10px; height:10px; margin-right:4px; border:1px solid #000; overflow:hidden;}
.btn a.red{ background:#f00;}
.btn a.blue{ background:blue;}
.btn a.white{ background:#fff;}
.btn a:hover{ border:none; width:12px; height:12px;}
li{ list-style-type:none; margin:10px 0; border-bottom:1px dotted}
li.last{ border:none;}
ul{ padding:15px;}
</style>
<script language="javascript">
function $(str){ return document.getElementById(str);}
function ss(obj,color){
$(obj).style.backgroundColor=color;
}
function change(){
var obj=$("u").getElementsByTagName("p");
for(var i=0;i<obj.length;i++){
//注意这里if条件语句的顺序，一定要这样写，有兴趣的朋友可以把if和else条件互换试试
if(obj[i].style.display=="none"){
obj[i].style.display="block";
$("btn_change").firstChild.nodeValue="精简模式";
}
else{
obj[i].style.display="none";
$("btn_change").firstChild.nodeValue="预览模式";
}
}
}
</script>
</head>
<body>
<div class="btn">
<a class="red" href="javascript://" onclick="ss('u','#f00');"></a>
<a class="blue" href="javascript://" onclick="ss('u','blue');"></a>
<a class="white" href="javascript://" onclick="ss('u','#fff');"></a>
</div>
<a id="btn_change" href="#" onclick="change();">精简模式</a>
<ul id="u">
<li>
<a href="#">dddddddddddd</a><p>热恋中的情侣、新婚夫妇总能想出许多办法来使双方的性爱生活得到更新与发展。然而，随着时间推移，久而久之，由于种种原因，人们或许就懒得努力去促使性爱生活充满新鲜活力了。 结果当然要付出代价，双方过着...</p>
</li>
<li>
<a href="#">dddddddddddd</a><p>坚决不娶性感女人 狐狸 30岁 市场营销 我坚决不娶性感女人，原因很简单，我有轻微的“心脏病”，而性感女人带来的灾难会使心脏担上不能承受之重。 在此事上我有发言权，前几年，我鬼迷...</p>
</li>
<li>
<a href="#">dddddddddddd</a><p>婚姻问题是中国人讨论最多的话题之一，人们都渴望婚姻生活幸福而美满，成家与立业成为人生中极为重要的两件事。而越来越多的家庭无法用幸福、不幸福来衡量，而是一种介于两者之间的“灰色地带”—亚婚姻状...</p>
</li>
<li>
<a href="#">dddddddddddd</a><p>工作会越来越忙，房子会越来越贵,孩子会越来越少，她的爸妈越来越老，我们结婚需不需要和他们住在一道？独生子女纷纷长大成人的年代，是不是宣告着“新倒插门女婿”时代的到来？ 马西利(男) 31岁 ...</p>
</li>
<li>
<a href="#">dddddddddddd</a><p>一提到婚前准备，人们立刻会想到新房、新衣、家具、彩电和冰箱等物品。这些东西都有了，就说是准备齐全了。其实，这仅仅说对了一半儿。因为，结婚不仅要做必要的物质准备，还包括比物质准备更为重...</p>
</li>
<li class="last">
<a href="#">男人的婚前婚后心理</a><p>首先想警告女性一点，那就是，无论是怎样的浪漫，怎样的有才华，怎样出众，怎样温柔怎样体贴人照顾人，总之无论怎样满意的男性，在结婚后不久，如果你仍用原来的标准去衡量他，你都会失望</p>
</li>
</ul>
</body>
</html>
原文网址：http://xxrblog.cn/article.asp?id=417
