请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 蓝色理想的导航怎么用标准??

发新帖

查看: 4922|回复: 18

蓝色理想的导航怎么用标准?? [复制链接]

feng4ever　楼主

小可爱

帖子: 5262
体力: 14768
威望: 181

发表于 2006-7-18 15:31:44 |显示全部楼层

论坛的两个风格 - 默认/blue
现在都是table实现的,因为间隙必须和tab对齐,这样就形成了表格排版
如果特别的用div实现怎么办??

新风格table样式点击下面的地址察看
http://bbs.blueidea.com/?styleid=1&sid=EjU8s9

长期有外企UI/UE/WEB实习职位（深圳、上海）

西部数码顶级域名注册商39元抢注！

使用道具举报

酒酣几度

荣誉管理 

帖子: 1367
体力: 3521
威望: 127

发表于 2006-7-19 07:58:42 |显示全部楼层

类似下来菜单的制作就很容易实现,可是现在二级导航偏偏天各一边就很为难了,就是效果做出来也很难符合语义,结构也不够好!

我勉强做了一个，ie和其他浏览器用hack给达到视觉效果一致了，那些激活的链接效果使用背景图就可以实现。

<!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.php" target="_blank">系统设置</a></li>
</ul>
<ul class="all-tool">
<li><a href="search.php">搜索</a></li>
<li><a href="stats.php">统计</a></li>
<li><a href="faq.php">帮助</a></li>
</ul>
</span>
</li>
</ul>
<div style="clear:both;"
</div>
</body>
</html>

复制代码

<!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.php" target="_blank">系统设置</a></li>
			</ul>
			<ul class="all-tool">
				<li><a href="search.php">搜索</a></li>
				<li><a href="stats.php">统计</a></li>
				<li><a href="faq.php">帮助</a></li>
			</ul>
		</span>
	</li>
</ul>
<div style="clear:both;"
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

blog Web标准化交流会 WEB标准群：23783439

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

帖子: 82
体力: 454
威望: 1

发表于 2006-7-19 09:59:49 |显示全部楼层

IE 5.5+和Opera 9下测试正常

<!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>无标题文档</title>
<style type="text/css">

</style>
</head>

<body>
<div id="top">
<a href="http://www.blueidea.com"><img src="http://www.blueidea.com/images/logo.gif" id="logo"/></a>
<ul>
	<li><a href="http://www.blueidea.com/news/" >业界动态</a></li>
	<li><a href="http://www.blueidea.com/tech/" >技术文档</a></li>
	<li><a href="http://www.blueidea.com/design/" >艺术设计</a></li>
	<li><a href="http://www.blueidea.com/photo/" >摄影摄像</a></li>
	<li><a href="http://www.blueidea.com/computer/" >计算机技术</a></li>
	<li><a href="http://www.blueidea.com/download/">资源下载</a></li>
	<li><a href="http://www.blueidea.com/column/" >个人专栏</a></li>
	<li><a href="http://www.blueidea.com/cg/">CG绘画</a></li>
	<li><a href="http://www.blueidea.com/special/">专题</a></li>
	<li class="focu"><a href="index.php">经典论坛</a></li>
</ul>
</div>
<div class="stat">
	<div class="welstr">您好,<b>winsteps</b><a href="logging.php?action=logout">[退出]</a><a href="pm.php" target="_blank">短消息</a><a href="search.php?srchuid=128197&mytopics=yes&searchsubmit=yes">我的话题</a><a href="memcp.php">控制面板</a><a href="admincp.php" target="_blank">系统设置</a></div>
	<div class="tool"><a href="search.php">搜索</a><a href="stats.php">统计</a><a href="faq.php">帮助</a></div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

fixed.

[ 本帖最后由 winsteps 于 2006-7-19 11:22 编辑 ]

有钱我高低买个皮夹克

使用道具举报

feng4ever　楼主

小可爱

帖子: 5262
体力: 14768
威望: 181

发表于 2006-7-19 10:47:37 |显示全部楼层

谢谢了不过那个高光部分没能实现
greengnn的那个active的按钮没能和子菜单连接起来
winsteps朋友的那个子菜单下面没有一个高光

看看我目前的作的我使用了绝对定位才实现了这个效果
其实论坛的这个效果是这样的

一级菜单在激活的时候要能够遮住二级菜单的高光.来制造一种一级菜单和二级菜单连接起来的效果

<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

 <title>Blueidea</title>
<style type="text/css">
<!--

