如何快速编写纯CSS菜单？制作CSS精美菜单优化精简代码详细教程

最新推荐文章于 2024-08-24 09:00:00 发布

qq_37344648

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量996

点赞数 2

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_37344648/article/details/126587610

版权

本文详细介绍了如何使用CSS快速创建一个响应式的导航菜单，包括设置HTML结构，应用基本CSS样式，设计精美效果，以及实现鼠标悬停时背景色的变化。通过这些步骤，可以创建出适应各种浏览器且具有自动调整功能的菜单，同时文章指出在实际应用中还需考虑添加超链接并去除下划线。

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

第一步：编写html菜单文字部分：

这里我们就用ul无序列表的方式写一个简单的菜单格式，并给ul标签加一个自定义的类“daohang”（这个可以修改，只要css调用和这里的一致即可），代码如下：

<ul class="daohang">
<li>网站首页</li>
<li>业务介绍</li>
<li>产品介绍</li>
<li>服务介绍</li>
<li>关于我们</li>
</ul>

第二步：给导航设置css样式：

我们一般用的导航都是横向的，现在我们就用简单的一段代码设置导航为横向显示，代码如下：

<style>
.daohang{list-style:none; padding:0px; margin:0px; width:100%;}
.daohang li{float:left;}
</style>

第三步：设置导航的精美效果：

<style>
.daohang{list-style:none; padding:0px; margin:0px; width:100%;}
.daohang li{float:left;}
.daohang li{display:block; width:19.5%; padding:10px 0px; background:#FF0000; color:#FFFFFF; text-align:center; margin:0.25%; font-size:2em;}  
</style>

注释：
display:block;将li模块设置为方块；
width:19.5%，这里设置li宽度为19.5%，属于相对宽度，是为了适用各种浏览器的要求；
padding:10px 0px; 就是在li这个方块盒子中，顶部预留10个像素，左右不做任何预留值的设定；
background:#FF0000; color:#FFFFFF; 这个好理解，背景颜色和文字颜色；
text-align:center; li方形盒子中文字水平居中；
margin:0.25%; 每个li方形盒子中间间隔0.25%；用%就是为了自适应，也为了后续用小数的方式好精确调整；
font-size:2em; 这个很重要，不直接写PX就是为了让字体随着浏览器大小变化而自动变化，以适用于各类浏览器；

第四步：设置导航的鼠标经过自动变化背景色效果：

导航一般都用标签做超链接，常用的鼠标经过效果，写法大部分是给标签赋值，如 a:hover{}；
在这里，我们没有写标签，也是可以实现,只需要用到hover标签即可，如下：

<style>
.daohang{list-style:none; padding:0px; margin:0px; width:100%;}
.daohang li{float:left;}
.daohang li{display:block; width:19.5%; padding:10px 0px; background:#FF0000; color:#FFFFFF; text-align:center; margin:0.25%; font-size:2em;}
.daohang li:hover{background:#FFFFFF; color:#000000;}
</style>

这里表达的以上就是hover可以在任何模块下适用，只要有鼠标行为都可以，不局限有a标签；

整体设计之后，全部代码如下：

<!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>杨永春老师测试文档