目录
任务描述
相关知识
HTML(HyperText Markup Language)
CSS（Cascading Style Sheets）：
编程要求
任务描述
在本关中，你的任务是创建一个带侧边栏和导航的网页布局。这种布局通常用于网站或应用程序，其中侧边栏用于显示重要链接、菜单项或其他导航元素，而主内容区域用于显示具体页面内容。导航栏通常位于页面的顶部，提供网站的主要导航链接。
完成任务后之后，基本页面效果如下：
相关知识
HTML(HyperText Markup Language)
使用HTML定义页面的结构，包括侧边栏、导航栏和主内容区域。并创建链接（<a>标签）用于导航。HTML页面代码如下：
<!DOCTYPE html>
<html>
<head><title>带侧边栏布局：带导航的网页</title><meta charset="UTF-8"><link rel="stylesheet" href="touge.css">
</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>CSS（Cascading Style Sheets）：
- 使用CSS为页面的不同部分（侧边栏、导航栏、主内容区域）设计样式，包括背景颜色、字体样式、边距等。
- 使用CSS Flexbox布局实现网页的整体布局，包括侧边栏和主内容区域的定位和排列。
- 使用CSS Position属性来定位侧边栏和导航栏，使其固定在页面的位置。
CSS具体实现代码如下：
/* 设置侧边栏样式 */
.sidebar {width: 250px; /* 侧边栏宽度 */background-color: #111; /* 侧边栏背景颜色 */color: #fff; /* 文字颜色 */padding-top: 20px; /* 顶部内边距 */
}/* 设置侧边栏链接样式 */
.sidebar a {padding: 5px 10px; /* 链接的内边距 上下填充是5px 左右填充是 10px */text-decoration: none; /* 取消下划线 */color: #ccc; /* 链接文字颜色 */display: block; /* 将链接转换为块级元素 */
}/* 导航样式 */
.nav { /* 注意这里我们使用了.nav而不是一个长的类名 */background-color: #333; /* 导航背景颜色 */padding: 20px; /* 导航内边距上下左右填充都是20px */
}/* 导航链接样式 */
.nav a { /* 假设.nav是导航栏的类名 */color: white; /* 导航链接文字颜色 */padding: 10px 20px; /* 导航链接内边距 */text-decoration: none; /* 取消下划线 */
}
编程要求
请仔细阅读右侧代码，结合相关知识，在 Begin-End区域内进行代码补充，完成CSS对页面的侧边栏和导航栏样式设计。样式要求为：
- 设定侧边栏(
.sidebar)的样式为：- 宽度(width)为
250px； - 背景颜色(background-color)为
#111； - 文字颜色(color)为
#fff； - 顶部内边距(padding-top)为
20px。
- 宽度(width)为
- 设定侧边栏链接(
.sidebar a)的样式为:- 链接的内边距(padding)的上下填充是10px, 左右填充是20px;
- 取消链接的下划线(text-decoration);
- 链接文字的颜色（color)为
#ccc; - 将链接转换为块级元素（display)。
- 设定导航栏(
nav)的样式为：- 背景颜色(background-color)为
#333； - 内边距(padding)的上下左右填充都为
10px。
- 背景颜色(background-color)为
- 设定导航链接(
nav a)的样式为:- 导航链接文字的颜色（color)为
#ccc; - 链接的内边距(padding)的上下左右填充都为
20px； - 取消链接的下划线(text-decoration);
- 导航链接文字的颜色（color)为
<!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 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>
