CSS实现图书目录页效果 - 共享世纪

热门源码 | 热门软件 | 高级搜索 | 网站地图 | 文章·软件投稿

本站推荐：共享世纪推荐的2010·互联网建站品牌CMS

Windows/Linux高性能主机
2G 155元，3G 198元，5G 300元，欢迎联系本站站长选购！

CSS实现图书目录页效果

脚本类别：页面布局　添加时间：2010-01-01　查看次数：　作者：

脚本代码

<style type="text/css">
#sh{width:500px;position:absolute;left:50%;margin-left:-250px;top:10px;}
ul{width:500px;list-style:none;padding:0;margin:0;}
li{position:relative;border-bottom: dotted 2px #999;padding:0 0 5px 0;}
strong{position:absolute;left:0;bottom:-0.3em;background:#fff;padding-right:10px;}
em{position:absolute;right:0;bottom:-0.3em;background:#fff;padding-left:10px;}
/* clearfix */
.menu li:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.menu li {display: inline-block;}
/* Hides from IE-mac \*/
* html .menu li {height: 1%;}
.menu li {display: block;}
/* End hide from IE-mac */

</style>
</head>
<body>
<div id="sh">
<ul class="menu">
	<li><strong>xiaozhan</strong><em>1</em></li>
	<li><strong>xiaoxing</strong><em>2</em></li>
	<li><strong>xiaohu</strong><em>3</em></li>
	<li><strong>lixiaolong</strong><em>4</em></li>
	<li><strong>xiaozhan</strong><em>1</em></li>
	<li><strong>xiaoxing</strong><em>2</em></li>
	<li><strong>xiaohu</strong><em>3</em></li>
	<li><strong>lixiaolong</strong><em>4</em></li>
	
</ul>
from:<a href="http://www.webdesignerwall.com/tutorials/css-menu-list-design/">webdesignerwall.com</a>
</div>

loading...

当前页面所处路径为共享世纪 / 脚本特效 / 页面布局 / ，本特效的Tag为：共享世纪

CSS实现图书目录页效果，主要使用border-bottom,position,background属性综合来实现的。

Copyright·2006-2011 共享世纪 All Rights Reserved. Powered by lennyash，QQ联系站长
西公网监备:XA10870S - 陕ICP备08103724号 - （高级站长群:22181808，入门站长群:120111523）
共享世纪，已通过W3C组织XHTML/CSS 2.1! WEB标准校验！鸣谢：59互联带宽赞助 -