文章目录
前言具体操作总结前言
实验目的：（1）掌握有序列表和无序列表，在导航菜单中的工作过程； （2）导航菜单能够根据鼠标的悬浮进行样式的变化。 实验内容：根据要求完成以下网页菜单：1、使用无序列表和超链接完成菜单；2、鼠标悬停菜单后，菜单样式发生变化。
具体操作
导航菜单的制作.css
ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: white;}li {float: left;}a {border:1px solid black;width: 50%;margin: 10px;padding: 8px 8px;text-align: center;line-height: 35px;font-size: 30px;display: block;color: black;text-decoration: none;/*去除下划线*/}/* 将鼠标悬停在链接上 */a:hover {color: green;border-style: none;}
导航菜单的制作.html
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Title</title><link rel="stylesheet" href="../css/导航菜单的制作.css"></head><body><ul><li><a href="#Home">首页Home</a></li><li><a href="#SNS">社区SNS</a></li><li><a href="#Skill">技能Skill</a></li><li><a href="#Science">科学Science</a></li></ul></body></html>
目录结构
实验结果
总结
（1）掌握有序列表和无序列表，在导航菜单中的工作过程； （2）导航菜单能够根据鼠标的悬浮进行样式的变化。
