<title>导航菜单</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<ul class="nav">
<li class="first">首页</li>
<li>资讯前沿</li>
<li>课程介绍</li>
<li>校区</li>
<li>明星学员</li>
<li>学员服务</li>
<li>视频</li>
<li>十年</li>
<li>关于青鸟</li>
</ul>
</body>
css样式:
@charset "utf-8";
/* CSS Document */
.nav li { list-style-type:none; font-size:12px; float:left; 90px; height:23px; text-align:center; background-image:url(../images/nav.gif);
background-repeat:no-repeat; margin-left:3px; padding-top:12px; }
.nav .first { background-image:url(../images/nav_first.gif); 70px; font-size:14px; font-weight:bold; color:#ffffff; }
说明:margin-left:3px图片间的间距是3像素
padding-top:12px;标签里顶部12像素
float:left;从左向右移动
text-align:center;字体在图片剧中显示
list-style-type:none;去掉黑点