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

【前端】CSS技巧与样式优化

news 文章来源：https://blog.csdn.net/weixin_45490023/article/details/132466269 2025/1/27 12:31:37

目录

  • 一、前言
  • 二、精灵图
    • 1、什么是精灵图
    • 2、为什么需要精灵图
    • 3、精灵图的使用
      • ①、创建CSS精灵图的步骤
        • 1）、选择合适的图标
        • 2）、合并图片
        • 3）、设置背景定位
      • ②、优化CSS精灵图的技巧
        • 1）、维护方便
        • 2）、考虑Retina屏幕
        • 3）、使用CSS预处理器
      • ③、使用精灵图核心
    • 3、精灵图案例
  • 三、CSS三角
    • 1、实现四个三角
    • 2、实现一个三角
    • 3、实现直角三角形
    • 4、案例实现
  • 四、CSS用户界面样式
    • 1、更改用户的鼠标样式cursor
      • ①、属性样式
    • 2、表单轮廓outline
    • 3、防止表单域拖拽resize
  • 五、vertical-align属性
    • 1、语法
    • 2、什么是顶线、中线、基线、底线
    • 3、代码示例
    • 4、文字于图片垂直居中案例
    • 5、图片、表单和文字对齐
    • 6、解决图片底部默认空白缝隙问题
      • ①、出现图片底部默认空白缝隙问题的原因
      • ②、如何解决图片底部默认空白缝隙问题
        • 1）、给图片添加vertical-align: middle | top | bottom
        • 2）、把图片转换为块元素display：block
  • 六、溢出的文字省略号显示
    • 1、单行文本溢出显示省略号
      • ①、单行文本溢出显示省略号-三个必要条件
      • ②、代码示例
    • 2、多行文本溢出显示省略号
  • 七、常见布局技巧
    • 1、margin负值的运用
    • 2、文字围绕浮动元素
    • 3、 行内块的巧妙运用
      • ①、如何实现以下图片的效果
      • ②、代码实现
    • 4、css三角强化
      • ①、如何实现以下图片中紫色框出的效果
      • ②、代码实现
  • 八、总结

一、前言

CSS作为前端开发的重要组成部分，不仅赋予网页美观的外观，还能为用户提供良好的交互体验。本文将深入探讨CSS中的精灵图、三角效果、用户界面样式、溢出省略号以及常见布局技巧，帮助你更好地运用CSS，打造出更加吸引人的网页界面。

二、精灵图

1、什么是精灵图

CSS精灵图是将多个小图标或图片合并成一张大图，然后通过CSS的背景定位来显示需要的部分。这样做的好处是减少了HTTP请求的数量，从而加快了页面加载速度。

2、为什么需要精灵图

我们写的网页是需要放到服务器中的，这样任何人打开浏览器输入我们的网址就可以访问我们的网页。

在这里插入图片描述

当我们在浏览器中点击某个图片时，这时会往服务器中发送请求，然后服务器接受请求后，会把相应的图片返给页面

在这里插入图片描述
一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求图片，造成服务器请求压力过大，这将大大降低页面地加载速度。因此，为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（CSS Sprites）

CSS精灵技术核心原理：将网页中的一些小背景图片整合到一张大图中，这样服务器只需要一次请求即可。

在这里插入图片描述在这里插入图片描述

当我想要大图中的某一个图像时，服务器会直接把大图返回给页面，这样当再次想要某个图像时，就不需要再次进行发送请求了。

3、精灵图的使用

①、创建CSS精灵图的步骤

1）、选择合适的图标

选择需要合并的小图标或图片

2）、合并图片

使用工具将小图标合并成一张大图，保留透明区域

3）、设置背景定位

在CSS中使用“background-position”属性来定位需要显示的部分

②、优化CSS精灵图的技巧

1）、维护方便

精灵图的管理可能会变得复杂，需要有良好的命名和维护策略

2）、考虑Retina屏幕

为高分辨率屏幕提供2倍大小的图标，使用“background-size”来使用Retina屏幕

3）、使用CSS预处理器

使用Less、Sass等预处理器可以更方便地生成精灵图地样式代码

