日期:2013-10-13 浏览次数:21317 次
上次蓝色理想论坛更改程序的时候打算将程序标准化的,找到了我,我也很想帮忙实现了,可是听说Discuz!论坛实现标准化太难了,就这样搁着了,昨天看到feng4ever姐姐在标准化版问“蓝色理想的导航怎样用标准??”,估量还是想挑战难度,这个部分的代码不完全属于论坛程序,应该容易改动,昨天晚上没有时间,今天早上把它完成了,还没有完全处理问题,浏览器兼容问题还存在问题,找不出什么缘由,就是li的下级元素的百分比宽度计算ie和支持标准的不同,ie认为100%是li的宽度,而别的认为是设定绝对定位的元素的宽度,其实后者的正确的,可悲的ie总是气人阿。代码在下面运转你可以运转看看效果,要是更好的办法请留言在此,大家讨论讨论。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Blueidea forum navigation</title>
<style type="text/css">
*{ margin:0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:150%; list-style:none;}
body{ text-align:center;background:#212C23; overflow:hidden;}a{ text-decoration:none; color:#fff;}
a:hover{ text-decoration:underline;}#menu{ width:95%; background:#212C23; margin:30px auto; position:relative;}
ul#mainnav{ list-style:none; float:right;}
ul#mainnav li{ float:left; text-align:center; width:80px; border-right:1px #333 solid;border-top:1px #333 solid; background:#3C4844;}
ul#mainnav li.now{ background:#88BD6F; overflow:auto;_height:1%; color:#fff;border-right:0;}
ul#mainnav li.now .subnav{display:block;position:absolute;top:20px;right:0;width:1170%;overflow:auto;_height:1%;border:1px #3f0 solid;background-color:#88BD6F; padding:3px;}
* html ul#mainnav li.now .subnav{ top:21px;}
html>body ul#mainnav li.now .subnav{ width:100%;}
ul#mainnav li .subnav ul{background:#88BD6F; }
ul#mainnav li.now .subnav ul.user-tool{ width:70%; float:left; text-align:left;}
ul#mainnav li.now .subnav ul.all-tool{ width:30%; float:right; text-align:right;}
ul#mainnav li.now .subnav ul.user-tool li{ float:none; display:inline;background:#88BD6F; border:0; color:#fff;}
ul#mainnav li.now .subnav ul.all-tool li{ float:none; display:inline;background:#88BD6F; border:0;}
</style>
</head><body>
<div id="menu">
<ul id="mainnav">
<li><a href=http://www.blueidea.com/news/ class=navLink>业界动态</a></li>
<li><a href=http://www.blueidea.com/tech/ class=navLink>技术文档</a></li><li><a href=http://www.blueidea.com/design/ class=navLink>艺术设计</a></li>
<li><a href=http://www.blueidea.com/photo/ class=navLink>摄影摄像</a></li>
<li><a href=http://www.blueidea.com/computer/ class=navLink>计算机技术</a></li>
<li><a href=http://www.blueidea.com/download/ class=navLink>资源下载</a></li>
<li><a href=http://www.blueidea.com/column/ class=navLink>团体专栏</a></li>
<li><a href=http://www.blueidea.com/cg/ class=navLink>CG绘画</a></li><li><a href=http://www.blueidea.com/special/ class=navLink>专题</a></li>
<li class="now"><a href="index.php">经典论坛</a>
<span class="subnav">
<ul class="user-tool">
<li>您好,<b>greengnn</b></li>
<li><a href="logging.php?action=logout">[退出]</a></li><li><a href="pm.php" target="_blank">短音讯</a></li>
<li><a href="search.php?srchuid=128197&mytopics=yes&searchsubmit=yes">我的话题</a></li>
<li><a href="memcp.php">控制面板</a></li>
<li><a href="admincp