当前位置： 首页 > news >正文

带侧边栏布局：带导航的网页

news 2026/2/11 5:07:27

目录

任务描述

相关知识

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)的样式为：
    1. 宽度(width)为250px；
    2. 背景颜色(background-color)为#111；
    3. 文字颜色(color)为#fff；
    4. 顶部内边距(padding-top)为20px。
  • 设定侧边栏链接(.sidebar a)的样式为:
    1. 链接的内边距(padding)的上下填充是10px, 左右填充是20px;
    2. 取消链接的下划线(text-decoration);
    3. 链接文字的颜色（color)为#ccc;
    4. 将链接转换为块级元素（display)。
  • 设定导航栏(nav)的样式为：
    1. 背景颜色(background-color)为#333；
    2. 内边距(padding)的上下左右填充都为10px。
  • 设定导航链接(nav a)的样式为:
    1. 导航链接文字的颜色（color)为#ccc;
    2. 链接的内边距(padding)的上下左右填充都为20px；
    3. 取消链接的下划线(text-decoration);
<!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>

相关文章：

带侧边栏布局：带导航的网页

目录 任务描述 相关知识 HTML(HyperText Markup Language) CSS&#xff08;Cascading Style Sheets&#xff09;&#xff1a; 编程要求 任务描述 在本关中&#xff0c;你的任务是创建一个带侧边栏和导航的网页布局。这种布局通常用于网站或应用程序&#xff0c;其中侧边栏…...

编程日记 2024/6/15 20:05:29

react学习-redux快速体验

1.redux是用于和react搭配使用的状态管理工具&#xff0c;类似于vue的vuex。redux可以不和任何框架绑定&#xff0c;独立使用 2.使用步骤 &#xff08;1&#xff09;定义一个reducer函数&#xff08;根据当前想要做的修改返回一个新的状态&#xff09; &#xff08;2&#xff0…...

编程日记 2024/6/15 20:03:27

基于flask的网站如何使用https加密通信-问题记录

文章目录 项目场景&#xff1a;问题1问题描述原因分析解决步骤解决方案 问题2问题描述原因分析解决方案 参考文章 项目场景&#xff1a; 项目场景&#xff1a;基于flask的网站使用https加密通信一文中遇到的问题记录 问题1 问题描述 使用下面的命令生成自签名的SSL/TLS证书和…...

编程日记 2024/6/15 20:02:26

记C#优化接口速度过程

前提摘要 首先这个项目是接手的前一任先写的项目&#xff0c;接手后&#xff0c;要求对项目一些速度相对较慢的接口进行优化&#xff0c;到第一个速度比较慢的接口后&#xff0c;发现单接口耗时4-8秒&#xff0c;是的&#xff0c;请求同一个接口&#xff0c;在参数不变的情况下…...

编程日记 2024/6/15 19:59:23

windows环境如何运行python/java后台服务器进程而不显示控制台窗口

1.通常我们在windows环境下使用Java或Python语言编写服务器程序&#xff0c;都希望他在后台运行&#xff0c;不要显示黑乎乎的控制台窗口&#xff1a; 2.有人写了一个bat文件: cd /d D:\lottery\server && python .\main.py 放到了开机自启动里&#xff0c;可是开机的…...

编程日记 2024/6/15 19:58:22

记周末百度云防御CC攻击事件

今天一早&#xff0c;收到百度智能云短信提醒&#xff0c;一位客户的网站遭遇了CC攻击。 主机吧赶紧登陆客户网站查看&#xff0c;是否正常&#xff0c;看是否需要通知客户。 结果打开正常&#xff0c;看情况并没什么影响&#xff0c;那就等攻击结果了再看吧。 下午的时候&am…...

编程日记 2024/6/15 19:57:20

vue中v-bind控制class和style

当使用v-bind指令控制class和style时&#xff0c;可以通过动态绑定的方式根据不同的条件来添加或移除class&#xff0c;以及改变元素的样式。 1. 控制class 通过v-bind:class可以动态绑定class属性。可以使用对象语法、数组语法或者计算属性来实现。 对象语法&#xff1a;使用…...

编程日记 2024/6/15 19:56:19

【面试经典150题】【双指针】392. 判断子序列

题目链接 https://leetcode.cn/problems/is-subsequence/?envTypestudy-plan-v2&envIdtop-interview-150 题解思路 首先如果s的长度大于t的长度&#xff0c;那么s肯定不是t的子序列如果s的长度等于t的长度&#xff0c;那么st的情况下s才是t的子序列如果s的长度小于t的长…...

编程日记 2024/6/15 19:53:15

禁用PS/Photoshop等一系列Adobe旗下软件联网外传用户数据操作

方案一&#xff1a; 下载火绒杀毒&#xff0c;在联网请求上禁用Adobe软件的联网请求&#xff0c;甚至还可以额外发现哪些是它要想要偷偷摸摸干的。 方案二&#xff1a; 最后注意&#xff1a; 用盗版软件只是获得了使用权&#xff01;...