③、使用精灵图核心

  • 精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中
  • 移动背景图片位置，可以使用background-position
  • 一般情况下精灵图都是负值（x轴右边走是正值，左边走是负值，y轴同理）

3、精灵图案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>精灵图使用</title><style>.box1 {width: 260px;height: 430px;background: url(../02/image/0001.png) no-repeat -185px 0;margin: 100px auto;}.box2{width: 40px;height: 40px;margin: 200px;background: url(../02/image/0002.png) no-repeat -185px -199px;}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body></html>

在这里插入图片描述

三、CSS三角

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标
避免浏览器不兼容的问题，可以加上这两个属性
line-height: 0;
font-size: 0;

1、实现四个三角

定义一个盒子，宽度和高度均为0，然后定义该盒子的四个边框即可。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS三角</title><style>.box1 {width: 0;height: 0;line-height: 0;font-size: 0;border-top: 30px solid palevioletred;border-bottom: 30px solid pink;border-left: 30px solid orange;border-right: 30px solid palegreen;}</style>
</head><body><div class="box1"></div>
</body></html>

在这里插入图片描述

2、实现一个三角

定义其中一个边框的样式即可

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS三角</title><style>.box2 {width: 0;height: 0;line-height: 0;font-size: 0;margin-top: 40px;border: 100px solid transparent;border-top-color: blueviolet;}</style>
</head><body><div class="box2"></div>
</body></html>

在这里插入图片描述

3、实现直角三角形

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS三角</title><style>.box1 {width: 0;height: 0;line-height: 0;font-size: 0;border-top: 70px solid transparent;border-bottom: 0 solid transparent;border-left: 0 solid transparent;border-right: 30px solid purple;}</style>
</head><body><div class="box1"></div>
</body></html>

在这里插入图片描述

4、案例实现

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS三角</title><style>.box3 {width: 120px;height: 240px;position: relative;background-color: palevioletred;}.box3 span {width: 0;height: 0;line-height: 0;font-size: 0;position: absolute;right: 30px;top: -17px;border: 10px solid transparent;border-bottom-color: palevioletred;}</style>
</head><body><div class="box3"><span></span></div>
</body></html>

在这里插入图片描述

四、CSS用户界面样式

1、更改用户的鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

//语句
li{cursor: pointer;
}

①、属性样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标样式</title><style>.li1 {cursor: default;}.li2 {cursor: pointer;}.li3 {cursor: move;}.li4 {cursor: text;}.li5 {cursor: not-allowed;}</style>
</head><body><ul><li class="li1">默认小白鼠标样式</li><br><li class="li2">鼠标小手样式</li><br><li class="li3">鼠标移动样式</li><br><li class="li4">鼠标文本样式</li><br><li class="li5">鼠标禁止样式</li></ul>
</body></html>

2、表单轮廓outline

给表单添加outline:0，或者outline:none样式之后，就可以去掉默认的蓝色边框

//语法
outline：none

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮廓线和防止拖移</title><style>input{width: 200px;height: 100px;outline: none;}</style>
</head>
<body><input type="text">
</body>
</html>

在这里插入图片描述
在这里插入图片描述

3、防止表单域拖拽resize

实例开发中，文本域右下角是不可以拖拽的

