博客页面---前端

目录

主页

HTML

CSS

文章详细页面

HTML

CSS

登录页面

HTML

CSS

文章编辑页

HTML

CSS


这只是前端的页面组成,还没有接入后端,并不是完全体

主页

HTML

<!DOCTYPE html>
<!-- <html lang="en"> -->
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>墨轩博客页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/blog.css">
</head>
<body><!-- 导航栏 --><div class="nav"><!-- logo图片 --><img src="image/logo.jpg" alt="" width="50px"><span class="title">我的博客系统</span><span class="spacer"></span><!-- 导航栏 --><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a><a href="#">注销</a></div><!-- 页面主体 --><div class="container"><!-- 左侧个人信息 --><div class="container-left"><div class="card"><img src="image/蕾姆.jpg" alt=""><h2>墨轩</h2><a href="#">github链接</a><div class="counter"><span>文章</span><span>分类</span></div><div class="counter"><span>2</span><span>3</span></div></div><!-- 右侧个人信息 --></div><div class="container-right"><div class="blog">这是我的第一篇文章</div><div class="date">2024-3-27 20:20</div><div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div><a href="blog_detail.html">查看全文 &gt;&gt; </a><!-- &gt;是html的> 正常的>无法之间写入 --><div class="blog">这是我的第一篇文章</div><div class="date">2024-3-27 20:20</div><div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div><a href="#">查看全文 &gt;&gt; </a><div class="blog">这是我的第一篇文章</div><div class="date">2024-3-27 20:20</div><div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div><a href="#">查看全文 &gt;&gt; </a><div class="blog">这是我的第一篇文章</div><div class="date">2024-3-27 20:20</div><div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div><a href="#">查看全文 &gt;&gt; </a><div class="blog">这是我的第一篇文章</div><div class="date">2024-3-27 20:20</div><div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div><a href="#">查看全文 &gt;&gt; </a><div class="blog">这是我的第一篇文章</div><div class="date">2024-3-27 20:20</div><div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div><a href="#">查看全文 &gt;&gt; </a><div class="blog">这是我的第一篇文章</div><div class="date">2024-3-27 20:20</div><div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div><a href="#">查看全文 &gt;&gt; </a></div></div>
</body>
</html>

CSS

html,body{/* 让html和body占满浏览器窗口 */height: 100%;width: 100%;background-image: url(../image/风景图.jpg);/* background-repeat: no-repeat; */background-size: cover;
}.nav{width: 100%;height: 50px;background-color: rgba(50, 50, 50,0.3);color: white;/* 开启弹性布局 */display: flex;/* 水平居中 */align-items: center;
}.nav img{/* 将图片设为圆的 */border-radius: 50px;/* 左侧间距 */margin-left: 30px;/* 右侧间距 */margin-right: 20px;
}/* 用于隔开我的博客和主页 */
.nav .spacer{width: 78%;
}.nav a{color: white;/* 上下间隔0 左右6px */padding: 0 6px;
}.container{width: 1000px;/* 使用这个函数 -直接必须有空格 *//* 因为是100% 导航栏自带50px 再用100% 会多出50px 所已要减去多出来的50px */height: calc(100% - 100px);margin: 0 auto;/* 让两个div能在同一行 */display: flex;/* 元素之间留有空隙 */justify-content: space-between;
}.container-left{height: 30%;width: 200px;}.container-right{height: 100%;width: 750px;background-color: rgba(255, 255, 255, 0.5);/* 边框圆角 */border-radius: 10px;overflow: auto;
}.card{background-color: rgba(255,255,255,0.5);/* 内边距距离 */padding: 30px;/* 边框圆角 */border-radius: 10px;
}/* 用户图片 */
.card img{width: 140px;height: 140px;border-radius: 70px;
}/* 用户昵称 */
.card h2{text-align: center;/* padding: 10px; */
}/* 链接属性 */
.card a{/* 开启弹性布局后 居中 */display: block;text-align: center;
}/* 文章属性 */
.card .counter{/* 开启弹性布局 */display: flex;text-align: center;/* 文章与分类分开 */justify-content: space-around;
}/* 因为右侧文章会变换 所有右侧的css单独出来 */

右侧文章只要这个页面有,所以css是单独出来的

