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

HTML---网页布局

news 文章来源：https://blog.csdn.net/zhoutong2323/article/details/135170972 2024/9/21 0:29:05

目录

文章目录

一.常见的网页布局

二.标准文档流 

 标准文档流常见标签

 三.display属性

四.float属性

总结

一.常见网页布局

二.标准文档流 

 标准文档流常见标签

标准文档流的组成
块级元素<div>、<p>、<h1>-<h6>、<ul>、<ol>等
内联元素<span>、<a>、<strong>、<em>、<img>等

 三.display属性

 在HTML中，display属性用于指定元素的展示方式。该属性可以接受以下几种值：

  •  总结--display特性

 实现块级元素与行级元素的转变，控制块级元素排到一行，控制元素的显示和隐藏。

演示案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border: 1px seagreen solid;width: 100px; height: 100px;}span{border: 1px red solid;}</style></head><body><div>我是元素</div><span>我是Span元素</Span></body>
</html>

  • none属性

设置的元素不会被显示。

div{width: 100px; height: 100px;border: 1px seagreen solid;display: none;}

  •  inline

元素被视为内联元素，并在同一行内显示。

div{width: 100px; height: 100px;border: 1px seagreen solid;display: inline;}

  •  inline-block

该元素被视为内联块级元素同时具有块元素和行元素的属性。即可设置宽度也可并行排列。

div{width: 100px; height: 100px;border: 1px seagreen solid;display: inline-block;}

四.float属性

  • 浮动属性的特点
  1. 元素浮动后会脱离文档流，不再占据原来的空间，而是向左或向右移动，其他元素会填充到浮动元素所占据的空间。
  2. 浮动元素并可以与其他元素并排显示，如果空间不够，会自动换行或换列，并可以设置宽度和高度：浮动元素可以通过设置宽度和高度来确定其占据的空间大小

演示案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>浮动</title><style>div{margin: 10px; padding: 5px;}#father{border: 1px red solid;}.layer01{border: 1px blue dashed; }.layer02{border: 1px pink dashed; }.layer03{border: 1px green dashed; ;}.layer04{border: 1px skyblue dashed; font-size: 30px; line-height: 100px;}</style></head><body><div id="father"><div class="layer01"><img src="picture1.png" alt="日用品"></div><div class="layer02"><img src="picture2.png" alt="图书"></div><div class="layer03"><img src="picture3.png" alt="鞋子"></div><div class="layer04">浮动盒子可以向左浮动，也可以向右浮动，直到外边缘碰到包含框或另一个浮动盒子为止这里使用三个图片和本段文字来讲解浮动属性在网页中的应用，根据所在的div分别向左/        右/不浮动。</div></div></div>	</body>
</html>

  •  left

设置元素向左浮动

.layer01{border: 1px blue dashed;float: left;}

  • 设置向左浮动后产生上述网页布局的原因： 

    设置向左浮动的元素脱离原来的文档流向左上方移动直到碰到父级边框后停止移动，剩余元素会自动填充浮动元素的原有位置，并防止遮住浮动元素会自适应移动。

.layer02{border: 1px darkorange dashed; float: left;}

  • right 
.layer01{border: 1px blue dashed;float: right;}

.layer02{border: 1px darkorange dashed; float: right;}
  • 总结： 

浮动属性中的左移动/右移动，代表X轴方向的移动。而Y轴方向的移动则需要使用下面的清除浮动属性。

清除浮动

 清除浮动是为了解决浮动元素引起的父元素高度塌陷的问题。

移动规则：

清除左浮动：设置清除左浮的元素会停留在先行左浮元素的下方并且靠右。

清除右浮动：设置清除右浮的元素会停留在先行右浮元素的下方并且靠左。

案例： 

  •  向右浮动并清除向左浮动
.layer01{border: 1px blue dashed;float: right;}
.layer02{border: 1px darkorange dashed; float: right;clear: left;}

  • 上述布局形成原因： 

排在元素layer02前面的元素layer01为右浮动，并未设置左浮动，对于layer02设置清除左浮动之后没有先行元素向左移动，因此layer02元素仅执行向右移动。

  •  向右浮动并清除右浮动
.layer01{border: 1px blue dashed;float: right;}
.layer02{border: 1px darkorange dashed; float: right;clear: right;}

  •  上述布局形成原因： 

