5.前端入门之制作一个导航条

Bczheng1

已于 2024-02-03 17:26:04 修改

阅读量988

点赞数 4

分类专栏： # 网页前端文章标签：前端

于 2024-02-03 15:57:49 首次发布

本文链接：https://blog.csdn.net/d3582077/article/details/136008188

版权

网页前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细描述了如何使用HTML和CSS创建一个带有图片边角的导航条，包括使用切片工具处理图片、设置ul和li标签的样式，以及实现无下划线链接和颜色变化。

摘要由CSDN通过智能技术生成

做一个导航条，看下面这个导航条，湖南人才网上找到的，我们要做的就是这个：

用ps的切片工具，把图片的两边取下来，还有中间也要取一部分（不是文字区域），分隔线的图片也取下来，那么就会有四张图片，如下：（它们的高度都是一致的）

左边：

left.gif

中间：

midbg.gif

分隔线：

separate.gif

右边：

right.gif

然后新建index.html跟图片同级目录，代码如下：

<!doctype html>
<html>
<head>
 <title></title>
 <style type="text/css">
 /*这个显示背景*/
 ul{ background-image:url(midbg.gif); background-repeat:repeat-x; height:43px; float:left; margin-left:0px; padding-left:70px;
   padding-right:100px; list-style-type:none; margin:0px 0px;}
  /*用分隔线作背景图片,那么每个li项前都会有一个分隔线,也可以通过设置list-style-image来实现*/
 li{ background-image:url(separate.gif); height:43px; width:100px; background-repeat:no-repeat; float:left; text-align:center;
     line-height:43px;}
  a{ text-decoration:none; color:White; font-weight:bold; font-size:14px;}
  a:hover{ color:Black}
  </style>
</head>
<body>
<div style="margin:0px auto; width:900px; height:43px;"><!--用来居中导航条-->
<img src="left.gif" style="float:left" alt="" /><!--导航条左边图片-->
<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="#">HR专区</a></li>
<li><a href="#">移动求职通</a></li>
</ul>
<img src="right.gif" style="float:left" alt=""/><!--导航条右边图片-->
</div>
</body>
</html>

我们做的导航条是基于ul和li标签，所以我们得对这两个标签的样式进行修改，以符合我们导航条需要。

先来看样式第一句：

ul{ background-image:url(midbg.gif); background-repeat:repeat-x; height:43px; float:left; margin-left:0px; padding-left:70px;padding-right:100px; list-style-type:none; margin:0px 0px;}

关键的地址在于ul背景图片设置，repeat-x表示，x轴横向平铺这个图片，意思ul有多宽，这个平铺就有多宽，如下效果：