CSS仿360体验版左侧导航菜单


<!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" />
<title>建站学css教程</title>
<style>
ul{ list-style:none; padding:0; margin:0;}
a{ color:#0066CC; text-decoration:none}
#sidenav { width:230px; border:1px  solid #ccc;}
#sidenav li { height:25px; line-height:25px; border-bottom:1px dashed #ddd; font-size:14px; padding:0 5px; color:#6699FF; background:URL(static/image/common/folder_common.gif) no-repeat 5px center; padding-left:30px;}
#sidenav li span{ float:right; font-size:12px;}
#sidenav li span a{ color:#999999}
</style>
</head>
<body>
<ul id="sidenav">
<li><span><a href="#">火车时刻表</a></span><a href="http://www.zjxue.com">建站学CSS</a></li>
<li><span><a href="#">火车时刻表</a></span><a href="#">菜单</a> | <a href="http://www.zjxue.com">CSSBBS</a></li>
<li><span><a href="#">火车时刻表</a></span><a href="http://www.zjxue.com">建站学</a> | <a href="#">菜单</a></li>
<li><span><a href="#">火车时刻表</a></span><a href="#">菜单</a></li>
<li><span><a href="#">火车时刻表</a></span><a href="#">菜单</a></li>
<li><span><a href="#">火车时刻表</a></span><a href="#">菜单</a></li>
</ul>
</body>
</html>
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3