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

11.[前端开发]Day11-HTML+CSS阶段练习(仿小米和考拉页面)

news 来源：原创 2025/5/19 4:54:17

一、小米穿戴设备（浮动）

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米官网</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.dress {margin-top: 30px;}.dress .header {height: 58px;line-height: 58px;}.dress .header .left-area {float: left;}.dress .header .right-area  {float: right;font-size: 14px;}.dress .header .right-area .item {margin-left: 15px;}.dress .header .right-area .item:hover,.dress .header .right-area .item.active {padding: 3px 0;border-bottom: 2px solid red;color: red;}/* 列表内容 */.dress .list {margin-right: -14px;}.dress .list .item {float: left;/* position: relative;top: 0; *//* box model */width: 234px;height: 300px;margin-right: 14px;margin-bottom: 14px;background-color: #f00;/* 动画 */transition: all 0.3s ease-in;}.dress .list .item.item1 {height: 614px;}.dress .list .item.item9, .dress .list .item.item10 {height: 143px;}.dress .list .item:hover {box-shadow: 0 15px 30px rgba(0,255,0,1);/* top: -2px; */transform: translateY(-2px);}.dress .list .item a {display: inline-block;width: 100%;height: 100%;}</style>
</head>
<body><div class="mi_wrapper dress"><div class="header clear_fix"><div class="left-area"><h3 class="title">智能穿戴</h3></div><div class="right-area"><a class="item active hot" href="#">热门</a><a class="item info" href="#">穿戴</a></div></div><div><ul class="list clear_fix"><li class="item item1"><a href="#">1</a></li><li class="item item2"><a href="#">2</a></li><li class="item item3"><a href="#">3</a></li><li class="item item4"><a href="#">4</a></li><li class="item item5"><a href="#">5</a></li><li class="item item6"><a href="#">6</a></li><li class="item item7"><a href="#">7</a></li><li class="item item8"><a href="#">8</a></li><li class="item item9"><a href="#">9</a></li><li class="item item10"><a href="#">10</a></li></ul></div></div></body>
</html>

common.css

.mi_wrapper {width: 1226px;margin: 0 auto;
}.kl_wrapper {width: 1100px;margin: 0 auto;
}.clear_fix::after {content: "";display: block;clear: both;height: 0;visibility: hidden;
}.clear_fix {*zoom: 1;
}

reset.css

body, h1, h2, h3, ul, li {margin: 0;padding: 0;
}a {text-decoration: none;color: #333;
}ul, li {list-style: none;
}

1.区域抽取

对结构进行简单搭建

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米官网</title><link rel="stylesheet" href="./css/common.css"><style>.dress{height: 200px;background-color: orange;}</style>
</head>
<body><div class="mi_wrapper dress"><div class="header"></div><div class="list"></div></div></body>
</html>

common.css

.mi_wrapper{width:1226px;margin:0 auto;  /*居中*/
}

2.头部的布局

让“智能穿戴”左浮动；让“热门和穿戴”右浮动

让文字居中且对齐：用line-hight

然后进行微调，比如用a标签啊，可以有小手点击啊

用hover，鼠标放上去会变红色啊，有下划线啊

用acitve,后面js会有涉及

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米官网</title> <link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"> <!--注意，这个放在后面-->><style>.dress{margin-top:30px;}.header{height: 58px;line-height: 58px;}.dress .header .left-area{float: left;}.dress .header .right-area{float: right;font-size:14px;}.dress .header .right-area .item{margin-left: 15px;}.dress .header .right-area .item:hover,.dress .header .right-area .item.active{padding:3px 0;border-bottom: 2px solid red;color:red;}</style>
</head>
<body><!-- 设置浮动后 智能穿戴 和热门 穿戴是顶部对齐的 --><div class="mi_wrapper dress"><div class="header clear-fix"> <!-- common.css里的清浮动：clear_fix --><div class="left-area"><h3 class="title">智能穿戴</h3></div><div class="right-area"><a class="item active hot" href="#">热门</a> <!-- 一旦写a就要对a的默认样式进行重置 --><a class="item info" href="#">穿戴</a></div></div><div class="list"></div> </div></body>
</html>

reset.css

body, h1, h2, h3, ul, li {margin: 0;padding: 0;
}a {text-decoration: none;color: #333;
}ul, li {list-style: none;
}/*对浏览器默认样式进行重置*/

common.css

.mi_wrapper{width:1226px;margin:0 auto;  /*居中*/
}.clear-fix::after{content:"";display: block;clear: both;/*清除浮动*//*为了更好的兼容*/height: 0;visibility: hidden;
}/*为了更好的兼容*/
.clear_fix{*zoom:1;
}

3.内容列表布局过程

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米官网</title> <link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"> <!--注意，这个放在后面-->><style>.dress{margin-top:30px;}.header{height: 58px;line-height: 58px;}.dress .header .left-area{float: left;}.dress .header .right-area{float: right;font-size:14px;}.dress .header .right-area .item{margin-left: 15px;}.dress .header .right-area .item:hover,.dress .header .right-area .item.active{padding:3px 0;border-bottom: 2px solid red;color:red;}/*列表的内容*/.dress .list{margin-left: -14px;}.dress .list .item{float: left;/*box model*/width: 234px;height: 300px;margin-right: 14px;margin-bottom: 14px;background-color: #f00;}.dress .list .item.item1{/*注意：item.item1没有空格*/height: 614px;}.dress .list .item.item9,.dress .list .item.item10{height: 143px;}</style>
</head>
<body><!-- 设置浮动后 智能穿戴 和热门 穿戴是顶部对齐的 --><div class="mi_wrapper dress"><div class="header clear-fix"> <!-- common.css里的清浮动：clear_fix --><div class="left-area"><h3 class="title">智能穿戴</h3></div><div class="right-area"><a class="item active hot" href="#">热门</a> <!-- 一旦写a就要对a的默认样式进行重置 --><a class="item info" href="#">穿戴</a></div></div><div><ul class="list"><li class="item item1"><a href="#">1</a></li><li class="item item2"><a href="#">2</a></li><li class="item item3"><a href="#">3</a></li><li class="item item4"><a href="#">4</a></li><li class="item item5"><a href="#">5</a></li><li class="item item6"><a href="#">6</a></li><li class="item item7"><a href="#">7</a></li><li class="item item8"><a href="#">8</a></li><li class="item item9"><a href="#">9</a></li><li class="item item10"><a href="#">10</a></li></ul> </div></div></body>
</html>

rest.css 不变

body, h1, h2, h3, ul, li {margin: 0;padding: 0;
}a {text-decoration: none;color: #333;
}ul, li {list-style: none;
}/*对浏览器默认样式进行重置*/

common.css 不变

.mi_wrapper{width:1226px;margin:0 auto;  /*居中*/
}.clear-fix::after{content:"";display: block;clear: both;/*清除浮动*//*为了更好的兼容*/height: 0;visibility: hidden;
}/*为了更好的兼容*/
.clear_fix{*zoom:1;
}

4.hover动画效果（补充）

鼠标放上去，会有弹跳的效果

注意，我们发现为啥鼠标点到红色方块，a元素上没变成小手

原因是，a是inline元素，不会占据整个大小

解决方案；我们可以设置a为inline-block，给一个百分之百的宽度和高度。这样我们放上去后，会变成一个小手。

.dress .list .item a{display: inline-block;width: 100%;height: 100%;}

可以查MDN，看看支不支持动画（top支持）

.dress .list .item:hover{box-shadow: 0 15px 30px rgba(0,0,0,0.5);/*小手放上去会有阴影*//*小手放上去，快快会往上走一点*/position: relative;top:-2px;}

.dress .list .item{float: left;position: relative;top:0;/*box model*/width: 234px;height: 300px;margin-right: 14px;margin-bottom: 14px;background-color: #f00;/*动画*/transform: all 0.3s ease-in;}

二、考拉界面布局

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>考拉布局</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.sport {margin-top: 20px;background-color: orange;}.sport .item {float: left;height: 541px;}.sport .item.left {width: 330px;background-color: purple;}.sport .item.center {width: 550px;}.sport .center .center-item {float: left;width: 275px;height: 271px;box-sizing: border-box;border: 1px solid #000;border-left: none;}.sport .center .center-item:nth-last-child(-n+2) {margin-top: -1px;}.sport .item.right {width: 220px;}.sport .right .item {float: left;width: 220px;height: 121px;box-sizing: border-box;border: 1px solid #000;border-left: none;margin-top: -1px;}.sport .right .item.header {height: 61px;margin-top: 0;}</style>
</head>
<body><div class="kl_wrapper sport"><div class="item left"></div><div class="item center"><div class="center-item">1</div><div class="center-item">2</div><div class="center-item">3</div><div class="center-item">4</div></div><div class="item right"><div class="item header">header</div><!-- .item{$}*4 --><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div></div></body>
</html>

1.页面布局分析

如果一个东西有border,需要考虑清楚，给谁加边框

整体结构怎么划分？看成下面三个整体来做。先分成三个部分，然后一个个做。

注意：

2.整体和中间的布局

可以发现宽度刚好是1100

     .sport .item.item-left{width: 330px;}.sport .item.item-center{width: 550px;}.sport  .item.item-right{width: 220px;}

目前的效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>考拉布局</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.sport{height: 100px;margin-top: 20px;background-color: orange;}.sport .item{float:left;height: 541px;}.sport .item.item-left{width: 330px;background-color: purple;}.sport .item.item-center{width: 550px;background-color: skyblue;}.sport  .item.item-right{width: 220px;background-color: burlywood;}</style>
</head>
<body><div class="kl_wrapper sport"><div class="item item-left"></div><div class="item item-center"></div><div class="item item-right"></div></div></body>
</html>

common.css

.kl_wrapper{width: 1100px;margin: 0 auto;}.clear-fix::after{content:"";display: block;clear: both;/*清除浮动*//*为了更好的兼容*/height: 0;visibility: hidden;
}/*为了更好的兼容*/
.clear_fix{*zoom:1;
}

我们设置宽度为271px，蓝色块1的下边框被蓝色快3盖住，所以蓝色1的高度是270px，块3有上下边框，所以是271px

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>考拉布局</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.sport{height: 100px;margin-top: 20px;background-color: orange;}.sport .item{float:left;height: 541px;}.sport .item.left{width: 330px;background-color: purple;}.sport .item.center{width: 550px;background-color: skyblue;}.sport .center .center-item{float: left;width: 275px;height: 271px;box-sizing: border-box;/*让边框算在宽度里面*/border: 1px solid black;border-left: none;}.sport .center .center-item:nth-last-child(-n+2){margin-top: -1px;}.sport  .item.right{width: 220px;background-color: burlywood;}</style>
</head>
<body><div class="kl_wrapper sport"><div class="item left"></div><div class="item center"><div class="center-item">1</div><div class="center-item">2</div><div class="center-item">3</div><div class="center-item">4</div></div><div class="item right"></div></div></body>
</html>

3.右侧的布局

右侧，每块只用加三边的边框即可

box-sizing: border-box;

border:1px solid black;

border-left: none;

现在的状态

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>考拉布局</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><style>.sport{height: 100px;margin-top: 20px;background-color: orange;}.sport .item{float:left;height: 541px;}.sport .item.left{width: 330px;background-color: purple;}.sport .item.center{width: 550px;background-color: skyblue;}.sport .center .center-item{float: left;width: 275px;height: 271px;box-sizing: border-box;/*让边框算在宽度里面*/border: 1px solid black;border-left: none;}.sport .center .center-item:nth-last-child(-n+2){margin-top: -1px;}.sport  .item.right{width: 220px;background-color: burlywood;}.sport .right .item{float: left;width: 220px;height: 120px;box-sizing: border-box;border:1px solid black;border-left: none;}.sport .right .item.header{height: 60px;}</style>
</head>
<body><div class="kl_wrapper sport"><div class="item left"></div><div class="item center"><div class="center-item">1</div><div class="center-item">2</div><div class="center-item">3</div><div class="center-item">4</div></div><div class="item right"><div class="item header">header</div><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div></div></div></body>
</html>

我们可以这样做：

    .sport .right .item{float: left;width: 220px;height: 121px;box-sizing: border-box;border:1px solid black;border-left: none;margin-top: -1px;}.sport .right .item.header{height: 61px;margin-top: 0; }

11.[前端开发]Day11-HTML+CSS阶段练习(仿小米和考拉页面)

一、小米穿戴设备（浮动） 完整代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"vie…...

编程日记 2025/5/19 4:54:17

设计模式学习(二)

结构型适配器模式定义它允许将一个类的接口转换成客户端期望的另一个接口。适配器模式通常用于使不兼容的接口能够一起工作。适配器模式的角色目标接口（Target）：客户端期望的接口。适配者（Adaptee）&#xff…...

编程日记 2025/5/16 23:56:15

【Docker】快速部署 Nacos 注册中心

【Docker】快速部署 Nacos 注册中心引言 Nacos 注册中心是一个用于服务发现和配置管理的开源项目。提供了动态服务发现、服务健康检查、动态配置管理和服务管理等功能，帮助开发者更轻松地构建微服务架构。仓库地址 https://github.com/alibaba/nacos 步骤拉取…...

编程日记 2025/5/19 4:34:03

大白话讲清楚embedding原理

Embedding（嵌入）是一种将高维数据（如单词、句子、图像等）映射到低维连续向量的技术，其核心目的是通过向量表示捕捉数据之间的语义或特征关系。以下从原理、方法和应用三个方面详细解释Embedding的工作原理。一、Embe…...

编程日记 2025/5/19 4:15:48

pandas中的apply方法使用

apply 用于对 DataFrame 或 Series 中的数据进行逐行或逐列的操作。它可以接受一个函数（通常是 lambda 函数或自定义函数），并将该函数应用到每一行或每一列上。apply语法： DataFrame.apply(func, axis0, rawFalse, result_typeNo…...

编程日记 2025/5/19 4:12:23

简单易懂的倒排索引详解

文章目录简单易懂的倒排索引详解一、引言简单易懂的倒排索引详解二、倒排索引的基本结构三、倒排索引的构建过程四、使用示例1、Mapper函数2、Reducer函数五、总结简单易懂的倒排索引详解一、引言倒排索引是一种广泛应用于搜索引擎和大数据处理中的数据结构，…...

编程日记 2025/5/19 4:20:41

Nginx知识

nginx 精简的配置文件 worker_processes 1; # 可以理解为一个内核一个worker # 开多了可能性能不好events {worker_connections 1024; } # 一个 worker 可以创建的连接数 # 1024 代表默认一般不用改http {include mime.types;# 代表引入的配置文件# mime.types 在 ngi…...

编程日记 2025/5/19 4:22:36

CNN的各种知识点（三）：有关于VGG16 的结构展开的问题（1）

有关于VGG16 的结构展开的问题（1） 1. VGG16 的原生结构2. model.avgpool 的作用原生 VGG16 中没有 avgpool 层？代码中的 model.avgpool 是什么？ 3. model.classifier 的作用原生 VGG16 的 classifier用户代码中的 classifier 4. 为…...

编程日记 2025/5/19 4:19:19

vue3中el-input无法获得焦点的问题

文章目录现象两次nextTick()加setTimeout()解决结论现象 el-input被外层div包裹了，设置autofocus不起作用： <el-dialog v-model"visible" :title"title" :append-to-bodytrue width"50%"><el-form v-model&q…...

编程日记 2025/5/19 4:34:03

sqli-labs靶场通关

sqli-las通关 mysql数据库5.0以上版本有一个自带的数据库叫做information_schema,该数据库下面有两个表一个是tables和columns。tables这个表的table_name字段下面是所有数据库存在的表名。table_schema字段下是所有表名对应的数据库名。columns这个表的colum_name字段下是所有…...

编程日记 2025/5/19 4:40:37

深度学习深度解析：从基础到前沿

引言深度学习作为人工智能的一个重要分支，通过模拟人脑的神经网络结构来进行数据分析和模式识别。它在图像识别、自然语言处理、语音识别等领域取得了显著成果。本文将深入探讨深度学习的基础知识、主要模型架构以及当前的研究热点和发展趋势。基础概念与数学原理…...

编程日记 2025/5/19 4:01:55

sobel边缘检测算法

人工智能例子汇总：AI常见的算法和例子-CSDN博客 Sobel边缘检测算法是一种用于图像处理中的边缘检测方法，它能够突出图像中灰度变化剧烈的地方，也就是边缘。该算法通过计算图像在水平方向和垂直方向上的梯度来检测边缘，梯度值越大…...

编程日记 2025/5/14 3:02:44

LeetCode 349: 两个数组的交集

LeetCode 349: 两个数组的交集 - C语言问题描述给定两个数组 ransomNote 和 magazine，你需要判断 ransomNote 是否可以由 magazine 里的字符构成。每个字符可以使用一次。解题思路通过统计 magazine 中每个字符的频次，并与 ransomNote 中字符的需…...

编程日记 2025/5/19 3:02:42

MATLAB的数据类型和各类数据类型转化示例

一、MATLAB的数据类型在MATLAB中 ，数据类型是非常重要的概念，因为它们决定了如何存储和操作数据。MATLAB支持数值型、字符型、字符串型、逻辑型、结构体、单元数组、数组和矩阵等多种数据类型。MATLAB 是一种动态类型语言，这意味着变量的数…...

编程日记 2025/5/14 9:19:47

c++ list的front和pop_front的概念和使用案例—第2版

在 C 标准库中，std::list 的 front() 和 pop_front() 是与链表头部元素密切相关的两个成员函数。以下是它们的核心概念和具体使用案例： 1. front() 方法概念： 功能：返回链表中第一个元素的引用（直接访问头部元素&am…...

编程日记 2025/5/19 4:51:57

如何使用SliverList组件

文章目录 1 概念介绍2 使用方法3 示例代码我们在上一章回中介绍了沉浸式状态栏相关的内容，本章回中将介绍SliverList组件.闲话休提，让我们一起Talk Flutter吧。 1 概念介绍我们在这里介绍的SliverList组件是一种列表类组件，类似我们之前介…...

编程日记 2025/5/19 4:29:04

DIFY源码解析

偶然发现Github上某位大佬开源的DIFY源码注释和解析，目前还处于陆续不断更新地更新过程中，为大佬的专业和开源贡献精神点赞。先收藏链接，后续慢慢学习。相关链接如下： DIFY源码解析...

编程日记 2025/5/19 4:35:38

搜索引擎友好：设计快速收录的网站架构

本文来自：百万收录网原文链接：https://www.baiwanshoulu.com/14.html 为了设计一个搜索引擎友好的网站架构，以实现快速收录，可以从以下几个方面入手： 一、清晰的目录结构与层级合理划分内容：目录结构应…...

编程日记 2025/5/19 4:42:13

2007-2019年各省科学技术支出数据

2007-2019年各省科学技术支出数据 1、时间：2007-2019年 2、来源：国家统计局、统计年鉴 3、指标：行政区划代码、地区名称、年份、科学技术支出 4、范围：31省 5、指标解释：科学技术支出是指为促进科学研究、技术开发…...

编程日记 2025/5/19 4:22:36

【数据分析】案例03：当当网近30日热销图书的数据采集与可视化分析（scrapy+openpyxl+matplotlib）

当当网近30日热销图书的数据采集与可视化分析（scrapy+openpyxl+matplotlib）当当网近30日热销书籍官网写在前面实验目的：实现当当网近30日热销图书的数据采集与可视化分析。电脑系统：Windows 使用软件：Visual Studio Code Python版本：python 3.12.4 技术需求：scrapy、…...

编程日记 2025/5/19 4:30:59

DRM系列二：DRM总体介绍

一、简介 DRM，全称Direct Rending Manger。是目前Linux主流的图形显示框架。相比较传统的Framebuffer（FB原生不支持多层合成，不支持VSYNC，不支持DMA-BUF，不支持异步更新，不支持fence机制等等）&…...

编程日记 2025/5/19 4:01:54

步进电机的型号和分类

步进电机的型号和分类通常根据其尺寸、结构、相数、步距角等参数来区分。以下是一些常见的步进电机型号、分类方法以及如何识别它们的指南： 一、常见步进电机型号步进电机的型号通常由厂家命名，但也有一些通用的命名规则。以下是一些常见的型号系列&am…...

编程日记 2025/5/19 4:01:54

【力扣】15.三数之和

AC截图题目思路这道题如果简单的用暴力三重遍历去做，会超时。所以我们思考假如有三个下标，i，l，r 其中i0（初始），li1 rnums.size()-1 我们固定nums[i]的值，那么就转换为两数之和…...

编程日记 2025/5/18 5:36:31

Redis 基础命令

1. redis 命令官网 https://redis.io/docs/latest/commands/ 2. 在 redis-cli 中使用 help 命令 # 查看 help string 基础命令 keys * # * 代表通配符set key value # 设置键值对del key # 删除键expire key 时间 # 给键设置时间 # -2 代表时间到期了， -1 代表…...

编程日记 2025/5/19 3:55:24

CSES Missing Coin Sum

思路是对数组排序设 S [ i ] S[i] S[i] 是数组的前缀和 R [ i ] R[i] R[i] 是递增排序后的数组遍历数组，如果出现 S [ i − 1 ] 1 < R [ i ] S[i - 1] 1 < R[i] S[i−1]1<R[i]，就代表S[i - 1] 1是不能被合成出来的数字因为&#xff1a…...

编程日记 2025/5/19 4:40:37

Python中的数据类（dataclass）：简化类的定义与数据管理

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界随着Python语言的发展，代码的简洁性与可维护性变得愈发重要。Python 3.7引入的dataclass模块为数据类的定义提供了一种简便而高效的方式，…...

编程日记 2025/5/18 5:51:52

Java线程认识和Object的一些方法ObjectMonitor

专栏系列文章地址：https://blog.csdn.net/qq_26437925/article/details/145290162 本文目标： 要对Java线程有整体了解，深入认识到里面的一些方法和Object对象方法的区别。认识到Java对象的ObjectMonitor，这有助于后面的Synchron…...

编程日记 2025/5/19 4:29:04

使用真实 Elasticsearch 进行高级集成测试

作者：来自 Elastic Piotr Przybyl 掌握高级 Elasticsearch 集成测试：更快、更智能、更优化。在上一篇关于集成测试的文章中，我们介绍了如何通过改变数据初始化策略来缩短依赖于真实 Elasticsearch 的集成测试的执行时间。在本期中&#xff0…...

编程日记 2025/5/19 4:22:36

统计学中的样本概率论中的样本

不知道当初谁想的把概率论和数理统计合并，作为一门课。这本身是可以合并，完整的一条线，看这里。但是，作为任课老师应该从整体上交代清楚，毕竟是两个学科，不同的学科合并必然会有各种不协调的问题。举个最…...

编程日记 2025/5/12 9:46:26

SQL 总结

SQL 总结引言 SQL（Structured Query Language）是一种用于管理关系数据库的计算机语言。自从1970年代被发明以来，SQL已经成为了数据库管理的基础。本文将对SQL的基本概念、常用命令、高级特性以及SQL在数据库管理中的应用进行总结。 SQL基本概念数据库数据库是存储数…...

编程日记 2025/5/15 3:11:14

Openfga 授权模型搭建

1.根据项目去启动配置一个 openfga 服务器先创建一个 config.yaml文件 cd /opt/openFGA/conf touch ./config.yaml 怎么配置？ 根据官网来看 openfga/.config-schema.json at main openfga/openfga GitHub 这里讲述详细的每一个配置每一个类型这些配置有…...

编程日记 2025/5/19 4:05:28

【Proteus】NE555纯硬件实现LED呼吸灯效果，附源文件，效果展示

本文通过NE555定时器芯片和简单的电容充放电电路，设计了一种纯硬件实现的呼吸灯方案，并借助Proteus仿真软件验证其功能。方案无需编程，成本低且易于实现，适合电子爱好者学习PWM（脉宽调制）和定时器电路原理。一、呼吸灯原理与NE555功能分析 1. 呼吸灯核心原理呼吸灯的…...

编程日记 2025/5/14 5:26:14

本系列文章基于linux 5.15 一、drm_core_init 执行一些drm core的初始化工作 static int __init drm_core_init(void) {int ret;drm_connector_ida_init();idr_init(&drm_minors_idr);drm_memcpy_init_early();ret drm_sysfs_init();if (ret < 0) {DRM_ERROR("…...

编程日记 2025/5/19 4:43:54

Clock Controller of RH850/F1KH-D8, RH850/F1KM-S4, RH850/F1KM-S2

&esmp; 时钟控制器由时钟振荡电路、时钟选择电路、和时钟输出电路组成。 RH850/F1KH、RH850/F1KM单片机的时钟控制器具有以下特点: 六个片上时钟振荡器：主振荡器（MainOSC），振荡频率分别为8、16、20和24 MHz子振荡器(SubOSC)，振荡频率为32.768 kHz*1 100针的产品…...

编程日记 2025/5/19 4:29:03

kamailio-auth模块详解【以下内容来源于官网，本文只做翻译】

以下是《Auth 模块》文档的中文翻译： Auth 模块作者：Jan Janak FhG Fokus janiptel.org Juha Heinanen TutPro Inc jhsong.fi Daniel-Constantin Mierla asipto.com micondagmail.com 版权所有 © 2002, 2003 FhG FOKUS 官网链接: https://kamaili…...

编程日记 2025/5/19 4:24:13

从TypeScript到ArkTS的适配指导

文章目录一、ArkTS语法适配背景程序稳定性程序性能.ets代码兼容性支持与TS/JS的交互方舟运行时兼容TS/JS二、从TypeScript到ArkTS的适配规则概述强制使用静态类型禁止在运行时变更对象布局限制运算符的语义不支持 structural typing约束说明限制使用标准库一、ArkTS语法适配背…...

编程日记 2025/5/19 4:10:58

Git 版本控制：基础介绍与常用操作

目录 Git 的基本概念 Git 安装与配置 Git 常用命令与操作 1. 初始化本地仓库 2. 版本控制工作流程 3. 分支管理 4. 解决冲突 5. 回退和撤销 6. 查看提交日志前言在软件开发过程中，开发者常常需要在现有程序的基础上进行修改和扩展。但如果不加以管理&am…...

编程日记 2025/5/19 4:14:08

【Python】理解Python中的协程和生成器：从yield到async

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界在现代编程中，异步编程成为提升程序性能和响应速度的重要手段。Python作为一门功能强大的编程语言，提供了丰富的工具来实现异步操作，其中…...

编程日记 2025/5/18 17:16:36

Unity开发游戏使用XLua的基础

Unity使用Xlua的常用编码方式，做一下记录 1、C#调用lua 1、Lua解析器 private LuaEnv env new LuaEnv();//保持它的唯一性void Start(){env.DoString("print(你好lua)");//env.DoString("require(Main)"); 默认在resources文件夹下面//帮助…...

编程日记 2025/5/19 3:55:24

什么是区块链

区块链是一种去中心化的分布式账本技术，它通过一系列复杂而精密的设计原则和机制来确保数据的安全性、透明性和不可篡改性。在最基础的层面上，区块链是由一系列按照时间顺序链接起来的数据块组成的链式结构。每个数据块中包含了一定数量的交易记录或状态…...

编程日记 2025/5/19 4:03:27

C++中的析构器（Destructor）（也称为析构函数）

在C中，析构器（Destructor）也称为析构函数，它是一种特殊的成员函数，用于在对象销毁时进行资源清理工作。以下是关于C析构器的详细介绍： 析构函数的特点名称与类名相同，但前面有一个波浪号 ~&a…...

编程日记 2025/5/19 4:05:29

【ts + java】古玩系统开发总结

src别名的配置开发中文件和文件的关系会比较复杂，我们需要给src文件夹一个别名吧 vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue import path from path// https://vitejs.dev/config/ export default defineConfig({pl…...

编程日记 2025/5/19 4:05:28

NLP深度学习 DAY5：Sequence-to-sequence 模型详解

Seq2Seq（Sequence-to-Sequence）模型是一种用于处理输入和输出均为序列任务的深度学习模型。它最初被设计用于机器翻译，但后来广泛应用于其他任务，如文本摘要、对话系统、语音识别、问答系统等。核心思想 Seq2Seq 模型的目标是将…...

编程日记 2025/5/19 4:10:57

音视频多媒体编解码器基础-codec

如果要从事编解码多媒体的工作，需要准备哪些更为基础的内容，这里帮你总结完。因为数据类型不同所以编解码算法不同，分为图像、视频和音频三大类；因为流程不同，可以分为编码和解码两部分；因为编码器实现不…...

编程日记 2025/5/19 3:47:44

数据分析系列--⑦RapidMiner模型评价(基于泰坦尼克号案例含数据集)

一、前提二、模型评估 1.改造⑥ 2.Cross Validation算子说明 2.1Cross Validation 的作用 2.1.1 模型评估 2.1.2 减少过拟合 2.1.3 数据利用 2.2 Cross Validation 的工作原理 2.2.1 数据分割 2.2.2 迭代训练与测试 2.2.3 结果汇总 …...

编程日记 2025/5/11 5:19:34

【react+redux】 react使用redux相关内容

首先说一下，文章中所提及的内容都是我自己的个人理解，是我理逻辑的时候，自我说服的方式，如果有问题有补充欢迎在评论区指出。一、场景描述为什么在react里面要使用redux，我的理解是因为想要使组件之间的通信更便捷…...

编程日记 2025/5/15 3:04:46

nacos 配置管理、配置热更新、动态路由

文章目录配置管理引入jar包添加 bootstrap.yaml 文件配置在application.yaml 中添加自定义信息nacos 配置信息配置热更新采用第一种配置根据服务名确定配置文件根据后缀确定配置文件动态路由DynamicRouteLoaderNacosConfigManagerRouteDefinitionWriter 路由配置配置管理 …...

编程日记 2025/5/17 12:57:33

前端知识速记：节流与防抖

前端知识速记：节流与防抖什么是防抖？ 防抖是一种控制事件触发频率的方法，通常用于处理用户频繁触发事件的场景。防抖的核心思想是将多个连续触发事件合并为一个事件，以减少执行次数。它在以下场景中特别有效： 输入…...

编程日记 2025/5/11 6:11:08

2.攻防世界PHP2及知识点

进入题目页面如下意思是你能访问这个网站吗？ ctrlu、F12查看源码，什么都没有发现用kali中的dirsearch扫描根目录命令如下，根据题目提示以及需要查看源码，扫描以php、phps、html为后缀的文件 dirsearch -u http://61.147.17…...

编程日记 2025/5/15 13:22:38

【ubuntu】双系统ubuntu下一键切换到Windows

ubuntu下一键切换到Windows 1.4.1 重启脚本1.4.2 快捷方式1.4.3 移动快捷方式到系统目录按前文所述文档，开机默认启动ubuntu。Windows切换到Ubuntu直接重启就行了，而Ubuntu切换到Windows稍微有点麻烦。可编辑切换重启到Windows的快捷方式。 1.4.1 重启…...

编程日记 2025/5/14 14:37:09

一、小米穿戴设备（浮动）

完整代码

1.区域抽取

2.头部的布局

3.内容列表布局过程

4.hover动画效果（补充）

二、考拉界面布局

完整代码

1.页面布局分析

2.整体和中间的布局

3.右侧的布局

相关文章：