//语法
textarea{resize: none
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮廓线和防止拖移</title><style>textarea{resize: none;outline: none;}</style>
</head>
<body><textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

五、vertical-align属性

1、CSS的vertical-align属性使用场景：用于设置图片或者表单（行内块元素）和文字垂直对齐
2、用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效

1、语法

vertical-align: baseline  top middle bottom

2、什么是顶线、中线、基线、底线

在这里插入图片描述

3、代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="../02/images/taobao.webp">pink
</body>
</html>

在这里插入图片描述

4、文字于图片垂直居中案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{vertical-align: middle;}</style>
</head>
<body><img src="../02/images/taobao.webp">pink
</body>
</html>

在这里插入图片描述

5、图片、表单和文字对齐

图片、表单都属于行内块元素，默认的vertical-align是基线对齐
在这里插入图片描述

那么如何给图片文字实现垂直居中呢？

此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了

6、解决图片底部默认空白缝隙问题

当在盒子中添加一张图片时，运行页面后，发现图片的底部有空白缝隙的问题。而这个盒子没有设置高度和宽度。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{border: 2px solid palegreen;}</style>
</head>
<body><div><img src="../02/images/taobao.webp"></div>
</body>
</html>

在这里插入图片描述

①、出现图片底部默认空白缝隙问题的原因

行内块元素会和文字的基线对齐

在这里插入图片描述

②、如何解决图片底部默认空白缝隙问题

1）、给图片添加vertical-align: middle | top | bottom

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{border: 2px solid palegreen;}img{vertical-align: bottom;}</style>
</head>
<body><div><img src="../02/images/taobao.webp">哈哈哈</div>
</body>
</html>

在这里插入图片描述

2）、把图片转换为块元素display：block

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{border: 2px solid palegreen;}img{display: block;}</style>
</head>
<body><div><img src="../02/images/taobao.webp"></div>
</body>
</html>

在这里插入图片描述

六、溢出的文字省略号显示

1、单行文本溢出显示省略号

①、单行文本溢出显示省略号-三个必要条件

/* 1. 先强制一行内显示文本 （默认normal自动换行） */
white-space: nowrap; 
/* 2. 超出的部分隐藏 */
overflow: hidden;
/* 3. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

②、代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 180px;height: 200px;/* 1. 先强制一行内显示文本 （默认normal自动换行） */white-space: nowrap;/* 2. 超出的部分隐藏 */overflow: hidden;/* 3. 文字用省略号替代超出的部分 */text-overflow: ellipsis;}</style>
</head>
<body><div>如果你设计的软件猪不能使你就是猪</div>
</body>
</html>

在这里插入图片描述

2、多行文本溢出显示省略号

多行文本溢出显示省略号，有较大的兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 180px;height: 200px;overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块级元素显示的文本的行数 */-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;}</style>
</head>
<body><div>如果你设计的软件猪不能使你就是猪;让每一个软件使用者都成为我们软件的设计者</div>
</body>
</html>

在这里插入图片描述

七、常见布局技巧