排在元素layer02前面的元素layer01为右浮动，对于layer02设置清除右浮动之后有先行元素向右移动，因此layer02元素会先向右移动并停留在先行元素layer01的下方。

  •  向左浮动并清除右浮动
.layer01{border: 1px blue dashed;float: right;}
.layer02{border: 1px darkorange dashed; float: left;clear: right;}

  •  向右移动并清除两侧浮动

清除两侧浮动的元素将停留在最低元素的下方，并执行浮动的指令向右移动。

.layer03{border: 1px green dashed; float: right;clear: both;}

五. 解决边框塌陷问题

  • 父级边框塌陷的原因：
  1. 浮动元素脱离文档流导致相邻元素无法检测到该浮动元素的边界，进而导致边框塌陷的现象发生。
  2. 相邻的两个元素的margin相遇时较大的margin会覆盖较小的margin，导致边框塌陷的现象发生。

下图为元素浮动导致的父级边框塌陷 

  •  overflow属性

在浮动元素的父元素中设置 overflow:auto; 或 overflow:hidden; 属性。这会使父元素包含浮动元素，并清除浮动，例如：

语法：

#father{border: 1px red solid;overflow: hidden;}

  •  after伪类

在浮动元素的父元素中添加一个带有 content:""; display:table; clear:both; 属性的伪元素。例如:

语法：

#father:after{content: '';/**内容清空**/display: block;/**设置该元素为块元素**/clear: both;/**清除两侧浮动**/}

六.解决内容溢出问题

overflow属性

 内容溢出案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#d1{width: 200px;height: 200px;border: 1px solid rebeccapurple;}</style></head><body><div id="d1"><img src="picture1.png"/><p>都 是勇敢的你额头的伤口 你的 不同 你犯的错都 不必隐藏你破旧的玩偶 你的 面具 你的自我他们说 要带着光 驯服每一头怪兽他们说 要缝好你的伤没有人爱小丑 为何孤独 不可 光荣人只有不完美 值得歌颂谁说污泥满身的不算英雄</p></div></body>
</html>

  •  overflow：scroll

无论内容是否被修剪都设置浏览器以滚动条的方式查看边框内的内容。

语法：

#d1{overflow: scroll;}

  •   overflow：auto

 若内容被修建则设置浏览器以滚动条的方式查看剩余内容，内容未溢出则无需修建不会设置滚动方式。

 练习

一.制作热门活动页面

 二.制作电视剧详情列表页面

三. 制作QQ会员页面导航

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0px; padding: 0px;}/**设置根边框的内外边距**/a{text-decoration:none ;}/**去除超链接下划线**/.nav-header{height: 90px; width: 100%; background: rgba(0, 0, 0, .6); border: 1px red solid;}.head-contain{width: 1180px; height: 90px; margin: 0 auto; text-align: center; border: 1px yellow dashed; border-width: 5px;}.top-logo,.top-nav,.top-nav li,.top-right{  /**针对上述选择器同时设置样式**/height: 90px;display: inline-block;vertical-align: top;/**垂直对齐方式：靠上**/}.top-nav{margin: 0,55; border: 1px blue solid; border-width: 5px;}/**设置右外长度边距**/.top-nav li{line-height: 90px; width: 90px;}.top-nav li a{display: block; text-align: center; font-size: 15px; color: aliceblue;}.top-nav li a:hover{color: blue;}/**设置鼠标点击链接的样式**/.top-right{border: 1px green solid; border-width: 5px;}.top-right a{display: inline-block; font-size: 15px; text-align: center; margin-top: 15px;border-radius: 35px;/**设置边框为圆角**/}.top-right a:nth-child(2){width: 93px;border: 1px solid orange ;position: relative;top: 20px;}.top-right a:nth-child(3){position: relative; top: 20px;}.top-right a:nth-child(2):hover{color: gold;background-color: orange;}</style></head><body><div class="wrap"><header class="nav-header"><!--设置一个根边框用于添加class="head-contain"中的元素--><div class="head-contain"><!--设置一个二级边框添加下列元素--><a href="#" class="top-logo"><img src="picture1.png" width="145px" height="90px"/></a><nav class="top-nav"><!--<nav标签：定义导航模块>--><ul><!--定义一个列表--><li><a href="">功能特权</li><li><a href="">游戏特权</li><li><a href="">生活特权</li><li><a href="">会员活动</li><li><a href="">成长体系</li><li><a href="">年费专区</li><li><a href="">超级会员</li></ul></nav><div class="top-right"><!--设置另一个框架用于存放下列元素--><a href="">登录</a><a href="">开通超级会员</a></div></div>		</header></div></body>
</html>

 黄色边框为二级边框 -黄色边框外层红色边框为根边框-蓝色边框为子边框1-绿色边框为子边框2