body{background-color:#3B4037;margin: 0;padding: 0;text-align:center;FONT-SIZE: 9pt;font-family: Verdana, Arial, Helvetica, sans-serif;color:#3B4037;text-align:center;}
div,ul,ol,li,p,span{margin:0;padding:0;}
ul{list-style-type:none;}
img{border-width:0px;}
a {color:#3B4037;text-decoration: none;}
a:hover {color:#FF6666;text-decoration: underline;}

#container{margin:0 auto;width:985px;}
#left_col{float:left;width:780px;text-align:left;}
#right_col{float:right;width:200px;background-color:#FFFFFF;}

#top_row{position:relative;}
		#logo{position:absolute;top:25px;left:14px;}
		#icons{height:45px;background-color:#000000;}
		#menu{}
			#menu_1{position:relative;height:27px;}
			#menu_cell{position:absolute;left:0px;height:26px;width:100%;border-bottom:1px solid #BBD496}
			#menu_1 ul{float:right;padding-right:10px;}

#menu_1 li{float:left;margin-top:5px;background-color:#4A5045;border-left:1px solid #5C6258;border-top:1px solid #5C6258;border-right:1px solid #3B4037; border-bottom:1px solid #3B4037 ;}
				#menu_1 a{color:#FFFFFF;display:block;padding:3px 5px 2px 5px;}
				#menu_1 a:hover{color:#CCFF00;}

#menu_1 .li_active {float:left;margin-top:0px;background-color:#9EC269;border-left:1px solid #BBD496;border-top:1px solid #BBD496;border-right:1px solid #3B4037;border-bottom:1px solid #9EC269;}
				#menu_1 .li_active a{font-weight:bold;border-bottom:2px solid #FFFFFF;padding:0px;margin:3px 5px 6px 5px;}
				#menu_1 .div_cell{background-color:#000;HEIGHT:1PX;}
				#menu_1 .div_line{}

#menu_2{background-color:#9EC269;border-bottom:1px solid #7E9B54;}
			#menu_2 ul{float:right;padding-right:5px;}
				#menu_2 li{float:left;padding:3px 5px 2px 5px;}
				#menu_2 a{color:#FFFFFF;display:block;}
				#menu_2 a:hover{color:#FFFF00;}
				#menu_2 .li_active{}
				#menu_2 .li_active a{font-weight:bold;}
	#nav{background-color:#D0CDA4;padding:6px 10px 5px 10px;}			
		#nav_1{float:left;}
		#nav_2{float:right;}
	#content{padding:5px;background-color:#FFFFFF}
		.content_frame_left{float:left;width:200px;}
		.content_frame_right{float:right;}
		.content_item_left{float:left;}
		.content_item_right{float:right;}
		.content_item_center{background-color:#000000;}
			.content_frame_left .content_title{padding:5px;background-color:#000000;width:200px;}
			.content_frame_left .content_list{padding:10px;line-height:20px;}
			.content_frame_right .content_title{padding:5px;background-color:green;width:265px;}
			.content_frame_right .content_list{padding:10px;line-height:20px;}

/*----- clear float -----*/
.clearfix:after { content: "."; display: block;  height: 0;  clear: both;  visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
.clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
-->
</style>
</head>
<body>
<div id="container">
	<div id="left_col">
		<div id="top_row" class="clearfix">
			<div id="logo"><img src="images/logo.gif"/></div>
			<div id="icons">icons</div>
			<div id="menu">
				<div id="menu_cell"></div>			
				<div id="menu_1"  class="clearfix">
					<div class="menu_cell"></div>
					<ul>
						<li><a href="#">短消息</a></li>
						<li class="li_active"><a href="#" >控制面板</a></li>
						<li><a href="#">会员</a></li>
						<li><a href="#">短消息</a></li>
						<li><a href="#">帮助</a></li>
						<li><a href="#">退出</a></li>
					</ul>
				</div>

<div id="menu_2" class="clearfix">
					<ul>
						<li><a href="#">短消息</a></li>
						<li class="li_active"><a href="#" >控制面板</a></li>
						<li><a href="#">会员</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="nav"  class="clearfix">
			<div id="nav_1" >您的位置：经典论坛 > 控制面板</div><div id="nav_2" ><img src="images/xml.gif"/><img src="images/spacer.gif" width="10"/><img src="images/arrow_dw.gif"/></div>
		</div>

<div id="content"  class="clearfix">
			<div class="content_frame_left">
				<div class="content_item_left">
					<div class="content_title">标题</div>
					<div class="content_list">
						<ul>
							<li>列表一一一</li>
							<li>列表二二二</li>
						</ul>
					</div>
					<div class="content_title">标题</div>
					<div class="content_list">
						<ul>
							<li>列表一一一</li>
							<li>列表二二二</li>
						</ul>
					</div>

</div>
			</div>
			<div class="content_frame_right">
				<div class="content_item_right">				
					<div class="content_title">标题</div>
					<div class="content_list">
						<ul>
							<li>列表一一一</li>
							<li>列表二二二</li>
						</ul>
					</div>
				</div>
				<div class="content_item_right">				
					<div class="content_title">标题</div>
					<div class="content_list">
						<ul>
							<li>列表一一一</li>
							<li>列表二二二</li>
						</ul>
					</div>
				</div>

</div>
		</div>
	</div>
	<div id="right_col">1111111111</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

长期有外企UI/UE/WEB实习职位（深圳、上海）

使用道具举报

酒酣几度

荣誉管理 

帖子: 1367
体力: 3521
威望: 127

发表于 2006-7-19 17:04:28 |显示全部楼层

那个用背景图片实现就可以！

blog Web标准化交流会 WEB标准群：23783439

使用道具举报

帖子: 197
体力: 45
威望: 5

发表于 2006-7-19 19:42:34 |显示全部楼层

<!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>蓝色理想</title>
<style type="text/css">
#header {
	background: #3B4037;
	font-size: 12px;
}
.logo {
	border: 0;
	margin: 15px;
	float: left;
}
#nav {
	margin: 33px 0 0;
	padding: 0 10px;
	height: 27px;
	list-style: none;
	float: right;
}
#nav li {
	float: left;
	height: 20px;
	line-height: 20px;
	border: 1px solid;
	border-color: #5C6258 #3B4037 #3B4037 #5C6258;
	background: #4A5045;
	padding: 0 5px;
	margin-top: 6px;
}
#nav .current {
	height: 26px;
	line-height: normal;
	border: 1px solid;
	border-color: #BBD496 #3B4037 #9EC269 #BBD496;
	font-weight: bold;
	background: #9EC269;
	margin: 0;
	position: relative;
	bottom: -1px;
	_bottom /**/: -3px;
}
#nav .current a {
	border-bottom: 3px solid #fff;
	display: block;
	padding-top: 5px;
}
#nav .current a:hover {
	text-decoration: none;
}
#state {
	height: 23px;
	line-height: 23px;
	background: #9EC269;
	padding: 0 10px;
	color: #fff;
	clear: both;
	border-top: 1px solid #BBD496;
	border-bottom: 1px solid #7E9B54;
}
#state span {
	float: right;
}
#header a {
	color: #fff;
	text-decoration: none;
}
#nav a:hover, #state a:hover {
	color: #cf0;
	text-decoration: underline;
}
#state a:hover {
	color: #ff0;
}
</style>
</head>
<body>
<div id="header"><a href="http://www.blueidea.com/"><img src="http://bbs.blueidea.com/images/logo.gif" alt="蓝色理想" width="88" height="31" class="logo" /></a>
  <ul id="nav">
    <li><a href="http://www.blueidea.com/news/">业界动态</a></li>
    <li><a href="http://www.blueidea.com/tech/">技术文档</a></li>
    <li><a href="http://www.blueidea.com/design/">艺术设计</a></li>
    <li><a href="http://www.blueidea.com/photo/">摄影摄像</a></li>
    <li><a href="http://www.blueidea.com/computer/">计算机技术</a></li>
    <li><a href="http://www.blueidea.com/download/">资源下载</a></li>
    <li><a href="http://www.blueidea.com/column/">个人专栏</a></li>
    <li><a href="http://www.blueidea.com/cg/">CG绘画</a></li>
    <li><a href="http://www.blueidea.com/special/">专题</a></li>
    <li class="current"><a href="index.php">经典论坛</a></li>
  </ul>
  <div id="state"><span><a href="#">搜索</a> <a href="#">帮助</a></span>您好,<strong>meltifa</strong> [<a href="#">退出</a>] <a href="#">短消息</a> <a href="#">我的话题</a> <a href="#">控制面板</a></div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

