HTML 与 CSS 互动指南：让网页动起来

<nav>  <ul>    <li><a href="#">Home</a></li>    <li><a href="#">About</a></li>  </ul></nav>

nav ul li a {  color: black;}nav ul li a:hover {  color: red;  text-decoration: underline;}

<div id="panel" style="display: none;">  <h1>Hello World</h1></div>

#panel {  display: flex;  align-items: center;  justify-content: center;  background-color: yellow;  height: 200px;}#show-panel-button {  margin: 10px;  padding: 5px;  border: 1px solid black;  background-color: white;  cursor: pointer;}

document.getElementById("show-panel-button").addEventListener("click", function() {  document.getElementById("panel").style.display = "flex";});

<div class="draggable" draggable="true">  <p>Drag me</p></div><div class="drop-zone"></div>

.draggable {  border: 1px dashed black;  padding: 10px;  margin: 10px;}.drop-zone {  border: 1px dashed blue;  padding: 10px;  margin: 10px;}

// Drag and drop functionalityfunction dragStart(event) {  event.dataTransfer.setData("text/plain", event.target.id);}function dragOver(event) {  event.preventDefault();}function drop(event) {  event.preventDefault();  var data = event.dataTransfer.getData("text/plain");  event.target.appendChild(document.getElementById(data));}