圆角导航栏的制作

最新推荐文章于 2022-08-22 22:04:51 发布

都说没想好

最新推荐文章于 2022-08-22 22:04:51 发布

阅读量1.3k

点赞数

分类专栏： web前端（慕课网教程操作+笔记）文章标签： web 前端导航栏菜单圆角

本文链接：https://blog.csdn.net/u013045370/article/details/51321727

版权

本文介绍了如何通过背景图片来制作圆角导航栏。首先准备一张120px * 60px的图片，然后设置导航栏的高度、底边、文字位置以及左侧外边距。接着，移除背景色，为a标签添加圆角图片作为背景，并调整其宽度。同时，为li标签添加间隔。为选中和悬停状态的导航项应用背景位置偏移，以改变圆角效果。最后，针对不同浏览器可能存在的像素不一致问题进行调整。

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

通过背景图片来实现圆角导航栏的制作，先准备一张图片，120px * 60px 的图片，上下颜色各30px, 有明显圆角：

给上一篇文章中的导航栏做一些修改：

将ul的高度设为50px,设置一条黑色底边2px,再将li向下移动20px使得文字贴近底边(用margin-top:20px)。

再设置一下ul的左边距30px，使得左边突出一些（margin-left：30px）。

<!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>
*{margin:0;padding:0;font-size:20px}
ul{list-style:none;height:50px;border-bottom:#000000 solid;paddi