总结

相关文章：

HTML---网页布局

目录 文章目录 一.常见的网页布局 二.标准文档流 标准文档流常见标签 三.display属性 四.float属性 总结 一.常见网页布局 二.标准文档流 标准文档流常见标签 标准文档流的组成 块级元素<div>、<p>、<h1>-<h6>、<ul>、<ol>等内联元素<…...

编程日记 2023/12/26 2:15:13

python 普通存款（单利）计算公式：

python 普通存款&#xff08;单利&#xff09;计算公式&#xff1a; 代码如下&#xff1a; #普通存款 单利计算公式&#xff1a;a:原值&#xff0c;n:计算年限&#xff0c;li&#xff1a;利率&#xff08;小数&#xff09;, def danli(a,n,li):print("普通存款(单利)计…...

编程日记 2023/12/26 2:12:10

什么是 PHP 内存溢出 ？遇到了要如何解决呢 ？

PHP内存溢出指的是在PHP应用程序中&#xff0c;分配给脚本执行的内存超出了PHP配置文件中设置的限制。当脚本尝试使用比可用内存更多的内存时&#xff0c;就会发生内存溢出错误。 一、内存溢出可能由以下几个原因引起&#xff1a; 循环引用&#xff1a;如果存在循环引用&#…...

编程日记 2023/12/26 2:11:09

本地使用 docker 运行OpenSearch + Dashboard + IK 分词插件

准备基础镜像 注意一定要拉取和当前 IK 分词插件版本一致的 OpenSearch 镜像: https://github.com/aparo/opensearch-analysis-ik/releases 写这篇文章的时候 IK 最新版本 2.11.0, 而 dockerhub 上 OpenSearch 最新版是 2.11.1 如果版本不匹配的话是不能用的, 小版本号对不上…...

编程日记 2023/12/26 2:07:05

【JavaEE初阶一】线程的概念与简单创建

1. 认识线程&#xff08;Thread&#xff09; 1.1 关于线程 1.1.1 线程是什么 由前一节的内容可知&#xff0c;进程在进行频繁的创建和销毁的时候&#xff0c;开销比较大&#xff08;主要体现在资源的申请和释放上&#xff09;&#xff0c;线程就是为了解决上述产生的问题而提…...

编程日记 2023/12/26 2:05:02

三叠云工程劳务管理，优化建筑施工管理，提升效率与质量

随着建筑行业的蓬勃发展&#xff0c;工程施工现场管理变得愈发复杂。传统的人员管理方式已经无法满足企业快速发展的需求。如何提高施工效率、优化人力资源管理成为了建筑企业亟待解决的问题。逐渐走向数字化的工程建设行业&#xff0c;急需一种足以匹配这一时代变革、高效管理…...

编程日记 2023/12/26 1:57:56

RocketMQ连接报错RemotingConnectException: connect to ＜192.168.57.129:9876＞解决

文章目录 前言一、RocketMQ 连接报错处理1.1 报错信息1.2 修改 broker.conf 文件1.3 Linux 开放端口1.4 项目启动成功 前言 上一篇文章&#xff1a;基于SpringBoot整合RocketMQ异步发送短信功能在项目启动的过程中报了 RocketMQ 连接错误。针对这个问题&#xff0c;本文给予记…...

编程日记 2023/12/26 1:54:53

设计模式--桥接模式

实验9&#xff1a;桥接模式 本次实验属于模仿型实验&#xff0c;通过本次实验学生将掌握以下内容&#xff1a; 1、理解桥接模式的动机&#xff0c;掌握该模式的结构&#xff1b; 2、能够利用桥接模式解决实际问题。 [实验任务]&#xff1a;两个维度的桥接模式 用桥接模式…...

编程日记 2023/12/26 1:53:52

redis基本用法学习（C#调用StackExchange.Redis操作redis）

StackExchange.Redis是基于C#的高性能通用redis操作客户端&#xff0c;也属于常用的redis客户端之一&#xff0c;本文学习其基本用法。   新建Winform项目&#xff0c;在Nuget包管理器中搜索并安装StackExchange.Redis&#xff0c;如下图所示&#xff1a;   StackExchange.…...