/* 右侧个人信息栏 */
.container-right{/* 一个em为一个字的长度 */text-indent: 3em;/* 距离四个边都有20px的距离 */padding: 20px;
}.blog{text-align: center;/* 字体大小 */font-size: 37px;/* 行间距 上下5 左右0 */padding: 5px 0;/* 字体粗细 */font-weight: 600;
}.date{text-align: center;font-size: 20px;color: grey;/* 行间距 上下5 左右0 */padding: 5px 0;
}.container-right a{/* 设置成块级元素 */display: block;width: 150px;height: 30px;/* 块级元素居中 上下10 左右自适应 */margin: 10px auto;/* 边框 粗细 黑色 实习 */border: 2px black solid;text-align: center;color: black;/* 去除下划线 */text-decoration: none;/* 颜色过渡 1s */transition: all 1s;
}/* 伪类选择器 鼠标放上去变色 */
.container-right a:hover{background-color: black;color: white;
}

文章详细页面

HTML

里面包含多个css文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客详情页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/blog.css"><link rel="stylesheet" href="css/blog_detail.css">
</head>
<body><!-- 导航栏 --><div class="nav"><!-- logo图片 --><img src="image/logo.jpg" alt="" width="50px"><span class="title">我的博客系统</span><span class="spacer"></span><!-- 导航栏 --><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a><a href="#">注销</a></div><!-- 页面主体 --><div class="container"><!-- 左侧个人信息 --><div class="container-left"><div class="card"><img src="image/蕾姆.jpg" alt=""><h2>墨轩</h2><a href="#">github链接</a><div class="counter"><span>文章</span><span>分类</span></div><div class="counter"><span>2</span><span>3</span></div></div><!-- 右侧个人信息 --></div><div class="container-right"><div class="blog-content"><h3>我的第一篇博客</h3><div class="date">2024-3-27 22:33</div><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p></div></div></div>
</body>
</html>

CSS

.blog-content h3{text-align: center;
}

登录页面

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/login.css">
</head>
<body><!-- 导航栏 --><div class="nav"><!-- logo图片 --><img src="image/logo.jpg" alt="" width="50px"><span class="title">我的博客系统</span><span class="spacer"></span><!-- 导航栏 --><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a></div><!-- 登录板块 --><div class="login-container"><div class="login-dialog"><p>登录</p><div class="row"><span>用户名</span><input type="text" id="username"></div><div class="row"><span>密码</span><input type="password" id="password"></div><div class="row"><input type="button" value="提交"id="submit"></div></div></div>
</body>
</html>

CSS

.login-container{height: calc(100% - 50px);/* 开启弹性布局 block和flex  盒子用flex */display: flex;/* 水平居中 */justify-content: center;/* 垂直居中 */align-items: center;
}.login-dialog{width: 500px;height: 300px;/* 半透明 */background-color: rgba(255,255,255,0.5);/* 圆角 */border-radius: 10px;
}.login-dialog p{font-weight: 700;font-size: 30px;text-align: center;
}.login-dialog h3{padding: 20px 0;/* 文字水平居中 */text-align: center;
}.login-dialog .row{height: 50px;display: flex;justify-content: center;align-items: center;
}.login-dialog .row span{width: 100px;font-size: 20px;font-weight: 700;
}#username, #password{/* 框大小 */width: 200px;height: 40px;font-size: 24px;/* 去掉框的边框黑线 */border: none;/* 去掉选择时的边框黑线 */outline: none;/* 输入字体的缩进 */padding-left: 5px;/* 圆角 */border-radius: 15px;
}#submit{width: 300px;height: 40px;color: black;background-color: rgba(255,255,255,0.5);border-radius: 10px;/* 去掉边框 */border: none;
}/* 点击变色 */
#submit:active{background-color: gray;
}

文章编辑页

这里需要放入editor.md,和JS文件的jquery.min.js的依赖,放入文章编辑的库

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>博客编辑页</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/blog-edit-container.css"><!-- 引入 editor.md 的依赖 --><link rel="stylesheet" href="editor.md/css/editormd.min.css" /><script src="js/jquery.min.js"></script><script src="editor.md/lib/marked.min.js"></script><script src="editor.md/lib/prettify.min.js"></script><script src="editor.md/editormd.js"></script>
</head>
<body><!-- 导航栏 --><div class="nav"><!-- logo图片 --><img src="image/logo.jpg" alt="" width="50px"><span class="title">我的博客系统</span><span class="spacer"></span><!-- 导航栏 --><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a><a href="#">注销</a></div><div class="blog-edit-container"><!-- 标题编辑区 --><div class="title"><!-- placeholder默认文字 --><input type="text" id="title" placeholder="请输入文章标题"><input type="button" id="submit" value="发布文章"></div><!-- 博客编辑区 --><div id="editor"></div></div><script>var editor = editormd("editor", {width: "100%",height: "calc(100% - 50px)",markdown: "# 在这里写下一篇博客",path: "editor.md/lib/"});</script>
</body>
</html>

