简单导航栏

最新推荐文章于 2022-12-19 16:08:57 发布

jimjiayu

最新推荐文章于 2022-12-19 16:08:57 发布

阅读量304

点赞数

分类专栏： HTML5+CSS3

HTML5+CSS3 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

<!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=utf-8" />
<title>无标题文档</title>
<style>
body{ margin:0; padding:0;}
ul{ list-style:none;}
.first{ 
width:760px;
margin:0 auto;
background:url(banner_bg.jpg) repeat-x;
}
.second{ 
width:760px; 
height:32px;
background:url(button1_bg.jpg) repeat-x; 
margin:0 auto;
}
.second li{ 
float:left; 
 }
.second li a{ 
text-decoration:none; 
font-size:14px;
width:80px; 
height:32px; 
color:#060;
display:block; 
background:url(button1.jpg) no-repeat;
text-align:center;
line-height:32px; 
}
.second ul li a:hover{ color:#FFF; background-image:url(button2.jpg);}
</style>
</head>

<body>
<div class="first">
<img src="banner1.jpg" />
</div>
<div class="second">
	<ul>
    	<li><a href="#">首页导读</a></li>
        <li><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>
</body>
</html>

jimjiayu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单导航栏

无标题文档body{ margin:0; padding:0;}ul{ list-style:none;}.first{ width:760px;margin:0 auto;background:url(banner_bg.jpg) repeat-x;}.second{ width:760px; height:32px;background:url(button1_bg.j
复制链接

扫一扫

专栏目录