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

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

news 文章来源：https://blog.csdn.net/m0_73614626/article/details/139692523 2025/5/7 7:21:13

目录

任务描述

相关知识

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

【数据结构】第十六弹---C语言实现希尔排序

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 目录 1、希尔排序( 缩小增量排序 ) 1.1、预排序实现 1.2、希尔排序代码实现 1.3、代码测试 1.4、时空复杂度分析 1.5、性能比较 总结 上一弹我们…...

编程日记 2024/6/15 19:31:50

用Python向Word文档添加页眉和页脚

用Python向Word文档添加页眉和页脚 添加页眉和页脚效果代码 添加页眉和页脚 在本文中&#xff0c;我们将用python向文档中添加页眉和页脚。 效果 添加前的文档&#xff1a; 添加页眉和页脚后&#xff1a; 代码 from docx import Documentdef add_header_footer(doc_path…...

编程日记 2024/6/15 19:30:49

REST风格

黑马程序员Spring Boot2 文章目录 1、REST简介1.1 优点1.2 REST风格简介1.3 注意事项 2、RESTful入门案例 1、REST简介 1.1 优点 隐藏资源的访问行为&#xff0c;无法通过地址的值对资源适合中操作书写简化 1.2 REST风格简介 按照RST风格访问资源时使用行为动作区分对资源进…...

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

Mongodb连接测试程序【Java版】

先导入Maven依赖 <dependency><groupId>org.mongodb</groupId><artifactId>mongodb-driver-sync</artifactId><version>4.9.0</version> </dependency>import com.mongodb.MongoClientSettings; import com.mongodb.MongoCred…...

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

SM3国密算法：优秀的密码散列函数

随着信息技术的飞速发展&#xff0c;信息安全已成为全球关注的焦点。密码学作为保障信息安全的核心技术&#xff0c;其重要性不言而喻。中国在密码学领域也取得了显著的成就&#xff0c;其中SM3国密算法就是中国自主设计并推广使用的密码学标准之一。 一、SM3算法概述 SM3算法…...

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

【安卓】在安卓中使用HTTP协议的最佳实践

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…...

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

Spring Boot集成antlr实现词法和语法分析

1.什么是antlr&#xff1f; Antlr4 是一款强大的语法生成器工具&#xff0c;可用于读取、处理、执行和翻译结构化的文本或二进制文件。基本上是当前 Java 语言中使用最为广泛的语法生成器工具。Twitter搜索使用ANTLR进行语法分析&#xff0c;每天处理超过20亿次查询&#xff1…...

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

多线程中run（）和start（）的区别

我们知道&#xff0c;在多线程中 Thread thread new Thread(runnable); thread.start();以及 thread.run();都可以执行runnable中run方法下的代码&#xff0c;但是二者又有所不同 下面给出一段代码用以体现二者的区别&#xff1a; 以下代码中&#xff0c;通过thread.start()启…...

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

Nginx基础理论

Nginx最为最受欢迎的反向代理和负载均衡服务器&#xff0c;被广泛的应用于互联网项目中。这不仅仅是因为Nginx本身比较轻量&#xff0c;更多的是得益于Nginx的高性能特性&#xff0c;以及支持插件化开发&#xff0c;为此&#xff0c;很多开发者或者公司基于Nginx开发出了众多的…...

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

【QT5】＜应用＞ 小游戏：贪吃蛇

文章目录 一、项目要求 二、需求分析 三、实现效果 四、代码 一、项目要求 【1】主要实现&#xff1a;游戏界面存在一条蛇&#x1f40d;&#xff0c;使用键盘wsad或者↑↓←→键盘可以控制蛇的行走方向。同时界面中会随机出现食物&#xff0c;蛇可以吃食物&#xff0c;然后…...

编程日记 2024/6/15 19:13:31