-
您的位置:首页 → 网页设计 → DreamWeaver → CSS优雅的公布栏源码
CSS优雅的公布栏源码
时间:2009/12/18 9:59:00来源:本站整理作者:我要评论(0)
-
今天花了点儿时间,琢磨了一下如何简洁的实现网页上常用的栏目。就是下面的这种东西,我称之为栏目,不知道别人叫它什么:
以下是我的HTML文件及CSS文件,可以便捷地进行样式切换。如果谁有更简洁的方式,请留言指教。
HTML文件:
- <?xml version="1.0" encoding="UTF-8" ?>
- <!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=UTF-8" />
- <title>Insert title here</title>
- <link href="column.css" style="text/css" rel="stylesheet"/>
- <script type="text/javascript">
- var gIndex = 1;
- function doSwitch(){
- var e = document.getElementById('info');
- ee.className = e.className.split(' ')[0]+' s'+(gIndex%3+1);
- gIndex++;
- }
- </script>
- </head>
- <body>
- <ul class="column s1" id="info">
- <li class="title"><div>信息公示</div></li>
- <li><a href="#">隔壁老王</a></li>
- <li><a href="http://wallimn.javaeye.com">http://wallimn.javaeye.com</a></li>
- <li><a href="#">很长文本自动截断,一切皆有可能,一切皆有可能,一切皆有可能,一切皆有可能</a></li>
- <li class="tail"><a href="#">更多...</a></li>
- </ul>
- <br/>
- <input type="button" value="样式切换" onclick="doSwitch()" />
- </body>
- </html>
<?xml version="1.0" encoding="UTF-8" ?>
<!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=UTF-8" />
<title>Insert title here</title>
<link href="column.css" style="text/css" rel="stylesheet"/>
<script type="text/javascript">
var gIndex = 1;
function doSwitch(){
var e = document.getElementById('info');
e.className = e.className.split(' ')[0]+' s'+(gIndex%3+1);
gIndex++;
}
</script>
</head>
<body>
<ul class="column s1" id="info">
<li class="title"><div>信息公示</div></li>
<li><a href="#">隔壁老王</a></li>
<li><a href="http://wallimn.javaeye.com">http://wallimn.javaeye.com</a></li>
<li><a href="#">很长文本自动截断,一切皆有可能,一切皆有可能,一切皆有可能,一切皆有可能</a></li>
<li class="tail"><a href="#">更多...</a></li>
</ul>
<br/>
<input type="button" value="样式切换" onclick="doSwitch()" />
</body>
</html>
CSS文件:
- ul.column{
- padding:0;
- margin:0;
- font:normal 12px "宋体";
- border:1px solid #000;
- }
- ul.column li{
- height:26px;
- line-height:26px;
- margin:0 4px;
- border-bottom:1px dashed #ccc;
- vertical-align:middle;
- padding-left:24px;
- white-space:nowrap;
- text-overflow:ellipsis;
- overflow:hidden;
- }
- ul.column li,ul.column li.title div{
- background:url("column.gif") no-repeat;
- }
- ul.column li a{
- text-decoration:none;
- }
- ul.column li a:hover{
- color:red;
- }
- ul.column li.title,ul.column li.tail{
- border-width:0;
- }
- ul.column li.title{
- background-repeat:repeat-x;
- margin:0;
- padding:0;
- }
- ul.column li.tail{
- text-align:right;
- padding-right:12px;
- background-image:none;
- }
-
- /*1*/
- ul.s1{
- width:300px;
- }
- ul.s1,ul.s1 li{
- border-color:#2e9803;
- }
- ul.s1 li{
- background-position: 0 -52px;
- }
- ul.s1 li.title{
- background-position: 0 -26px;
- }
- ul.s1 li.title div{
- background-position: 0 0;
- padding-left:24px;
- }
- /*2*/
- ul.s2{
- width:300px;
- }
- ul.s2,ul.s2 li{
- border-color:#9438d4;
- }
- ul.s2 li{
- background-position: 0 -130px;
- }
- ul.s2 li.title{
- background-position: 0 -104px;
- }
- ul.s2 li.title div{
- background-position: 0 -78px;
- padding-left:24px;
- }
- /*3*/
- ul.s3{
- width:300px;
- }
- ul.s3,ul.s3 li{
- border-color:#9bb8d2;
- }
- ul.s3 li{
- background-position: 0 -208px;
- }
- ul.s3 li.title{
- background-position: 0 -182px;
- }
- ul.s3 li.title div{
- background-position: 0 -156px;
- padding-left:24px;
- }
相关阅读
个性化jQuery和CSS3菜单源码CSS实现Tab技巧CSS复位-CSS Reset代码举例IE6绝对定位的bug及其解决办法CSS样式表创建美妙绝伦的网站几个最常用和实用的CSS技巧将网站(主页)变成黑白DW设计网页时组织CSS的建议
-
热门文章
没有查询到任何记录。
最新文章
CSS优雅的公布栏源码高级CSS选择器的使用
将网站(主页)变成黑白DW设计网页时组织CSS的建议利用Dreamweaver合理优化网页元素布局22个Dreamweaver内置网页过渡特效简介
人气排行
如何用Dreamweaver制作电子相册下拉菜单全攻略-用Dreamweaver制作下拉菜单用Dreamweaver实现ASP数据库动态网站建设用Dreamweaver CS3制作下拉菜单如何在DW中插入Flash的参数详解Dreamweaver标签选择器的妙用巧用dreamweaver模板批量制作网页优化HTML代码加快网页速度
查看所有0条评论>>