编程日记 2023/12/26 1:52:51

单挑力扣（LeetCode）SQL题：1308. 不同性别每日分数总计

相信很多学习SQL的小伙伴都面临这样的困境&#xff0c;学习完书本上的SQL基础知识后&#xff0c;一方面想测试下自己的水平&#xff1b;另一方面想进一步提升&#xff0c;却不知道方法。 其实&#xff0c;对于技能型知识&#xff0c;我的观点一贯都是&#xff1a;多练习、多实…...

编程日记 2023/12/26 1:49:48

Vue3组合式-依赖注入provideinject

一、注意点 专门强调了是3.0且是组合式&#xff0c;不是2.0不支持也不是选项式不支持provide&&inject&#xff0c;是支持但是有很明显的弊端&#xff0c;不建议使用 二、场景 官方的解释: 通常情况下&#xff0c;当我们需要从父组件向子组件传递数据时&#xff0c;会…...

编程日记 2023/12/26 1:47:46

SRE 与 DevOps 的不同之处

尽管网站可靠性工程 (SRE) 理念早在 2003 年就由 Google 的 Ben Treynor Sloss 提出&#xff0c;但其近年来却一直受到追捧。随着 DevOps 实践已经在许多组织中牢固确立&#xff0c;两者之间的冲突是否已经显现&#xff1f;SRE 只不过是一种过时的趋势吗&#xff1f;是 SRE 补充…...

编程日记 2023/12/26 1:45:45

【湖仓一体尝试】MYSQL和HIVE数据联合查询

爬了两天大大小小的一堆坑&#xff0c;今天把一个简单的单机环境的流程走通了&#xff0c;记录一笔。 先来个完工环境照&#xff1a; mysqlhadoophiveflinkicebergtrino 得益于IBM OPENJ9的优化&#xff0c;完全启动后的内存占用&#xff1a; 1&#xff09;执行联合查询后的…...

编程日记 2023/12/26 1:44:43

SpringCloud跨服务调用失败Seata无法回滚解决办法

遇到的问题 在微服务项目中 有A、B、C三个服务 其中 A调用B服务 &#xff0c;B调用C&#xff0c; 这些就是跨服务调用了&#xff0c;在A服务中 还调用了一个当前模块执行插入数据的方法(在这里我就叫它为AA 也就是mybatis/spring管理的本地事务) A服务开启全局事务注解 Globa…...

编程日记 2023/12/26 1:43:43

OSG三维渲染引擎编程学习之一百零一：“第十一章：OSG粒子” 之 “11.2 粒子模拟过程”

目录 第十一章 OSG粒子 11.2 粒子模拟过程 第十一章 OSG粒子 虚拟现实中有很多效果，如雨效、雪效、雾效等，这些都可以通过粒子条统来实现。一个真实的粒子系统的模式能使三维场景达到更好的效果。 粒子系统是一个非常复杂的粒子模拟过程。在OSG中，专门定义了新的名字空间o…...

编程日记 2023/12/26 1:40:38

Autosar CAN开发03（从实际应用认识CAN总线的物理层）

建议同时阅读本专栏的&#xff1a; Autosar CAN开发03&#xff08;从实际应用认识CAN总线的物理层&#xff09; Autosar CAN开发04&#xff08;从实际应用认识CAN报文&#xff09; Autosar CAN开发05&#xff08;从实际应用认识CAN波特率&#xff09; 前言 在上一章的《AU…...

编程日记 2023/12/26 1:31:29

vue中父子组件传值

