打印

蓝色理想的导航怎么用标准??

feng4ever [楼主]

小可爱

版主

认证
帖子: 3956
体力: 6038
威望: 174
当前: 上海闵行

专长推广

1^# 大中小发表于 2006-7-18 15:31

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

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

上海一超新颖线下创意项目寻合作。

TOP

西部数码VPS主机1G内存仅266元

greengnn

酒酣几度

版主

认证
帖子: 1194
体力: 1728
威望: 124
当前: 陕西西安
离线: 1 天

专长 网页设计,前端制作,策划

2^# 大中小发表于 2006-7-19 07:58

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

我勉强做了一个，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>

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

greengnn's space W3C技术资料 WEB标准群：46077068 西安BI会员群：63970757

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

winsteps

中级会员

帖子: 82
体力: 229
威望: 1
离线: 33 天

3^# 大中小发表于 2006-7-19 09:59

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 编辑 ]

有钱我高低买个皮夹克

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

feng4ever [楼主]

小可爱

版主

认证
帖子: 3956
体力: 6038
威望: 174
当前: 上海闵行

专长推广

4^# 大中小发表于 2006-7-19 10:47

谢谢了不过那个高光部分没能实现
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">

</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>

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

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

上海一超新颖线下创意项目寻合作。

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

greengnn

酒酣几度

版主

认证
帖子: 1194
体力: 1728
威望: 124
当前: 陕西西安
离线: 1 天

专长 网页设计,前端制作,策划

5^# 大中小发表于 2006-7-19 17:04

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

greengnn's space W3C技术资料 WEB标准群：46077068 西安BI会员群：63970757

TOP

meltifa

新手上路

帖子: 197
体力: 40
威望: 5
离线: 652 天

6^# 大中小发表于 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/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 我很赞同 2006-7-20 20:18

my.opera.com/tifa/

TOP

kxy000

初级会员

帖子: 50
体力: 145
威望: 0
离线: 190 天

7^# 大中小发表于 2006-7-20 02:06

不错不错受教了 `~~~

TOP

包谷

尽量经典

荣誉管理团队

帖子: 5400
体力: 13131
威望: 50
离线: 556 天

8^# 大中小发表于 2006-7-20 03:08

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

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

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

缘至而来，缘尽而散，无谓付出与索取。蓝色珍重！

TOP

cues

新手上路

帖子: 59
体力: 0
威望: 0
离线: 181 天

9^# 大中小发表于 2006-7-20 10:50

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

TOP

feng4ever [楼主]

小可爱

版主

认证
帖子: 3956
体力: 6038
威望: 174
当前: 上海闵行

专长推广

10^# 大中小发表于 2006-7-20 11:46

引用:

原帖由 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 ...

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

上海一超新颖线下创意项目寻合作。

TOP

手指凉冰冰

初级会员

帖子: 69
体力: 126
威望: 0
当前: 河北石家庄
离线: 1 天

11^# 大中小发表于 2006-7-20 11:56

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

drawer.hellowind.com

TOP

newlethe

好帅的爸爸

高级会员

帖子: 356
体力: 774
威望: 2
当前: 湖北武汉

专长 ASP,网站运营,推广

12^# 大中小发表于 2006-7-20 13:33

要改版了？
很期待！

我的淘宝

TOP

meltifa

新手上路

帖子: 197
体力: 40
威望: 5
离线: 652 天

13^# 大中小发表于 2006-7-20 15:45

引用:

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

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

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

my.opera.com/tifa/

TOP

feng4ever [楼主]

小可爱

版主

认证
帖子: 3956
体力: 6038
威望: 174
当前: 上海闵行

专长推广

14^# 大中小发表于 2006-7-20 15:59

终于搞定了不过
_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">

</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>

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

上海一超新颖线下创意项目寻合作。

TOP

meltifa

新手上路

帖子: 197
体力: 40
威望: 5
离线: 652 天

15^# 大中小发表于 2006-7-20 16:14

_bottom /**/: -3px;

是为ie5准备的

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

my.opera.com/tifa/

TOP

流星划过

中级会员

帖子: 103
体力: 300
威望: 4
当前: 北京海淀区
离线: 29 天

专长 前端制作,JS

16^# 大中小发表于 2006-7-20 16:36

个人觉得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可以切换到其他相关栏目，这样导航就可以单独提取出来了。

本帖最近评分记录

蓝色威望 +1 精品文章 2006-7-20 20:19
feng4ever 威望 +2 精品文章 2006-7-20 20:06

流星…………

TOP

feng4ever [楼主]

小可爱

版主

认证
帖子: 3956
体力: 6038
威望: 174
当前: 上海闵行

专长推广

17^# 大中小发表于 2006-7-20 20:08

引用:

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

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

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

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

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

上海一超新颖线下创意项目寻合作。

TOP

greengnn

酒酣几度

版主

认证
帖子: 1194
体力: 1728
威望: 124
当前: 陕西西安
离线: 1 天

专长 网页设计,前端制作,策划

18^# 大中小发表于 2006-7-20 21:04

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

greengnn's space W3C技术资料 WEB标准群：46077068 西安BI会员群：63970757

TOP

goos

锅巴三月三

版主

认证
帖子: 1057
体力: 1560
威望: 9
当前: 北京朝阳区
离线: 1 天

专长 前端制作,产品设计,策划

19^# 大中小发表于 2006-7-24 12:57

<!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 编辑 ]

9 Month Leda Photo

TOP