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

Bczheng1

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

阅读量825

点赞数 3

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

于 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有多宽，这个平铺就有多宽，如下效果：

ul也设置float:left是因为，它的左右还要带个img标签，左右边角封闭，当然你如果不需要这个圆角矩形的效果，不带img图片，你也可以不用设置float:left。

我们在前面也看到了li项，它不是并排的，也就是每个项另一行，所以我们都设置li float:left

li{ background-image:url(separate.gif); height:43px; width:100px; background-repeat:no-repeat; float:left; text-align:center; line-height:43px;}

这里的li背景图片是分隔符，我们只需要每项前有一个就行，所以no-repeat不平铺，实现了有分隔图片的效果。

text-align:center; line-height:43px; 保证它里面的a标签元素，是左右上下居中。

效果：

现在这个效果差不多了，接下来就是一些小更改，比如去掉a标签的下划线，设置一下字体颜色大小之类的：

a{ text-decoration:none; color:White; font-weight:bold; font-size:14px;}

a:hover{ color:Black}

OK，最终完整效果：

源文件就不上传了，你们可以把文章里那几张图片另存为，然后试一下。

Bczheng1

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
5.前端入门之制作一个导航条

ul也设置float:left是因为，它的左右还要带个img标签，左右边角封闭，当然你如果不需要这个圆角矩形的效果，不带img图片，你也可以不用设置float:left。用ps的切片工具，把图片的两边取下来，还有中间也要取一部分（不是文字区域），分隔线的图片也取下来，那么就会有四张图片，如下：（它们的高度都是一致的）这里的li背景图片是分隔符，我们只需要每项前有一个就行，所以no-repeat不平铺，实现了有分隔图片的效果。源文件就不上传了，你们可以把文章里那几张图片另存为，然后试一下。
复制链接

扫一扫