编程日记 2024/6/15 19:52:14

C语言猜输赢游戏

目录 开头游戏的程序游戏的流程图结尾 开头 大家好&#xff0c;我叫这是我58&#xff0c;现在&#xff0c;请你看一下下面的游戏程序。 游戏的程序 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <Windows.h> int main() {int i 1;int ia 0…...

编程日记 2024/6/15 19:47:10

Rust 异步 trait 的实现困难

在 Rust 中&#xff0c;异步编程是使用 async/await 语法来实现的。与传统的同步编程不同&#xff0c;异步编程涉及到的特性较多&#xff0c;其中一个重要的特性是异步 trait。 异步 trait 是具有异步方法的 trait。在 Rust 中&#xff0c;trait 方法默认是同步的&#xff0c;…...

编程日记 2024/6/15 19:46:08

腾讯云和windows11安装frp，实现内网穿透

一、内网穿透目的 实现公网上&#xff0c;访问到windows上启动的web服务 二、内网穿透的环境准备 公网服务器、windows11的电脑、frp软件(需要准备两个软件&#xff0c;一个是安装到公网服务器上的&#xff0c;一个是安装到windows上的) frp下载地址下载版本 1.此版本(老版…...

编程日记 2024/6/15 19:45:07

Solidity智能合约事件(event)

文章目录 Solidity智能合约事件(event)什么是event事件event有什么作用日志内容位于区块链的什么地方&#xff1f;【重要】以太坊交易获取如何在 Solidity 中使用事件&#xff1f;参考 Solidity智能合约事件(event) 什么是event EVM有一个日志功能&#xff0c;用于将数据“写…...

编程日记 2024/6/15 19:44:06

第2章 Rust初体验7/8：错误处理时不关心具体错误类型的下划线：提高代码可读性：猜骰子冷热游戏

讲动人的故事，写懂人的代码 2.6.6 用as进行类型转换：显式而简洁的语法 贾克强：“大家在查看Rust代码时，可能会注意到这一句。在这里，如果我们不使用as i32，编译器会报错，因为它在u32中找不到abs()方法。这是因为prev和sum_of_two_dice都是u32类型，u32类型并不支持abs(…...

编程日记 2024/6/15 19:43:05

大话C语言：第24篇 预处理

1 C语言编译流程 C语言的编译流程包括&#xff1a; 预编译&#xff1a;将.c 中的头文件展开、宏展开&#xff0c;生成的文件是.i 文件。gcc指令&#xff1a;gcc -E file.c -o file.i 编译&#xff1a;将预处理之后的.i 文件生成 .s 汇编文件。gcc指令&#xff1a;gcc -S file…...

编程日记 2024/6/15 19:42:03

React如何配置路由

ReactTs配置路由 安装依赖 npm i react-router-dom在routers下面创建index.tsx import { RouteObject } from react-router-dom import React from react import PageA from /views/PageA import PageB from /views/PageB const routes: RouteObject[] [{path: /,element: …...

编程日记 2024/6/15 19:39:00

MAC使用初体验+入门

之前从来没有使用过MAC&#xff0c;这次拿到了一个 不得不说MAC度过适应期后用起来很舒服&#xff0c;续航长&#xff0c;触控板舒服&#xff0c;轻薄无比 我前期过度的时候记录的一部分快速指南&#xff0c;掌握如下一些电脑常识 可以做到正常使用了 基本操作 在 Mac 上使用桌…...

编程日记 2024/6/15 19:37:58

Go TOKEN机制与跨域处理方式

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…...

编程日记 2024/6/15 19:36:57

JavaScript 的运行

语法分析预编译解释执行 1.语法分析 语法分析是 JavaScript 引擎处理代码的第一步。 在这个阶段&#xff0c;引擎将源代码字符串分解成一个个的词素&#xff08;token&#xff09;&#xff0c;这些词素是语言中有意义的最小单元&#xff0c;如关键字、变量名、操作符等。 语…...

编程日记 2024/6/15 19:35:56

园区地图导航系统：技术原理、部署方案与智能化应用解析

随着智能化时代的到来&#xff0c;园区管理面临诸多挑战。维小帮园区地图导航系统&#xff0c;采用前沿技术&#xff0c;为园区提供全面的导航解决方案&#xff0c;极大提升了园区管理效率和用户体验。 一、园区地图导航系统的功能特点 维小帮园区地图导航系统&#xff0c;以其…...

编程日记 2024/6/15 19:33:53

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/12/1 19:23:04

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/2/8 12:24:34

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2026/1/30 10:10:55

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/30 3:28:14

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2026/1/24 10:07:40

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/2/6 9:48:02

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2026/2/5 3:09:56

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2026/2/1 6:30:04

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21