一、实验内容
- 编程实现以下页面（点击右边导航栏时注意导航栏变化）
【注意：请用HTML中的列表+CSS实现】
下拉菜单靠左，侧边导航靠右
二、实验代码及成品
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css1.css">
</head>
<body>
<div style="float: right">
<h1 style="margin: 10px">侧边导航</h1>
<ul>
<li><a href="#主页">主页</a></li>
<li><a href="#新闻">新闻</a></li>
<li><a href="#联系">联系</a></li>
<li><a href="#关于">关于</a></li>
</ul>
<br><p>背景颜色添加到链接中显示链接的区域</p>
<br><p>注意,整个区域是可点击的链接,而不仅仅是文本。</p>
</div>
<div>
<h1 style="margin: 10px">下拉菜单</h1>
<p style="font-size: 17px;margin: 10px">鼠标移动到按钮上打开下拉菜单。</p>
<div class="dropdown" style="margin: 10px">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<ul>
<li><a href="https://www.w3school.com.cn/index.html">菜单 1</a></li>
<li><a href="https://www.w3school.com.cn/index.html">菜单 2</a></li>
<li><a href="https://www.w3school.com.cn/index.html">菜单 3</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
*{
margin :0}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
