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

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

news 2025/7/7 10:29:54

目录

任务描述

相关知识

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

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/7/6 23:16:14

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/6/18 8:29:05

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/7/5 16:03:34

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/5 20:48:37

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/7/7 6:52:27

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/7/6 21:12:40

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/7/4 2:55:01

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/7/4 19:12:28

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/6/21 12:56:10

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57