导航菜单全部解释调用外部样式

<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; width: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); width: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;去掉黑点

posted @ 2013-11-02 14:16  914556495  阅读(147)  评论(0)    收藏  举报