没有任何图片
ie5.0+，fx 1.5+，opera 9+

已有 1 人评分	威望	收起理由
蓝色	+ 1	我很赞同

总评分: 威望 + 1 查看全部评分

my.opera.com/tifa/

使用道具举报

帖子: 51
体力: 202
威望: 0

发表于 2006-7-20 02:06:46 |显示全部楼层

不错不错受教了 `~~~

使用道具举报

尽量经典

帖子: 5467
体力: 20293
威望: 53

发表于 2006-7-20 03:08:35 |显示全部楼层

我有一个类似的,功能上基本成熟了,可惜没有解决在所有页面中引用的问题,基于CSS+DIV+TABLE,还有项目,在IE里显示倒是效果很不错了,但是在DW里面,如果用"包括"引入,(不过最近发现当文件已经处在远程服务器端,用虚拟参数引入而非文件参数时,工作区里不显示该文件,但是原来也是用同样的参数,也将文件已经上传到了远程端,却照样显示,当中究竟有什么讲究,还没有搞清楚).该文件有些时候直接在DW工作区里显示,而且那些表格\层和项目并不规矩,占着很大地方,不好用.现在做着一个仅有表格和文字链接的导航.

我的导航条分两行:一行由蓝色理想这种风格的导航组成,处在下方,作为栏目导航,想实现的是点击相应栏目菜单,底下那一行自动弹出显示相关分栏目(这里就不再做什么效果了,直接超链接进入相关页面完事),而点击菜单时,不发生跳转(至少效果上是这样),而是直接在下方同一框架内显示相关内容.想把这个导航放在首页上,当点击菜单时,仍然在首页上览相关内容,(这样给人的感觉是链接不深);

上方的一行,则是站点导航,功能上是蓝色这种效果,但操作上却又是鼠标滑过显示级联菜单的,点击主菜单时,可以发生跳转进入相关站点首页,而点击级联菜单中的链接则直接进入该站点的相应栏目;一个级联菜单可以再包括子菜单,可以直达细节页面.这样一来,IE里面导航仍就那么块地方,在DW里面可是硕大无比:D

傍晚的太阳，余温尚存，继续散发光和热

使用道具举报

cues　

帖子: 59
体力: 5
威望: 0

发表于 2006-7-20 10:50:45 |显示全部楼层

看来真是高手云集，学习一下

使用道具举报

feng4ever　楼主

小可爱

帖子: 5262
体力: 14768
威望: 181

发表于 2006-7-20 11:46:52 |显示全部楼层

原帖由 meltifa 于 2006-7-19 19:42 发表

<!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/xh ...

还是需要使用负数.. 果然和我之前想的一样
我之前认为参数设置为负数的兼容性不好就放弃了这个想法而采用单独的一个绝对定位的层来表现高光.

长期有外企UI/UE/WEB实习职位（深圳、上海）

使用道具举报

手指凉冰冰　

帖子: 68
体力: 181
威望: 0
居住地: 河北省石家庄市

发表于 2006-7-20 11:56:18 |显示全部楼层

高手效率是高啊解决了这个问题

drawer.hellowind.com

使用道具举报

好帅的爸爸

高级会员 

帖子: 360
体力: 1348
威望: 2
居住地: 湖北省武汉市

发表于 2006-7-20 13:33:04 |显示全部楼层

要改版了？
很期待！

使用道具举报

帖子: 197
体力: 45
威望: 5

发表于 2006-7-20 15:45:08 |显示全部楼层

原帖由 feng4ever 于 2006-7-20 11:46 发表

还是需要使用负数.. 果然和我之前想的一样
我之前认为参数设置为负数的兼容性不好就放弃了这个想法而采用单独的一个绝对定位的层来表现高光.

你从哪里听来的这个说法？负数的兼容性很好的

my.opera.com/tifa/

使用道具举报

feng4ever　楼主

小可爱

帖子: 5262
体力: 14768
威望: 181

发表于 2006-7-20 15:59:10 |显示全部楼层

终于搞定了不过
_bottom /**/: -3px;
是为谁准备的呢??
加上这个东西以后 IE5 稍微出现了一点问题去掉反而正常了

<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

 <title>Blueidea</title>
<style type="text/css">
<!--
body{background-color:#3B4037;text-align:center;FONT-SIZE: 9pt;font-family: Verdana, Arial, Helvetica, sans-serif;color:#3B4037;text-align:center;}
body,div,ul,ol,li,p,span{margin:0;padding:0;}
ul{list-style-type:none;}
img{border-width:0px;}
a {color:#3B4037;text-decoration: none;}
a:hover {color:#FF6666;text-decoration: underline;}

#container{margin:0 auto;width:985px;}
#left_col{float:left;width:780px;text-align:left;}
#right_col{float:right;width:200px;background-color:#FFFFFF;}

#top_row{position:relative;}
		#logo{position:absolute;top:25px;left:14px;}
		#icons{height:45px;background-color:#000000;}
		#menu{}
			#menu_1{}
			#menu_1 ul{float:right;padding-right:10px;}
				#menu_1 li{float:left;margin-top:5px;background-color:#4A5045;border:1px solid;border-color:#5C6258 #3B4037 #3B4037 #5C6258 ;}
				#menu_1 a{color:#FFFFFF;display:block;padding:3px 5px 2px 5px;}
				#menu_1 a:hover{color:#CCFF00;}
				#menu_1 .li_active {position:relative;bottom:-1px;float:left;margin-top:0px;background-color:#9EC269;border:1px solid;border-color:#BBD496 #3B4037 #9EC269 #BBD496;}
				#menu_1 .li_active a{font-weight:bold;border-bottom:2px solid #FFFFFF;padding:0px;margin:3px 5px 5px 5px;}

#menu_2{background-color:#9EC269;border-top:1px solid #BBD496;border-bottom:1px solid #7E9B54;}
			#menu_2 ul{float:right;padding-right:5px;}
				#menu_2 li{float:left;padding:3px 5px 3px 5px;}
				#menu_2 a{color:#FFFFFF;display:block;}
				#menu_2 a:hover{color:#FFFF00;}
				#menu_2 .li_active{}
				#menu_2 .li_active a{font-weight:bold;}
	#nav_row{background-color:#D0CDA4;padding:6px 10px 5px 10px;}			
		#nav_1{float:left;}
		#nav_2{float:right;}
	#content_row{padding:5px;background-color:#00002A}
		.content_frame_left{float:left;background-color:#444444;width:200px;}
		.content_frame_right{float:right;background-color:#999999;width:565px;}
		.content_frame_banner{clear:both;background-color:#123456;width:770px;}

.item_1{float:left;width:200px;}
			.item_2{float:left;width:280px;}
			.item_3{float:right;width:280px;}
			.item_4{clear:both;background-color:red}
				.item_1 .item_title{background-color:#000000;padding:5px}
				.item_1 .item_list{line-height:20px;padding:5px}
				.item_2 .item_title{background-color:green;padding:5px}
				.item_2 .item_box{line-height:20px;border:1px solid #000000;background-color:#FFFFFF;margin:5px 5px 0px 5px;padding:5px}
				.item_2 .item_list{line-height:20px;padding:5px}
				.item_3 .item_title{background-color:green;padding:5px}				
				.item_3 .item_box{line-height:20px;border:1px solid #000000;background-color:#FFFFFF;margin:5px 5px 0px 5px;padding:5px}
				.item_3 .item_list{line-height:20px;padding:5px}
	#bottom_row{padding:5px;color:#FFFFFF}
		#copyright_1{float:left}
		#copyright_2{float:right}

/*----- clear float -----*/
.clearfix:after { content: "."; display: block;  height: 0;  clear: both;  visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
.clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
-->
</style>
</head>
<body>
<div id="container">
	<div id="left_col">
		<div id="top_row" class="clearfix">
			<div id="logo"><img src="images/logo.gif"/></div>
			<div id="icons">icons</div>
			<div id="menu">
				<div id="menu_1"  class="clearfix">
					<ul>
						<li><a href="#">短消息</a></li>
						<li class="li_active"><a href="#" >控制面板</a></li>
						<li><a href="#">会员</a></li>
						<li><a href="#">短消息</a></li>
						<li><a href="#">帮助</a></li>
						<li><a href="#">退出</a></li>
					</ul>
				</div>
				<div id="menu_2" class="clearfix">
					<ul>
						<li><a href="#">短消息</a></li>
						<li class="li_active"><a href="#" >控制面板</a></li>
						<li><a href="#">会员</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="nav_row"  class="clearfix">
			<div id="nav_1" >您的位置：经典论坛 > 控制面板</div><div id="nav_2" ><img src="images/xml.gif"/><img src="images/spacer.gif" width="10"/><img src="images/arrow_dw.gif"/></div>
		</div>

<div id="content_row"  class="clearfix">
			<div class="content_frame_left">
				<div class="item_1">
					<div class="item_title">标题</div>
					<div class="item_list">
						<ul>
							<li>列表一一一</li>
							<li>列表二二二</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="content_frame_right">
				<div class="item_2">				
					<div class="item_title">
						<span>标题</span>
						<span>标题222</span>
					</div>
					<div class="item_list">
						<ul>
							<li>列表一一一</li>
							<li>列表二二二</li>
						</ul>
					</div>
				</div>
				<div class="item_3">				
					<div class="item_title">标题</div>
					<div class="item_list">
						<ul>
							<li>列表一一一</li>
							<li>列表二二二</li>
						</ul>
					</div>
				</div>
				<div class="item_4">banner</div>
				<div class="item_2">				
					<div class="item_title">标题</div>
					<div class="item_box">
						<ul>
							<li>列表一一一</li>
							<li>列表二二二</li>
						</ul>
					</div>
					<div class="item_list">
						<ul>
							<li>列表一一一</li>
							<li>列表二二二</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="content_frame_banner">banner</div>
			<div class="content_frame_left">
				<div class="item_1">
					<div class="item_title">标题</div>
					<div class="item_list">
						<ul>
							<li>列表一一一</li>
							<li>列表二二二</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="content_frame_right">
				<div class="item_2">				
					<div class="item_title">标题</div>
					<div class="item_list">
						<ul>
							<li>列表一一一</li>
							<li>列表二二二</li>
						</ul>
					</div>
				</div>
				<div class="item_3">				
					<div class="item_title">标题</div>
					<div class="item_list">
						<ul>
							<li>列表一一一</li>
							<li>列表二二二</li>
						</ul>
					</div>
				</div>
				<div class="item_4">banner</div>
				<div class="item_2">				
					<div class="item_title">标题</div>
					<div class="item_list">
						<ul>
							<li>列表一一一</li>
							<li>列表二二二</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="bottom_row" class="clearfix">
			<div id="copyright_1">11</div>
			<div id="copyright_2">11</div>
		</div>
	</div>
	<div id="right_col">1111111111</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

长期有外企UI/UE/WEB实习职位（深圳、上海）

使用道具举报

帖子: 197
体力: 45
威望: 5

发表于 2006-7-20 16:14:06 |显示全部楼层

_bottom /**/: -3px;

是为ie5准备的

ie5对盒模型理解有问题，造成导航大小有细微差异，所以就加了这个

my.opera.com/tifa/

使用道具举报

流星划过　

帖子: 103
体力: 305
威望: 4

发表于 2006-7-20 16:36:43 |显示全部楼层

个人觉得web标准归根结底还是文档结构的标准，只有在文档结构符合语义的情况下再去注重表现，我用dl dt dd重新对导航进行了组织，不过写起来问题还是比较多的。

<div id="wrap">
<div id="header">
<div id="logo"><h1>蓝色经典</h1></div>
<div id="nav">
<dl>
<dt id="nav1"><a href="#">业界动态</a></dt>
<dd id="nav1Child"><div>本站动态 | 软件信息 | 硬件信息 | 设计比赛 | 专业书讯 | 招聘求职 | 其它信息 | 教育培训</div></dd>
<dt id="nav2"><a href="#">技术文档</a></dt>
<dd id="nav2Child"><div>网页制作 | 图形图像 | 多媒体制作 | 网络编程 | 网站建设</div></dd>
<dt id="nav3"><a href="#">艺术设计</a></dt>
<dd id="nav3Child"><div>设计理论 | pages | 像素设计 | 佳作欣赏</div></dd>
<dt id="nav4"><a href="#">摄影摄像</a></dt>
<dd id="nav4Child"><div>摄影作品 | 摄影游记 | 摄影器材 | 摄影技巧 | 摄影动态 | 摄影好站</div></dd>
<dt id="nav5"><a href="#">计算机技术</a></dt>
<dd id="nav5Child"><div>操作系统 | 网络安全 | 应用程序 | 网络工程</div></dd>
<dt id="nav6"><a href="#">资源下载</a></dt>
<dd id="nav6Child"><div>网页快照 | 经典产品| 三维实景欣赏</div></dd>
<dt id="nav7"><a href="#">个人专栏</a></dt>
<dd id="nav7Child"><div>会员文章 | Flash | ColdFusion | Mobile | Web Standards | Design | .NET | ASP | PHP | site</div></dd>
<dt id="nav8"><a href="#">CG绘画</a></dt>
<dd id="nav8Child"><div>手绘教程 | Wacom专区</div></dd>
<dt id="nav9"><a href="#">专题</a></dt>
<dd id="nav9Child"><div>中国设计网站站长心声探索 | 《领航人》专题 | B/S引擎—NoahWeb专题</div></dd>
<dt id="nav10"><a href="#">经典论坛</a></dt>
<dd id="nav10Child" nowrap><div><span>您好,流星划过 [退出] 短消息我的话题控制面板</span>搜索帮助</div></dd>
</dl>
</div>
</div>
</div>

复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<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;}
body{ text-align:center;background:#FFFFFF; background-color: 3B4037; }

a{ text-decoration:none; color:#fff;}
a:hover{ text-decoration:underline; color: #CCFF00;}

#wrap{ text-align: left; margin: 0 auto; width: 100%; position: relative; }
#header{ clear: both; }
#logo{ float: left; width: 110px; }
  #logo h1 {margin: 0px; padding: 0px; display: block; width: 110px; height: 61px; background : url(http://bbs.blueidea.com/images/logo.gif) no-repeat center 16px; text-indent: -2000px;}
#nav{ float: left;  width: 100%; margin-left: -110px;}

#header dl{float: right; display: block; }
#header dt{float:left;  display: inline; text-align: center;  height: 19px; line-height: 19px; padding: 0px 5px ; margin-top: 40px; background:#4A5045; border-left: 1px solid #5C6258; border-top: 1px solid #5C6258; border-right: 1px solid #3B4037; border-bottom: #3B4037;}
#header #nav10{ margin-right: 23px;}
#header dd{display: none;}

#index10 #nav10Child, #index9 #nav9Child, #index8 #nav8Child, #index7 #nav7Child, #index6 #nav6Child, #index5 #nav5Child, #index4 #nav4Child, #index3 #nav3Child, #index2 #nav2Child, #index1 #nav1Child{
	display: block; position : absolute; top: 61px; left: 0px; width: 100%; color: #FFF; text-align: center; z-index: auto !important; z-index: -1;
}

dl dd div{
	white-space: nowrap; height: 25px; line-height: 25px; padding: 0px 15px; border-top: 1px solid #BBD496; border-bottom: 1px solid #7E9B54; background-color: #9EC269; text-align: left; margin: 0px 13px;
}

#index10 #nav10 , #index9 #nav9 , #index8 #nav8 , #index7 #nav7 , #index6 #nav6 , #index5 #nav5 , #index4 #nav4 , #index3 #nav3 , #index2 #nav2 , #index1 #nav1 {
	background-color: #9EC269; margin-top: 35px; height: 27px; border-left: 1px solid #BBD496; border-top: 1px solid #BBD496; border-right: 1px solid #BBD496; border-bottom: 1px solid #9EC269; 
}
#index10 #nav10 a, #index9 #nav9 a, #index8 #nav8 a, #index7 #nav7 a, #index6 #nav6 a, #index5 #nav5 a, #index4 #nav4 a, #index3 #nav3 a, #index2 #nav2 a, #index1 #nav1 a{
	height: 18px; width: auto !important; width: 70px; border-bottom: 3px solid #FFF; display: block; margin: 0px; padding: 0px; font-weight: bold;
}
#index10 #nav10 a:hover, #index9 #nav9 a:hover, #index8 #nav8 a:hover, #index7 #nav7 a:hover, #index6 #nav6 a:hover, #index5 #nav5 a:hover, #index4 #nav4 a:hover, #index3 #nav3 a:hover, #index2 #nav2 a:hover, #index1 #nav1 a:hover{
	text-decoration:none;
}

#nav10Child div{text-align: right;}
#nav10Child div span{float: left;}
</style>
</head>

<body id="index10">
<div id="wrap">
	<div id="header">
		<div id="logo"><h1>蓝色经典</h1></div>
		<div id="nav">
			<dl>
			  <dt id="nav1"><a href="#">业界动态</a></dt>
			  <dd id="nav1Child"><div>本站动态 | 软件信息 | 硬件信息 | 设计比赛 | 专业书讯 | 招聘求职 | 其它信息 | 教育培训</div></dd>
			  <dt id="nav2"><a href="#">技术文档</a></dt>
			  <dd id="nav2Child"><div>网页制作 | 图形图像 | 多媒体制作 | 网络编程 | 网站建设</div></dd>
			  <dt id="nav3"><a href="#">艺术设计</a></dt>
			  <dd id="nav3Child"><div>设计理论 | pages | 像素设计 | 佳作欣赏</div></dd>
			  <dt id="nav4"><a href="#">摄影摄像</a></dt>
			  <dd id="nav4Child"><div>摄影作品 | 摄影游记 | 摄影器材 | 摄影技巧 | 摄影动态 | 摄影好站</div></dd>
			  <dt id="nav5"><a href="#">计算机技术</a></dt>
			  <dd id="nav5Child"><div>操作系统 | 网络安全 | 应用程序 | 网络工程</div></dd>
			  <dt id="nav6"><a href="#">资源下载</a></dt>
			  <dd id="nav6Child"><div>网页快照 | 经典产品| 三维实景欣赏</div></dd>
			  <dt id="nav7"><a href="#">个人专栏</a></dt>
			  <dd id="nav7Child"><div>会员文章 | Flash | ColdFusion | Mobile | Web Standards | Design | .NET | ASP | PHP | site</div></dd>
			  <dt id="nav8"><a href="#">CG绘画</a></dt>
			  <dd id="nav8Child"><div>手绘教程 | Wacom专区</div></dd>
			  <dt id="nav9"><a href="#">专题</a></dt>
			  <dd id="nav9Child"><div>中国设计网站站长心声探索 | 《领航人》专题 | B/S引擎—NoahWeb专题</div></dd>
			  <dt id="nav10"><a href="#">经典论坛</a></dt>
			  <dd id="nav10Child" nowrap><div><span>您好,流星划过 [退出] 短消息 我的话题 控制面板</span>搜索 帮助</div></dd>
			</dl>
		</div>
	</div>
</div>
</body>

提示：您可以先修改部分代码再运行

通过了ie5.5 ie6 ff1.5 但是下面在细节地方有差异，ff下面1,2级之间还是被截断了。

对于现在板式的导航也写了个样式，不过毛病就更多了，最突出的就是不能自动适应宽度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<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;}
body{ text-align:center;background:#FFFFFF; overflow:hidden;}

a{ text-decoration:none; color:#fff;}
a:hover{ text-decoration:underline;}

#wrap{ text-align: left; margin: 0 auto; }

#header{ clear: both; }
#logo{ float: left; width: 110px; }
  #logo h1 {margin: 0px; padding: 0px;}
  #logo h1 a{display: block; width: 110px; height: 65px; background : url(http://bbs.blueidea.com/images/logo1.gif) no-repeat center 21px; text-indent: -2000px;}
#nav{ float: left;  width: 100%; margin-left: -110px;}

#header dl{float: right; display: block; position : relative; }
#header dt{float:left;  display: inline; text-align: center;  height: 26px; line-height: 26px; padding: 0px 8px ; margin: 6px 0px; border-right: 6px solid #FFF; background:#8C8EA3;}
/* #header dt a{ display: block;  white-space: nowrap; } */
#header dd{display: none;}

#index10 #nav10Child, #index9 #nav9Child, #index8 #nav8Child, #index7 #nav7Child, #index6 #nav6Child, #index5 #nav5Child, #index4 #nav4Child, #index3 #nav3Child, #index2 #nav2Child, #index1 #nav1Child{
	display: block; position : absolute; top: 38px; left: 0px; width: 100%; color: #FFF; 
}

dl dd div{
	white-space: nowrap; height: 27px; line-height: 27px; padding: 0px 5px; margin-right: 6px; background-color: #668; 
}

#index10 #nav10 , #index9 #nav9 , #index8 #nav8 , #index7 #nav7 , #index6 #nav6 , #index5 #nav5 , #index4 #nav4 , #index3 #nav3 , #index2 #nav2 , #index1 #nav1 {
	background-color: #668; padding-bottom: 8px;
}
</style>
</head>

<body id="index10">
<div id="wrap">
	<div id="header">
		<div id="logo"><h1><a href="#" title="蓝色经典">蓝色经典</a></h1></div>
		<div id="nav">
			<dl>
			  <dt id="nav1"><a href="#">业界动态</a></dt>
			  <dd id="nav1Child"><div>本站动态 | 软件信息 | 硬件信息 | 设计比赛 | 专业书讯 | 招聘求职 | 其它信息 | 教育培训</div></dd>
			  <dt id="nav2"><a href="#">技术文档</a></dt>
			  <dd id="nav2Child"><div>网页制作 | 图形图像 | 多媒体制作 | 网络编程 | 网站建设</div></dd>
			  <dt id="nav3"><a href="#">艺术设计</a></dt>
			  <dd id="nav3Child"><div>设计理论 | pages | 像素设计 | 佳作欣赏</div></dd>
			  <dt id="nav4"><a href="#">摄影摄像</a></dt>
			  <dd id="nav4Child"><div>摄影作品 | 摄影游记 | 摄影器材 | 摄影技巧 | 摄影动态 | 摄影好站</div></dd>
			  <dt id="nav5"><a href="#">计算机技术</a></dt>
			  <dd id="nav5Child"><div>操作系统 | 网络安全 | 应用程序 | 网络工程</div></dd>
			  <dt id="nav6"><a href="#">资源下载</a></dt>
			  <dd id="nav6Child"><div>网页快照 | 经典产品| 三维实景欣赏</div></dd>
			  <dt id="nav7"><a href="#">个人专栏</a></dt>
			  <dd id="nav7Child"><div>会员文章 | Flash | ColdFusion | Mobile | Web Standards | Design | .NET | ASP | PHP | site</div></dd>
			  <dt id="nav8"><a href="#">CG绘画</a></dt>
			  <dd id="nav8Child"><div>手绘教程 | Wacom专区</div></dd>
			  <dt id="nav9"><a href="#">专题</a></dt>
			  <dd id="nav9Child"><div>中国设计网站站长心声探索 | 《领航人》专题 | B/S引擎—NoahWeb专题</div></dd>
			  <dt id="nav10"><a href="#">经典论坛</a></dt>
			  <dd id="nav10Child" nowrap><div>您好,流星划过 [退出] 短消息 我的话题 控制面板 	搜索 帮助</div></dd>
			</dl>
		</div>
	</div>
</div>
</body>

提示：您可以先修改部分代码再运行

大家可以改变一下body 中id的值，index1-index10可以切换到其他相关栏目，这样导航就可以单独提取出来了。

已有 2 人评分	威望	收起理由
蓝色	+ 1	精品文章
feng4ever	+ 2	精品文章

总评分: 威望 + 3 查看全部评分

流星…………

使用道具举报

feng4ever　楼主

小可爱

帖子: 5262
体力: 14768
威望: 181

发表于 2006-7-20 20:08:04 |显示全部楼层

原帖由 流星划过 于 2006-7-20 16:36 发表
个人觉得web标准归根结底还是文档结构的标准，只有在文档结构符合语义的情况下再去注重表现，我用dl dt dd重新对导航进行了组织，不过写起来问题还是比较多的。

<div id="wrap">
<div id ...

强烈支持!!!!
更改页面只要更改 body的 id标签就可以了...

很特别的子标签用法灵魂附体..

[ 本帖最后由 feng4ever 于 2006-7-20 20:25 编辑 ]

长期有外企UI/UE/WEB实习职位（深圳、上海）

使用道具举报

酒酣几度

荣誉管理 

帖子: 1367
体力: 3521
威望: 127

发表于 2006-7-20 21:04:48 |显示全部楼层

分解一下
_bottom: -3px;
为ie准备的,只有ie识别
_bottom /**/: -3px;
空格+/*/是ie 5.x独有的

blog Web标准化交流会 WEB标准群：23783439

使用道具举报

goos　

锅巴三月三

荣誉管理 

帖子: 2031
体力: 3739
威望: 15
居住地: 北京市通州区

发表于 2006-7-24 12:57:14 |显示全部楼层

<!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>Blueidea Nav</title>
<style type="text/css">
body{	font: 12px Tahoma; background: #3B4037;}
*{margin: 0; padding: 0;}
#nav{text-align: center; padding: 30px 0;}
#nav ul{list-style: none; width: 830px; margin: 0 auto; line-height: 21px; position: relative;}
#nav ul li{float:right;position: relative; margin-left:1px; width:70px; background: #4A5045; border-top: solid 1px #5C6258;border-left: solid 1px #5C6258;}
#nav ul li a{color: #fff; text-decoration: none;}
#nav ul li a:hover{color: #cf0; text-decoration: underline;}
#nav ul #bbsmenu a{ position: absolute; right: 0; top: -5px; width: 100%; background: #9EC269; font-weight: bolder; padding-top: 3px; padding-bottom: 2px; border-top: solid 1px #BBD496;border-left: solid 1px #BBD496;}
#nav ul #bbsmenu a em{position: absolute; bottom: 0; left: 3px; height: 3px;width: 90%;background: #fff;overflow: hidden; }
#userinfo{text-align: left; clear: both;margin: 0 auto; background: #9EC269; color: #fff; border: solid 1px #BBD496; line-height: 24px;width: 850px; padding: 0 16px;}
#userinfo a{color: #fff; text-decoration: none;}
#userinfo a:hover{color: #ff0; text-decoration: underline;}
#userinfo span{ float: right;}
a:hover{color:#cf0; }
</style>
</head>

<body>
<div id="nav">
	<ul>
		<li id="bbsmenu"><a href="index.php">经典论坛<em></em></a></li>
		<li><a href="http://www.blueidea.com/special/">专题</a></li>
		<li><a href="http://www.blueidea.com/cg/">CG绘画</a></li>
		<li><a href="http://www.blueidea.com/column/">个人专栏</a></li>
		<li><a href="http://www.blueidea.com/download/">资源下载</a></li>
		<li><a href="http://www.blueidea.com/computer/">计算机技术</a></li>
		<li><a href="http://www.blueidea.com/photo/">摄影摄像</a></li>
		<li><a href="http://www.blueidea.com/design/">艺术设计</a></li>
		<li><a href="http://www.blueidea.com/tech/">技术文档</a></li>
		<li><a href="http://www.blueidea.com/news/">业界动态</a></li>		
	</ul>
	<div id="userinfo">
		<span>
			<a href="#">搜索</a>
			<a href="#">帮助</a>
		</span>
			您好,<strong>meltifa</strong>
			[<a href="#">退出</a>]
			<a href="#">短消息</a> <a href="#">我的话题</a>
			<a href="#">控制面板</a>
	</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 goos 于 2006-7-24 13:03 编辑 ]

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-13 10:03 , Processed in 0.198946 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部