| 网站首页 | Photoshop资源 | Photoshop学院 | Photoshop展示 | 设计素材 | 设计学院 | 数码学院 | 返回总部 | 
您现在的位置: Photoshop资源站 >> 设计学院 >> 网站设计 >> 基础篇 >> 正文
  CSS模拟制作的techweb网站导航特效代码           ★★★ 【字体:
CSS模拟制作的techweb网站导航特效代码
作者:佚名    教程来源:不详    点击数:    更新时间:2008-6-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" />
<style type="text/css">
<!--
#siteNav {
 clear: both;
 float:left;
 width:750px;
 padding-left: 1px;
 background: #fff;

 font-size:12px;
 font-weight: bold;
 line-height:normal;
 border-bottom:2px solid #84B0C7;
 voice-family: ""}"";
 voice-family: inherit;
 width: 749px;
}
#siteNav ul {
 margin:0;
 padding:0;
 list-style:none;
}
#siteNav li {
 display:inline;
 margin:0;
 padding:0;
}
#siteNav a {
 float:left;
 background:url() no-repeat right top;
 padding:5px 11px 4px 5px;
 color:#036;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#siteNav a span {
 float:none
}
/* End IE5-Mac hack */
#siteNav a:hover span {
 color:#036;
}
#siteNav a:hover {
 background-position:0% -42px;
}
#siteNav a:hover span {
 background-position:100% -42px;
}
#siteNav #sel a {
 background-position:0% -42px;
}
#siteNav #sel a span {
 background-position:100% -42px;
}
-->
</style>
<title>Demo</title>
</head>

<body>
<div id="siteNav">
 <ul>
  <li id="sel"><a href="#"><span>首页</span></a></li>

  <li><a href="#"><span>资讯</span></a></li>
  <li><a href="#"><span>人物</span></a></li>
  <li><a href="#"><span>管理</span></a></li>
  <li><a href="#"><span>经营</span></a></li>
  <li><a href="#"><span>财经</span></a></li>
  <li><a href="#"><span>技术</span></a></li>

  <li><a href="#"><span>产品</span></a></li>
  <li><a href="#"><span>网络</span></a></li>
  <li><a href="#"><span>电信</span></a></li>
  <li><a href="#"><span>评论</span></a></li>
  <li><a href="#"><span>博客</span></a></li>
  <li><a href="#"><span>老友记</span></a></li>

  <li><a href="#"><span>滚动</span></a></li>
  <li><a href="#"><span>搜索</span></a></li>
  <li><a href="#"><span>WAP</span></a></li>
 </ul>
</div>
</body>
</html>


教程录入:onegreen    责任编辑:onegreen 
  • 上一篇教程:

  • 下一篇教程:
  •  
    发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    最新热点 最新推荐 相关文章
    五款符合WEB标准的纯div+css弹出菜单
    体验Adobe Dreamweaver CS3新特性
    Adobe Illustrator CS2画可爱的小鸟
    Dreamweaver CS3 最新功能描述
    体验Adobe Flash CS3新特性
    CSS主色调配色方案
    Adobe Dreamweaver CS3 暨Creative Sui
    FrontPage 2003教程 如何在Frontpage20
    体验Adobe Fireworks CS3新特性
    新矢量软件Illustrator CS3:架构更新性