父传子 传: 在"标签"上传属性 <Card :name"name"></Card> 接: 在props中 export default {props: {name: String},setup(props) {console.log(props.name);} } 子传父 传: 触发,给一个事件传值 setup(props,{emit}) {emit("get…...

编程日记 2023/12/26 1:29:27

【网络编程】基于UDP数据报实现回显服务器/客户端程序

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【网络编程】【Java系列】 本专栏旨在分享学习网络编程的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 前言 我们如果…...

编程日记 2023/12/26 1:27:25

sqlilabs第三十二三十三关

Less-32&#xff08;GET - Bypass custom filter adding slashes to dangerous chars) 手工注入 由 宽字符注入可知payload 成功触发报错 http://192.168.21.149/Less-32/ ?id1%df 要写字符串的话直接吧字符串变成ascii码 注意16进制的表示方式 自动注入 sqlmap -u http:…...

编程日记 2023/12/26 1:26:24

第二十一章博客

计算机应用实现了多台计算机间的互联&#xff0c;使得它们彼此之间能够进行数据交流。网络应用程序就是在已连接的不同计算机上运行的程序&#xff0c;这些程序借助于网络协议&#xff0c;相互之间可以交换数据。编写网络应用程序前&#xff0c;首先必须明确所要使用的网络协议…...

编程日记 2023/12/26 1:24:22

PSoc62™开发板之按键控制LED

实验目的 使用板子上的用户自定义按键控制LED亮灭&#xff0c;当按键按下时LED亮起来&#xff0c;不按下则不亮 电路图 按键电路 板子有两组按键&#xff0c;分别是系统复位按键和用户自定义按键&#xff0c;这里我们选择控制用户自定义按键&#xff0c;可以看到MCU_USER_B…...

编程日记 2023/12/26 1:22:20

Vue-Pinina基本教程

前言 官网地址&#xff1a;Pinia | The intuitive store for Vue.js (vuejs.org) 看以下内容&#xff0c;需要有vuex的基础&#xff0c;下面很多概念会直接省略&#xff0c;比如state、actions、getters用处含义等 1、什么是Pinina Pinia 是 Vue 的存储库&#xff0c;它允许您跨…...

编程日记 2023/12/26 1:20:19

大批量数据导出csv,平替导出excel性能优化解决方案封装工具类

阿丹&#xff1a; 有些业务逻辑需要在导出非常大量的数据&#xff0c;几百甚至几千万的数据这个时候再导出excel来对于性能都不是很友好&#xff0c;这个时候就需要替换实现思路来解决这个问题。 本文章提供了两种解决的方案&#xff0c;也是两种从数据库中拿取数据的方式一种是…...

编程日记 2023/12/26 1:19:18

C++ Qt开发：Charts绘制各类图表详解

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍TreeWidget与QCharts的常用方法及灵活运用。 …...

编程日记 2023/12/26 1:17:16

【SassVue】仿网易云播放器动画

简介 仿网易云播放动画 效果图&#xff08;效果图&#xff09; 最终成品效果 动画组件 src/components/music/MusicPlayAnimate.vue <template><div class"music-play"><div></div><div></div><div></div></di…...

编程日记 2023/12/26 1:14:14

CentOS进入单用户模式

一、重启 二、出现内核选项 按“e” 三、编辑这一行 输入 rw init/sysroot/bin/sh 四、进入单用户模式 ctrlx 进入 五、切换目录 chroot /sysroot 六、然后你就操作你的系统了。 修改密码等等...

编程日记 2023/12/26 1:12:12

微信小程序~如何设置页面的背景色

微信小程序~如何设置页面的背景色 众所周知&#xff0c;微信小程序每个页面由.json&#xff0c;.scss&#xff0c;.ts&#xff0c;.wxml这四个文件组成。 有的小伙伴会发现&#xff0c;需要给页面加背景色的时候&#xff0c;只需在此页面的.scss文件中写个page{background-colo…...

编程日记 2023/12/26 1:11:11

图灵日记之java奇妙历险记--输入输出方法数组

目录 输入输出输出到控制台从键盘输入使用 Scanner 读取字符串/整数/浮点数使用 Scanner 循环读取 猜数字方法方法定义方法调用的执行过程实参和形参的关系(重要)方法重载 数组数组的创建数组的初始化动态初始化静态初始化 数组的使用元素访问遍历数组 数组是引用类型null数组应…...

编程日记 2023/12/26 1:07:07

CSS新手入门笔记整理：CSS3弹性盒模型

特点 子元素宽度之和小于父元素宽度&#xff0c;所有子元素最终的宽度就是原来定义的宽度。子元素宽度之和大于父元素宽度&#xff0c;子元素会按比例来划分宽度。在使用弹性盒子模型之前&#xff0c;必须为父元素定义“display:flex;”或“display:inline-flex;”。 弹性盒子…...

编程日记 2023/12/26 1:06:06

OCP NVME SSD规范解读-1

OCP&#xff08;Open Compute Project&#xff09;是一个由Facebook于2011年发起的开源项目。其目标是重新设计和优化数据中心的硬件&#xff0c;包括服务器、存储、网络设备等&#xff0c;以提高效率&#xff0c;降低运营成本&#xff0c;并推动技术的创新和标准化。 在OCP中&…...

编程日记 2023/12/26 1:03:03

大规模和复杂问题挑战——分治思想来应战

分治思想利用了问题的内在结构和性质&#xff0c;使得大规模和复杂的问题能够被有效地解决。具体来说&#xff0c;分治思想的本质是通过问题分解、递归处理和解的合并&#xff0c;将一个复杂问题转化为一系列更简单的子问题&#xff0c;并最终得到原问题的解。 1、分治思想的本…...

编程日记 2023/12/26 1:02:02

六西格玛的科技漩涡——张驰咨询如何促成企业变革

在管理的海洋里&#xff0c;六西格玛管理是一艘稳健的航船&#xff0c;在质量管理的汪洋中乘风破浪&#xff0c;尽管质疑之声像远处的风暴不断逼近&#xff0c;但张驰咨询公司依靠这艘航船坚持初心&#xff0c;驭风而行。 20载耕耘&#xff0c;张驰咨询不仅仅是培养了超过8000…...

编程日记 2023/12/26 1:01:01

由于被认为是客户端对错误（例如：畸形的请求语法、无效的请求信息帧或者虚拟的请求路由），服务器无法或不会处理当前请求。

问题描述&#xff1a; 由于被认为是客户端对错误&#xff08;例如&#xff1a;畸形的请求语法、无效的请求信息帧或者虚拟的请求路由&#xff09;&#xff0c;服务器无法或不会处理当前请求。 在实现向数据库中添加记录时&#xff0c;请求发送无效&#xff0c;参数也未传递到控…...

编程日记 2023/12/26 0:58:59

【案例】图片预览

效果图 如何让图片放大&#xff0c;大多数的UI组件都带有这种功能&#xff0c;今天给大家介绍的这个插件除了放大之外&#xff0c;还可以旋转、移动、翻转、旋转、二次放大&#xff08;全屏&#xff09; 实现 npm i v-viewer -Smain.js 中引入 import viewerjs/dist/viewer.c…...

编程日记 2023/12/26 0:56:57

ubuntu 18/20/22 安装 mysql 数据库

这里写自定义目录标题 ubuntu 18/20/22 安装 mysql 数据库1. 准备2. 安装 mysql3. 配置4. 测试 demo 用户5 服务管理5.1 查看服务状态5.2 启动服务5.3 停止服务5.4 重启服务 ubuntu 18/20/22 安装 mysql 数据库 1. 准备 安装前需要知道 root 用户的密码 假如不知道 root 用户…...

编程日记 2023/12/26 0:55:56

通过U盘：将电脑进行重装电脑

目录 一.老毛桃制作winPE镜像 1.制作准备 2.具体制作 下载老毛桃工具 插入U盘 选择制作模式 正式配置U盘 安装提醒 安装成功 具体操作 二.使用ultrasio制作U盘 1.具体思路 2.图片操作 三.硬盘安装系统 具体操作 示例图 ​编辑 一.老毛桃制作winPE镜像 1.制作准…...

编程日记 2023/12/26 0:54:55

C# SqlSugar 数据库 T4模板

生成效果 模板代码 <# template debug"false" hostspecific"true" language"C#" #> <# output extension".cs" #> <# assembly name"System.Core" #> <# assembly name"System.Data" #>…...

编程日记 2023/12/26 0:50:51

ARM AArch64的TrustZone架构详解（下）

目录 五、软件架构 5.1 顶层软件架构 5.2 信任消息（message） 5.3 调度 5.4 OPTEE...

编程日记 2023/12/26 0:49:50

《Nature》预测 2024 科技大事：GPT-5预计明年发布等

《Nature》杂志近日盘点了 2024 年值得关注的科学事件&#xff0c;包括 GPT-5 与新一代 AlphaFold、超算 Jupiter、探索月球任务、生产「超级蚊子」、朝向星辰大海、试验下一代新冠疫苗、照亮暗物质、意识之辩第二回合、应对气候变化。 今年以来&#xff0c;以 ChatGPT 为代表…...

编程日记 2023/12/26 0:48:49

「Verilog学习笔记」并串转换

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 串并转换操作是非常灵活的操作&#xff0c;核心思想就是移位。串转并就是把1位的输入放到N位reg的最低位&#xff0c;然后N位reg左移一位&#xff0c;在把1位输入放到左移后…...

编程日记 2023/12/26 0:46:48

应急响应常用命令

应急响应的基本思路 a. 收集信息&#xff1a;收集告警信息、客户反馈信息、设备主机信息等 b. 判断类型&#xff1a;安全事件类型判断。&#xff08;钓鱼邮件、Webshll、爆破、中毒等&#xff09; c. 控制范围&#xff1a;隔离失陷设备 d. 分析研判&#xff1a;根据收集回来的…...

编程日记 2023/12/26 0:44:46

使用React和ResizeObserver实现自适应ECharts图表

关键词 React ECharts ResizeObserver 摘要 在现代 Web 开发中&#xff0c;响应式布局和数据可视化是非常常见的需求。本文将介绍如何使用React、ResizeObserver和ECharts库来创建一个自适应的图表组件。 什么是ResizeObserver ResizeObserver是JavaScript的一个API&#x…...

编程日记 2023/12/26 0:41:43

修改第三方npm包

文章目录 一、前言二、补丁方案2.1、patch-package2.2、pnpm patch 三、换日方案四、总结五、最后 一、前言 在开发过程中&#xff0c;发现某个npm包有Bug&#xff0c;应该怎么办&#xff1f;可以试试下面这2种方案&#xff1a; 代码量少&#xff0c;可以直接修改npm包代码的&…...

编程日记 2023/12/26 0:40:42

Redis性能优化：关键配置和最佳实践

大家好&#xff0c;我是升仔 Redis作为一个高性能的键值存储系统&#xff0c;在现代应用架构中扮演着至关重要的角色。性能优化是Redis部署与维护中的一个关键环节。本文将从关键配置、持久化配置、实践场景和异常处理配置等方面&#xff0c;详细介绍如何优化Redis的性能。 关…...

编程日记 2023/12/26 0:37:39

华为数通方向HCIP-DataCom H12-831题库(多选题：241-249）

第241题 (NEW) 以下哪些操作可能会影响客户网络的正常运行? A、从设备上下载日志 B、软件升级 C、路由协议配置变更 D、debug核心交换机上转发的所有IP报文 答案：ABCD 解析： 第242题 对于防火墙的默认安全区 Trust 和 Untrust 的说法，正确的有 A、从 Trust 区域访问 Untr…...

编程日记 2023/12/26 0:36:38

typeorm联表查询：副表json格式放到主表字段下或多个副表字段并列主表字段

实体类字段不做映射&#xff0c;typeorm实现联查查询 1、副表json格式放到主表字段下 //goods表和member表联表&#xff0c;关系goods.id member.uid&#xff0c;member表数据json对象格式放到主表userInfo下 //leftJoinAndMapOne配合getMany实现 const builder await getCo…...

编程日记 2023/12/26 0:35:36

Flume采集日志存储到HDFS

1 日志服务器上配置Flume,采集本地日志文件&#xff0c;发送到172.19.115.96 的flume上进行聚合&#xff0c;如日志服务器有多组&#xff0c;则在多台服务器上配置相同的配置 # Name the components on this agent a1.sources r1 a1.sinks k1 a1.channels c1# Describe/con…...

编程日记 2023/12/26 0:32:33

redis—String字符串

目录 前言 1.字符串数据类型 2.常见命令 3.典型应用场景 前言 字符串类型是Redis最基础的数据类型&#xff0c;关于字符串需要特别注意: 1)首先Redis中所有的键的类型都是字符串类型&#xff0c;而且其他几种数据结构也都是在字符串类似基础.上构建的&#xff0c;例如列表…...

编程日记 2023/12/26 0:31:33

三相电机转差率为负值的情形

1.电机开始发电的特征 注意&#xff0c;电机因为有输入频率对原始旋转磁场的影响&#xff0c;在正常工作时&#xff0c;应该处于稳态&#xff0c;因为旋转磁场决定了这个系统的运转方向和运转的大致频率区间。它会处于力矩平衡态。但是&#xff0c;如果&#xff0c;此时电机处…...

编程日记 2023/12/26 0:30:32

关于Dark Frost 僵尸网络对游戏行业进行DDoS攻击的动态情报

一、基本内容 近期&#xff0c;一种名为Dark Frost 的新型僵尸网络被发现正在对游戏行业发起分布式拒绝服务攻击&#xff08;DDoS)。目标包括游戏公司、游戏服务器托管提供商、在线流媒体甚至和网络信息安全攻击者直接交互的其他游戏社区成员。截至2023年2月&#xff0c;僵尸网…...

编程日记 2023/12/26 0:29:31