1、margin负值的运用

  • 让每个盒子margin往走测移动-1px正好压住相邻盒子边框
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin负值的巧妙运用</title><style>ul li{width: 150px;height: 200px;border: 1px solid red;list-style: none;float: left;margin-left: -1px;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>

在这里插入图片描述

  • 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）
    没有定位，则加相对定位
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin负值的巧妙运用</title><style>ul li{width: 150px;height: 200px;border: 1px solid red;list-style: none;float: left;margin-left: -1px;}ul li:hover{border: 2px solid purple;position: relative;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>

在这里插入图片描述
有定位，则加z-index

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin负值的巧妙运用</title><style>ul li{position: relative;width: 150px;height: 200px;border: 1px solid red;list-style: none;float: left;margin-left: -1px;}ul li:hover{border: 2px solid purple;z-index: 1;}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>

在这里插入图片描述

2、文字围绕浮动元素

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字围绕浮动元素</title><style>.box{width: 300px;height: 145px;background-color: rgb(150, 180, 114);margin: 100px auto;padding: 5px;}.image{float: left;width: 128px;height: 145px;margin-right: 5px;}.image img{width: 100%;}</style>
</head>
<body><div class="box"><div class="image"><img src="../02/image/0001.png" alt=""></div><p>如果你设计的软件猪不能使你就是猪;让每一个软件使用者都成为我们软件的设计者</p></div>
</body>

在这里插入图片描述

3、 行内块的巧妙运用

①、如何实现以下图片的效果

在这里插入图片描述

②、代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行内块巧妙运用</title><style>*{margin: 0;padding: 0;}.box {text-align: center;}.box a {width: 36px;height: 36px;display: inline-block;background-color: #f7f7f7;border: 1px solid #ccc;line-height: 36px;text-align: center;/* 取消下划线 */text-decoration: none;color: #333;font-size: 14px;}.box .btn1,.box .btn2 {width: 85px;}.box .current,.box .elp {background-color: #fff;border: none;}.box input {width: 45px;height: 36px;border: 1px solid #ccc;/* 取消点击时的蓝色/黑色边框 */outline: none;}.box button {width: 60px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;}</style>
</head><body><div class="box"><a href="#" class="btn1">&lt;&lt;上一页</a><a href="#">1</a><a href="#" class="current">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#" class="elp">...</a><a href="#" class="btn2">&gt;&gt;下一页</a>到第<input type="text">页<button>确定</button></div>
</body></html>

在这里插入图片描述

4、css三角强化

①、如何实现以下图片中紫色框出的效果

在这里插入图片描述

②、代码实现

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS三角</title><style>.box1 {width: 0;height: 0;line-height: 0;font-size: 0;border-top: 70px solid transparent;border-bottom: 0 solid transparent;border-left: 0 solid transparent;border-right: 30px solid purple;}.price{width: 160px;height: 24px;border: 1px solid red;margin: 0 auto;text-align: center;}.one{position: relative;float: left;width: 90px;height: 100%;background-color: red;color: #fff;font-weight: 700;margin-right: 8px;}.one i{position: absolute;top: 0;right: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.two{font-size: 13px;color: gray;text-decoration: line-through;}</style>
</head><body><div class="box1"></div><div class="price"><span class="one">$1234<i></i></span><span class="two">$2345</span></div>
</body>

在这里插入图片描述

八、总结

通过精灵图、CSS三角、用户界面样式、垂直对齐、溢出省略号以及常见布局技巧的运用，我们可以更加灵活地控制网页的样式和布局，为用户呈现出更美观、交互性更强的网页界面。

相关文章：

【前端】CSS技巧与样式优化

目录 一、前言二、精灵图1、什么是精灵图2、为什么需要精灵图3、精灵图的使用①、创建CSS精灵图的步骤1&#xff09;、选择合适的图标2&#xff09;、合并图片3&#xff09;、设置背景定位 ②、优化CSS精灵图的技巧1&#xff09;、维护方便2&#xff09;、考虑Retina屏幕3&…...

编程日记 2023/8/25 5:52:15

Linux下的系统编程——makefile入门

前言&#xff1a; 或许很多Winodws的程序员都不知道这个东西&#xff0c;因为那些Windows的IDE都为你做了这个工作&#xff0c;但我觉得要作一个好的和professional的程序员&#xff0c;makefile还是要懂。这就好像现在有这么多的HTML的编辑器&#xff0c;但如果你想成为一个专…...

编程日记 2023/8/25 5:51:14

redis常用五种数据类型详解

目录 前言&#xff1a; string 相关命令 内部编码 应用场景 hash 相关命令 内部编码 应用场景 list 相关命令 内部编码 应用场景 set 相关命令 内部编码 应用场景 Zset 相关命令 内部编码 应用场景 渐进式遍历 前言&#xff1a; redis有多种数据类型&…...

编程日记 2023/8/25 5:50:13

Python代理池健壮性测试 - 压力测试和异常处理

大家好&#xff01;在构建一个可靠的Python代理池时&#xff0c;除了实现基本功能外&#xff0c;我们还需要进行一系列健壮性测试来确保其能够稳定运行&#xff0c;并具备应对各种异常情况的能力。本文将介绍如何使用压力测试工具以及合适的异常处理机制来提升Python代理池的可…...

编程日记 2023/8/25 5:49:10

回文子串-中心拓展

给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。 回文字符串 是正着读和倒过来读一样的字符串。 子字符串 是字符串中的由连续字符组成的一个序列。 具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字符组成&#xff0c;也会被视作不…...

编程日记 2023/8/25 5:48:09

2023.8各大浏览器11家对比：Edge/Chrome/Opera/Firefox/Tor/Vivaldi/Brave，安全性，速度，体积，内存占用

测试环境&#xff1a;全默认设置的情况下&#xff0c;均在全新的系统上进行测试&#xff0c;系统并未进行任何改动&#xff0c;没有杀毒软件&#xff0c;浏览器进程全部在后台&#xff0c;且为小窗模式&#xff0c;小窗分辨率均为浏览器厂商默认缩放大小(变量不唯一)&#xff0…...

编程日记 2023/8/25 5:47:08

python中的matplotlib画散点图（数据分析与可视化）

python中的matplotlib画散点图&#xff08;数据分析与可视化&#xff09; import numpy as np import pandas as pd import matplotlib.pyplot as pltpd.set_option("max_columns",None) plt.rcParams[font.sans-serif][SimHei] plt.rcParams[axes.unicode_minus]Fa…...

编程日记 2023/8/25 5:46:07

2023前端面试笔记 —— HTML5

系列文章目录 内容链接2023前端面试笔记HTML5 文章目录 系列文章目录前言一、HTML 文件中的 DOCTYPE 是什么作用二、HTML、XML、XHTML 之间有什么区别三、前缀为 data- 开头的元素属性是什么四、谈谈你对 HTML 语义化的理解五、HTML5 对比 HTML4 有哪些不同之处六、meta 标签有…...

编程日记 2023/8/25 5:45:07

【LeetCode】面试题总结 消失的数字 最小k个数

1.消失的数字 两种思路 1.先升序排序&#xff0c;再遍历并且让后一项与前一项比较 2.转化为数学问题求等差数列前n项和 &#xff08;n的大小为数组的长度&#xff09;&#xff0c;将根据公式求得的应有的和数与数组中实际的和作差 import java.util.*; class Solution {public …...

编程日记 2023/8/25 5:44:05

导入功能importExcel (现成直接用)

1. 实体类字段上加 Excel(name "xxx"), 表示要导入的字段 Excel(name "用户名称")private String nickName; 2. controller (post请求) /*** 导入用户数据** param file 文件* param updateSupport 是否更新支持&#xff0c;如果已存在&#xff0c;则进…...

编程日记 2023/8/25 5:43:02

cvc-complex-type.2.4.a: 发现了以元素 ‘base-extension‘ 开头的无效内容。应以 ‘{layoutlib}‘ 之一开头

不能飞的猪只是没用的猪。 —— 宫崎骏 《红猪》 常见的1种case 记录一下&#xff0c;新电脑安装android studio导入公司那些gradle还是5.5左右的工程以后&#xff0c;各种不适应。编译问题出现了。老电脑都是好好的。 cvc-complex-type.2.4.a: 发现了以元素 ‘base-extensi…...

编程日记 2023/8/25 5:42:01

cortex-A7核IIC实验

iic.h&#xff1a; #ifndef __IIC_H__ #define __IIC_H__ #include "stm32mp1xx_gpio.h" #include "stm32mp1xx_rcc.h"/* 通过程序模拟实现I2C总线的时序和协议* GPIOF ---> AHB4* I2C1_SCL ---> PF14* I2C1_SDA ---> PF15** */#define SET_SDA_…...

编程日记 2023/8/25 5:40:58

task.run()和 await task.run() 区别 await 运行机制

Task.Run() 和 await Task.Run() 都涉及异步编程&#xff0c;但它们在使用场景和效果上有一些区别。1. **Task.Run()&#xff1a;**- Task.Run() 是一个用于在后台线程上执行代码块的方法。它将指定的代码块包装在一个新的Task中&#xff0c;并在后台线程上运行。它不会阻塞调用…...

编程日记 2023/8/25 5:39:57

LeetCode面试经典150题（day 2）

26. 删除有序数组中的重复项 难度:简单 给你一个 升序排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯…...

编程日记 2023/8/25 5:38:55

阿里云机器学习PAI全新推出特征平台 (Feature Store)，助力AI建模场景特征数据高效利用

推荐算法与系统在全球范围内已得到广泛应用&#xff0c;为用户提供了更个性化和智能化的产品推荐体验。在推荐系统领域&#xff0c;AI建模中特征数据的复用、一致性等问题严重影响了建模效率。阿里云机器学习平台 PAI 推出特征平台&#xff08;PAI-FeatureStore&#xff09; 。…...

编程日记 2023/8/25 5:37:54

网络安全工具和资源推荐： 介绍网络安全领域中常用的工具、框架、资源和学习资料

章节1: 前言 随着数字化时代的不断深入&#xff0c;网络安全的重要性愈发凸显。在这个信息爆炸的时代&#xff0c;我们必须保护个人隐私、敏感数据以及网络基础设施免受各种威胁。本文将为您介绍一些网络安全领域中常用的工具、框架、资源和学习资料&#xff0c;帮助您更好地入…...

编程日记 2023/8/25 5:36:53

『C语言入门』探索C语言函数

文章目录 导言一、函数概述定义与作用重要性 二、函数分类库函数自定义函数定义使用好处 三、函数参数实际参数&#xff08;实参&#xff09;形式参数&#xff08;形参&#xff09;内存分配 四、函数调用传值调用传址调用 五、函数嵌套调用与链式访问嵌套调用链式访问 六、函数…...

编程日记 2023/8/25 5:35:51

Django基础3——视图函数

文章目录 一、基本了解1.1 Django内置函数1.2 http请求流程 二、HttpRequest对象&#xff08;接受客户端请求&#xff09;2.1 常用属性2.2 常用方法2.3 服务端接收URL参数2.4 QueryDict对象2.5 案例2.5.1 表单GET提交2.5.2 表单POST提交2.5.3 上传文件 三、HttpResponse对象&am…...

编程日记 2023/8/25 5:34:50

python 基础篇 day 4 选择结构—— if 结构

文章目录 if 基础结构单 if 语句if-else 语句if-elif-else 语句嵌套的 if 语句 if 进阶用法使用比较运算符使用逻辑运算符使用 in 关键字range() 函数使用 is 关键字使用 pass 语句 三目运算符语法例子注意补充举例注意 if 基础结构 单 if 语句 if 条件: 执行条件为真时的代码…...

编程日记 2023/8/25 5:33:49

科技赋能，教育革新——大步迈向体育强国梦

在 "全民健身"、"体育强国建设"战略的推进下&#xff0c;体育考试成绩被纳入重要升学考试且分值不断提高&#xff0c;体育科目的地位逐步上升到前所未有的高度&#xff0c;在此趋势下&#xff0c;体育教学正演变出更多元化、个性化的需求。然而现实中却面临…...

编程日记 2023/8/25 5:32:48

【秋招基础】后端开发——笔面试常见题目

综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了秋招算法的&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于网上知识点进行的&#xff0c;每个代码参考热门博客和GPT3.5&#xff0…...

编程日记 2023/8/25 5:31:46

自定义loadbalance实现feignclient的自定义路由

自定义loadbalance实现feignclient的自定义路由 项目背景 服务A有多个同事同时开发&#xff0c;每个同事都在dev或者test环境发布自己的代码&#xff0c;注册到注册中心有好几个(本文nacos为例)&#xff0c;这时候调用feign可能会导致请求到不同分支的服务上面&#xff0c;会…...

编程日记 2023/8/25 5:30:45

论文笔记：从不平衡数据流中学习的综述: 分类、挑战、实证研究和可重复的实验框架

0 摘要 论文&#xff1a;A survey on learning from imbalanced data streams: taxonomy, challenges, empirical study, and reproducible experimental framework 发表&#xff1a;2023年发表在Machine Learning上。 源代码&#xff1a;https://github.com/canoalberto/imba…...

编程日记 2023/8/25 5:29:44

C#设计模式六大原则之--迪米特法则

设计模式六大原则是单一职责原则、里氏替换原则、依赖倒置原则、接口隔离原则、迪米特法则、开闭原则。它们不是要我们刻板的遵守&#xff0c;而是根据实际需要灵活运用。只要对它们的遵守程度在一个合理的范围内&#xff0c;努为做到一个良好的设计。本文主要介绍一下.NET(C#)…...

编程日记 2023/8/25 5:28:42

一次js请求一般情况下有哪些地方会有缓存处理？

目录 1、DNS缓存 2、CDN缓存 3、浏览器缓存 4、服务器缓存 1、DNS缓存 DNS缓存指DNS返回了正确的IP之后&#xff0c;系统就会将这个结果临时储存起来。并且它会为缓存设定一个失效时间 (例如N小时)&#xff0c;在这N小时之内&#xff0c;当你再次访问这个网站时&#xff0…...

编程日记 2023/8/25 5:27:41

CSDN编程题-每日一练（2023-08-24）

CSDN编程题-每日一练（2023-08-24） 一、题目名称：计算公式二、题目名称：蛇形矩阵三、题目名称：小玉家的电费一、题目名称：计算公式 时间限制：1000ms内存限制：256M 题目描述： 给定整数n。 计算公式： n i-1 ∑ ∑ [gcd(i + j, i - j) = 1] i=1 j=1 输入描述： 输入整数n…...

编程日记 2023/8/25 5:26:37

怎么把PDF转成Word？需要注意什么事项？

PDF是一种常见的文档格式&#xff0c;但是与Word文档不同&#xff0c;PDF文件通常不能直接编辑。如果您想编辑PDF文件中的文本&#xff0c;或者想将PDF文件转换为Word文档&#xff0c;下面我们就来看一看把PDF转成Word有哪些方法和注意事项。 PDF转Word工具 有许多将PDF转换为…...

编程日记 2023/8/25 5:25:36

USACO22OPEN Pair Programming G

P8273 [USACO22OPEN] Pair Programming G 题目大意 一个程序由一系列指令组成&#xff0c;每条指令的类型如下&#xff1a; d \times d d&#xff0c;其中 d d d是一个 [ 0 , 9 ] [0,9] [0,9]范围内的整数 s s s&#xff0c;其中 s s s是一个表示变量名称的字符串&#xff…...

编程日记 2023/8/25 5:24:34

实战分享之springboot+easypoi快速业务集成

1.依赖引入 <!--引入EasyPOI--><dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-base</artifactId><version>4.1.0</version></dependency><dependency><groupId>cn.afterturn</group…...

编程日记 2023/8/25 5:23:33

金字塔原理（思考的逻辑）

前言&#xff1a;前面学习了表达的逻辑&#xff0c;那在表达之前&#xff0c;如何组织内容&#xff1f;如何进行思考&#xff1f;接下来看第二篇——思考的逻辑。 目录 应用逻辑顺序 时间顺序 结构顺序 程度顺序 概括各组思想 什么是概括&#xff1f; 思想表达方式 如…...

编程日记 2023/8/25 5:22:32

全景效果图网站/如何进行线上推广

阅读此博客即可,请走这扇门? jdk 11 会出现android 命令无法使用,以及报各种意想不到的错误,在这里还是建议使用jdk8, 经验之谈: 一般比最新版本落后一到两个版本的app是最稳定的 建议用国内的源去下载,速度相对较快 本人android sdk 版本 could’t find jvm(java虚拟机) 解决…...

编程日记 2025/1/27 12:13:05

嘉兴做网站公司哪家好/广安百度推广代理商

相信很多站长对于DDOS功击一点也不陌生&#xff0c;很多网站或多或少都遇到过DDOS功击。DDOS功击是目前最常见也是最难防御的功击手段之一。而且DDOS功击是一个世界级难题&#xff0c;目前还没有能彻底解决这个难题的完美方案。我们现在能做的就是采取各种措施来降低DDOS带来的…...

编程日记 2025/1/27 11:53:05

网 公司/整站seo优化公司

Open3D点云去除质心&#xff1a;如何高效处理点云数据&#xff1f; 在计算机视觉领域&#xff0c;点云数据处理是一个非常重要的任务。对于大规模的点云数据集&#xff0c;如何高效地去除其中的质心是一个关键问题。Open3D作为一个开源的计算几何库&#xff0c;提供了多种方法…...

编程日记 2025/1/27 11:26:18

cms网站如何修改/seo信息网

http://www.in189.com/forum.php?modviewthread&tid289087转载于:https://www.cnblogs.com/mingyongcheng/archive/2011/11/01/2232252.html...

编程日记 2025/1/27 10:46:02

石家庄营销型网站建设公司/防恶意点击软件

参考&#xff1a;使用python实现接口的方法代码Demo1 import flask2 from flask import request3 from flask import jsonify4 import tools5 import OP_db6 import settings7 8 flask&#xff1a; web框架&#xff0c;可以通过flask提供的装饰器server.route()将普通函…...

编程日记 2025/1/27 10:02:24

松江品划网站建设开发/友情连接出售

建站过程 域名 简介&#xff1a;在 Internet 上有千百万台主机&#xff0c;为了区分这些主机&#xff0c;每一台主机都被分配一个的 IP 地址。但由于 IP 地址没有实际意义难于记忆&#xff0c;于是就有了域名&#xff08;Domain Name&#xff09; 类型&#xff1a;云服务器支持…...

编程日记 2025/1/27 9:05:05