CSS

.blog-edit-container{width: 1000px;height: calc(100% - 50px);margin: 0 auto;
}/* 标题编辑区 */
.title{height: 50px;/* 水平方向布局 */display: flex;/* 中间有间隙 */justify-content: space-between;/* 居中 */align-items: center;
}/* 字体 */
#title{height: 40px;width: 890px;font-size: 24px;padding-left: 5px;/* 去掉边框轮廓线 */border: none;/* 选中时轮廓线 */outline: none;border-radius: 10px;
}#submit{height: 45px;width: 100px;border-radius: 10px;color: white;background-color: coral;border: none;transition: all 0.5;
}/* 点击时变色 */
#submit:active{background-color: gray;
}#editor {/* 圆角 */border-radius: 10px;/* 因为他是复用editor的 所以现在这个块是子元素 用bc无法显示 *//* background-color: rgba(255, 255, 255, 0.8); *//* 用这个就都可以 */opacity: 80%;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/293079.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在 C#和ASP.NET Core中创建 gRPC 客户端和服务器

关于gRPC和Google protobuf gRPC 是一种可以跨语言运行的现代高性能远程过程调用 (RPC) 框架。gRPC 实际上已经成为 RPC 框架的行业标准&#xff0c;Google 内外的组织都在使用它来从微服务到计算的“最后一英里”&#xff08;移动、网络和物联网&#xff09;的强大用例。 gRP…

Multi-task Lung Nodule Detection in Chest Radiographs with a Dual Head Network

全局头增强真的有用吗&#xff1f; 辅助信息 作者未提供代码

如何区分相对路径 与 绝对路径?

在网页中有很多需要使用我们URL路径的场景&#xff0c;包括a标签的href、link标签的href、script标签的src、imag标签的src、form中的action、ajax请求的url等等等等。它们都可以使用相对路径和绝对路径来引入文件&#xff0c;那么&#xff0c;我们如何区分相对路径与绝对路径呢…

Unix中的进程和线程-2

1.进程对环境变量的操作 在Linux中&#xff0c;你可以使用以下几个函数来操作环境变量&#xff1a; getenv: 获取环境变量值。setenv: 设置或修改环境变量值。unsetenv: 删除环境变量 getenv: 参数&#xff1a;接受一个字符串作为参数&#xff0c;表示要获取的环境变量的名称。…

【刷题】数据结构——树状数组

一、简介 树状数组用于两种操作&#xff1a; 快速求前缀和 O ( l o g n ) O(logn) O(logn)修改某一个数 O ( l o g n ) O(logn) O(logn) 这两个操作也可以用其他方法结构完成&#xff1a; 用一个数组存每个数&#xff1a;操作1. O ( n ) O(n) O(n)&#xff0c;遍历前n个数求…

Kubernetes(k8s)架构原理

比如在服务器上部署一个博客应用服务,但是太过受欢迎,访问量太大,应用服务经常会挂,使用自动重启工具,并且将应用服务部署在了好几个服务器上,总算抗住了。后来又上线了商城应用服务和语言应用服务,随着应用服务变多,需求也千奇百怪,有的应用服务不希望被外网访问,有…

[Flutter]打包IPA

1.直接使用Xcode运行iOS工程 不用flutter构建&#xff0c;在Xcode中是可以独立进行构建运行和打包发布的。 1).运行项目 先将flutter的build清理 $ flutter clean $ flutter pub get 然后立即用XCode打开iOS工程运行 运行会报错&#xff1a; error: The sandbox is not …

壁纸小程序Vue3(首页布局)

1.创建一个公共目录common来存放css和images App.vue中引用 <style lang"scss"> /*每个页面公共css */ import common/style/common-style.scss; </style> 2.渲染轮播图 <template><view class"homeLayout"><vi…

Godot 4 教程《勇者传说》依赖注入 学习笔记(0):环境配置

文章目录 前言相关地址环境配置初始化环境配置文件夹结构代码结构代码运行 资源文件导入像素风格窗口环境设置背景设置,Tileap使用自动TileMap 人物场景动画节点添加站立节点添加移动动画添加 通过依赖注入获取Godot的全局属性项目声明 当前项目逻辑讲解角色下降添加代码位置问…

【51单片机入门记录】IIC总线协议 EEPROM存储器AT24C02概述

