html中一级菜单的制作

最新推荐文章于 2023-07-11 09:00:06 发布

空之晴

最新推荐文章于 2023-07-11 09:00:06 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html 源代码 css

本文链接：https://blog.youkuaiyun.com/u012294350/article/details/38535989

html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS创建一级菜单。通过HTML的`<ul>`和`<li>`元素创建列表，结合CSS设置样式，包括去除列表点、设定链接样式、添加边框等，实现简洁的一级导航菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1） html中一级菜单的制作

html源代码：

<!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=gb2312" />
<title>一级菜单</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="menu">
   <ul>
       <li><a href="#">列表1</a></li>
       <li><a href="#">列表2</a></li>
       <li><a href="#">列表3</a></li>
       <li><a href="#">列表4</a></li>
       <li><a href="#">列表5</a></li>
   </ul>
</div>
</body>
</html>

css样式：

/*第二步，设置全局样式*/
body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 18px;
   line-height: normal;
}

/*第三步，设置ul的样式*/
#menu ul { /*消除列表前的点和四周的空隙*/
   list-style-type: none;
   margin: 0px;
   padding: 0px;
}

/*第四步，设置a的样式*/
#menu a { /*消除a的下划线*/
   text-decoration: none;
}
a:hover { /*设置鼠标划过链接文字的颜色*/
   color:#CCFF66;
}

/*第五部，设置menu的宽及边框*/
#menu { /*其实就是整个列表的外边框*/
   border: 1px solid #CCCCCC;
   width: 100px;
}

/*第六步，设置li列表的背景色及内边框*/
#menu li {
   background-color:#eeeeee;
   height: 26px;
   padding-top: 0px;
   padding-right: 20px;
   padding-bottom: 0px;
   padding-left: 20px;
   line-height: 26px;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-bottom-color: #CCCCCC;
}