第1关：带侧边栏布局：带导航的网页
<!DOCTYPE html>
<html>
<head>
<title>带侧边栏布局：带导航的网页</title>
<meta charset="UTF-8">
<style>
/* 设置页面整体样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
}
/* 设置内容区样式 */
.content {
flex: 1; /* 自动填充剩余空间 */
padding: 30px; /* 内容区内边距 */
}
/* ******************** BEGIN ******************** */
/* 设置侧边栏样式 */
.sidebar {
width: 250px;
background-color: #111;
color: #fff;
padding-top: 20px;
}
/* 设置侧边栏链接样式 */
.sidebar a {
padding: 10px 20px;
text-decoration: none;
color: #ccc;
display: block;
}
/* 导航样式 */
nav {
background-color: #333;
padding: 10px;
}
/* 导航链接样式 */
nav a {
color: #ccc;
padding: 20px;
text-decoration: none;
}
/* ******************** END ******************** */
</style>
</head>
<body>
<!-- 侧边栏 -->
<div class="sidebar">
<a href="#">Sidebar Link 1</a>
<a href="#">Sidebar Link 2</a>
<a href="#">Sidebar Link 3</a>
<!-- 根据需要添加更多侧边栏链接 -->
</div>
<!-- 内容区 -->
<div class="content">
<!-- 导航 -->
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<!-- 根据需要添加更多导航链接 -->
</nav>
<!-- 主要内容 -->
<h1>Main Content</h1>
<p>This is the main content of the page.</p>
</div>
</body>
</html>
第2关：相对与绝对布局：悬浮的提示框页面
<!DOCTYPE html> <!-- 定义HTML5文档类型 -->
<html>
<head>
<title>相对与绝对布局</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif; /* 设置字体样式为Arial或sans-serif */
padding: 20px; /* 设置页面内边距为20像素 */
}
.container {
position: relative; /* 设置相对定位 */
width: 300px; /* 设置容器宽度为300像素 */
margin: 0 auto; /* 设置外边距使其水平居中 */
}
.trigger {
background-color: #3498db; /* 设置背景颜色为蓝色 */
color: #fff; /* 设置文字颜色为白色 */
padding: 10px 20px; /* 设置内边距 */
border: none; /* 移除边框 */
cursor: pointer; /* 设置鼠标指针样式为手型 */
}
/* ******************** BEGIN ******************** */
.popup {
display: none;
position: absolute;
z-index: 1;
background-color: #fff; /* 设置背景颜色为白色 */
border: 1px solid #ccc; /* 设置边框 */
padding: 10px; /* 设置内边距 */
width: 200px; /* 设置宽度为200像素 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
top: 100%; /* 位于触发元素下方 */
left: 50%; /* 位于触发元素水平居中 */
transform: translateX(-50%); /* 水平居中 */
}
.trigger:hover + .popup {
display: block;
}
/* ******************** END ******************** */
</style>
</head>
<body>
<div class="container">
<button class="trigger">Hover me for a tooltip</button> <!-- 按钮触发显示tooltip -->
<div class="popup">This is a tooltip!</div> <!-- tooltip内容 -->
</div>
</body>
</html>
第3关：瀑布流布局：图片浏览页面
ACB