一、IIC总线协议概述 &#xff08;1&#xff09;IIC&#xff08;Inter-IntegratedCircuit&#xff09;总线 是一种由PHILIPS公司开发的两线式串行总线&#xff0c;用于连接微控制器以及其外围设备。IIC也被成为I2C/IC&#xff0c;其实两者是完全相同的&#xff0c;只是名词不…

Linux(CentOS7)配置系统服务以及开机自启动

目录 前言 两种方式 /etc/systemd/system/ 进入 /etc/systemd/system/ 文件夹 创建 nginx.service 文件 重新加载 systemd 配置文件 ​编辑 配置开机自启 /etc/init.d/ 进入 /etc/init.d/ 文件夹 创建 mysql 文件 编写脚本内容 添加/删除系统服务 配置开机自启 …

精通Go语言文件上传:深入探讨r.FormFile函数的应用与优化

1. 介绍 1.1 概述 在 Web 开发中&#xff0c;文件上传是一项常见的功能需求&#xff0c;用于允许用户向服务器提交文件&#xff0c;如图像、文档、视频等。Go 语言作为一门强大的服务器端编程语言&#xff0c;提供了方便且高效的方式来处理文件上传操作。其中&#xff0c;r.F…

9.动态规划——2.最大序列和

例题——最大序列和 找状态 思路一&#xff08;&#xff09; 定义一个状态 d p [ i ] dp[i] dp[i]&#xff0c;计为前i个数构成子序列和的最大值 此法状态转移比较困难&#xff0c;即若 d p [ i ] dp[i] dp[i]与 d p [ i − 1 ] dp[i-1] dp[i−1]没有明确的关系&#xff0c;有…

Ribbon有哪些负载均衡策略

负载均衡类都实现了IRule接口。 RandomRule&#xff1a;随机的选用一个实例 RoundRobinRule&#xff1a;轮询的使用实例 RetryRule&#xff1a;在轮询的基础上加了一个错误重试机制&#xff0c;在deadline时间内会不断的重试 WeightResponeTimeRule&#xff1a;根据权重去做…

【计算机网络】四层负载均衡和七层负载均衡

前言 1、分层方式 首先我们知道&#xff0c;在计算机网络中&#xff0c;常用的协议分层方式&#xff1a;OSI和TCP/IP&#xff0c;以及实际生产中使用的协议划分方式。 在OSI中&#xff0c;各层的职责如下&#xff1a; 应用层&#xff1a;对软件提供接口以使程序能使用网络服…

深入探索位图技术:原理及应用

文章目录 一、引言二、位图&#xff08;Bitset&#xff09;基础知识1、位图的概念2、位图的表示3、位图操作 三、位图的应用场景1、数据查找与存储2、数据去重与排序 四、位图的实现 一、引言 位图&#xff0c;以其高效、简洁的特性在数据处理、存储和检索等多个领域发挥着举足…

Nest安装及使用~

前提条件 请确保您的操作系统上安装了 Node.js&#xff08;版本 > 16&#xff09; &#x1f4da;要查看指南&#xff0c;请访问 https://docs.nestjs.com/ &#x1f4da;要查看中文 指南&#xff0c; 请访问 https://docs.nestjs.cn/ $ node -v v16.18.1 $ npm -v 7.x.x安…

【C++】C++11的新特性

目录 一. 列表初始化1. 列表初始化的原理: initializer_list 二. 类型的声明1. auto2. decltype 三. nullptr四. 范围 for五. STL容器变化六. 类的新功能 一. 列表初始化 在 C 语言中, 就可以使用 {} 对数组或结构体进行初始化, 而 C11 扩大了 {} 的使用范围, 使其可以初始化所…

Mysql-数据库范式和Mysql安装

文章目录 数据库三范式第一范式&#xff1a;1NF第二范式&#xff1a;2NF第三范式&#xff1a;3NF Yum安装CentOS7 yum安装解决“Access denied”拒绝访问异常 数据库三范式 第一范式&#xff1a;1NF 第一范式&#xff1a;数据库中无重复的列&#xff0c;每一列都是不可分割的…

乐乐音乐鸿蒙版-支持krc歌词(动感歌词、翻译和音译歌词)

简介 乐乐音乐主要是基于HarmonyOS开发的音乐播放器&#xff0c;它支持lrc歌词和动感歌词(ksc歌词、krc歌词和hrc歌词等)、多种格式歌词转换器及制作动感歌词、翻译歌词和音译歌词。 开发环境 ArkTS、Stage模型、SDK3.1、 API 9 注&#xff1a;没试过在真机条件下调试。 功…