CSS实例(五)：简洁的栏目实现方式

最新推荐文章于 2021-06-18 17:26:34 发布

iteye_19603

最新推荐文章于 2021-06-18 17:26:34 发布

阅读量237

点赞数 1

文章标签： xhtml javascript ViewUI

今天花了点儿时间，琢磨了一下如何简洁的实现网页上常用的栏目。就是下面的这种东西，我称之为栏目，不知道别人叫它什么：

　　以下是我的HTML文件及CSS文件，可以便捷地进行样式切换。如果谁有更简洁的方式，请留言指教。

　　 HTML文件：

Html代码

<?xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>Inserttitlehere</title>
<linkhref="column.css"style="text/css"rel="stylesheet"/>
<scripttype="text/javascript">
vargIndex=1;
functiondoSwitch(){
vare=document.getElementById('info');
/*下面的变量是e，代码高亮好像有个BUG，阅读请注意。*/
ee.className=e.className.split('')[0]+'s'+(gIndex%3+1);
gIndex++;
}
</script>
</head>
<body>
<ulclass="columns1"id="info">
<liclass="title"><div>信息公示</div></li>
<li><ahref="#">CSS</a></li>
<li><ahref="http://wallimn.iteye.com">http://wallimn.iteye.com</a></li>
<li><ahref="#">很长文本自动截断，一切皆有可能，一切皆有可能，一切皆有可能，一切皆有可能</a></li>
<liclass="tail"><ahref="#">更多...</a></li>
</ul>
<br/>
<inputtype="button"value="样式切换"onclick="doSwitch()"/>
</body>
</html>

　　 CSS文件：

Html代码

　　 用到的图片：

iteye_19603

关注