按钮 - II
Coddy 侧边栏|前端项目 课程的第 11 课,共 13 课。
挑战
简单为 #closeSidebarBtn 和 #openSidebarBtn 设置样式:
1. 设置你喜欢的颜色。
2. 将光标设置为指针。
3. 悬停时更改不透明度(不能为 1)。
只为 #openSidebarBtn 设置样式:
1. 设置你喜欢的外边距。
亲手试试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Mobile Sidebar</title>
</head>
<body>
<button id="openSidebarBtn">Open</button>
<div id="sidebar" class="sidebar">
<button id="closeSidebarBtn">Close</button>
<!-- 在这里添加侧边栏内容 -->
<p>Home</p>
<p>About</p>
<p>Services</p>
<p>Contact</p>
</div>
<script src="script.js"></script>
</body>
</html>
侧边栏|前端项目中的所有课
自己练习: Web 在线编辑器