＊且听风吟

css linear-gradient 设置背景颜色渐变

CSS3 渐变能够让背景颜色在两个或多个颜色之间平滑过渡。

基本语法：

background: linear-gradient(direction, color-stop1, color-stop2, …)

direction 是指渐变的方向， color-stop1为起始点， color-stop2为终点，最少要设置两个颜色。

线性渐变

线性渐变 —— 从上向下（默认情况）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-linear-gradient(#DC1010, #90ED5A, #2F57E8);
        /*  Safari 5.1 到 6.0 */
        background: -o-linear-gradient(#DC1010, #90ED5A, #2F57E8);
        /*  Opera 11.6 到 12.0 */
        background: -moz-linear-gradient(#DC1010, #90ED5A, #2F57E8);
        /*  Fx 3.6 到 15 */
        background: linear-gradient(#DC1010, #90ED5A, #2F57E8);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果如下：

线性渐变 —— 从左到右渐变：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-linear-gradient(left, #DC1010, #90ED5A, #2F57E8);
        /*  Safari 5.1 到 6.0 */
        background: -o-linear-gradient(right, #DC1010, #90ED5A, #2F57E8);
        /*  Opera 11.6 到 12.0 */
        background: -moz-linear-gradient(right, #DC1010, #90ED5A, #2F57E8);
        /*  Fx 3.6 到 15 */
        background: linear-gradient(to right,#DC1010, #90ED5A, #2F57E8);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果如下：

线性渐变 —— 对角线：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-linear-gradient(left top, #DC1010, #90ED5A, #2F57E8);
        /*  Safari 5.1 到 6.0 */
        background: -o-linear-gradient(bottom right, #DC1010, #90ED5A, #2F57E8);
        /*  Opera 11.6 到 12.0 */
        background: -moz-linear-gradient(bottom right, #DC1010, #90ED5A, #2F57E8);
        /*  Fx 3.6 到 15 */
        background: linear-gradient(to bottom right,#DC1010, #90ED5A, #2F57E8);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果如下：

线性渐变 —— 自定义角度渐变：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-linear-gradient(180deg, #DC1010, #90ED5A, #2F57E8);
        /*  Safari 5.1 到 6.0 */
        background: -o-linear-gradient(180deg, #DC1010, #90ED5A, #2F57E8);
        /*  Opera 11.6 到 12.0 */
        background: -moz-linear-gradient(180deg, #DC1010, #90ED5A, #2F57E8);
        /*  Fx 3.6 到 15 */
        background: linear-gradient(180deg,#DC1010, #90ED5A, #2F57E8);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果如下：

-90deg 度：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-linear-gradient(-90deg, #DC1010, #90ED5A, #2F57E8);
        /*  Safari 5.1 到 6.0 */
        background: -o-linear-gradient(-90deg, #DC1010, #90ED5A, #2F57E8);
        /*  Opera 11.6 到 12.0 */
        background: -moz-linear-gradient(-90deg, #DC1010, #90ED5A, #2F57E8);
        /*  Fx 3.6 到 15 */
        background: linear-gradient(-90deg,#DC1010, #90ED5A, #2F57E8);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果如下：

75deg ：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-linear-gradient(75deg, #DC1010, #90ED5A, #2F57E8);
        /*  Safari 5.1 到 6.0 */
        background: -o-linear-gradient(75deg, #DC1010, #90ED5A, #2F57E8);
        /*  Opera 11.6 到 12.0 */
        background: -moz-linear-gradient(75deg, #DC1010, #90ED5A, #2F57E8);
        /*  Fx 3.6 到 15 */
        background: linear-gradient(75deg,#DC1010, #90ED5A, #2F57E8);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果如下：

145deg 度：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-linear-gradient(145deg, #DC1010, #90ED5A, #2F57E8);
        /*  Safari 5.1 到 6.0 */
        background: -o-linear-gradient(145deg, #DC1010, #90ED5A, #2F57E8);
        /*  Opera 11.6 到 12.0 */
        background: -moz-linear-gradient(145deg, #DC1010, #90ED5A, #2F57E8);
        /*  Fx 3.6 到 15 */
        background: linear-gradient(145deg,#DC1010, #90ED5A, #2F57E8);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果如下：

线性渐变 —— 使用多个颜色结点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-linear-gradient( rgba(255,0,0,1),rgba(255,165,0,1),rgba(255,255,0,1),rgba(0, 255, 0,1),rgba(0, 127, 255,1),rgba(0, 0, 255 ,1),rgba(139, 0, 255 ,1));
        /*  Safari 5.1 到 6.0 */
        background: -o-linear-gradient( rgba(255,0,0,1),rgba(255,165,0,1),rgba(255,255,0,1),rgba(0, 255, 0,1),rgba(0, 127, 255,1),rgba(0, 0, 255 ,1),rgba(139, 0, 255 ,1));
        /*  Opera 11.6 到 12.0 */
        background: -moz-linear-gradient(rgba(255,0,0,1),rgba(255,165,0,1),rgba(255,255,0,1),rgba(0, 255, 0,1),rgba(0, 127, 255,1),rgba(0, 0, 255 ,1),rgba(139, 0, 255 ,1));
        /*  Fx 3.6 到 15 */
        background: linear-gradient(rgba(255,0,0,1),rgba(255,165,0,1),rgba(255,255,0,1),rgba(0, 255, 0,1),rgba(0, 127, 255,1),rgba(0, 0, 255 ,1),rgba(139, 0, 255 ,1));
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果如下：

rgba 设置颜色时，同时也可以设置透明度。

线性渐变 —— 重复线性渐变

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 径向渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-repeating-linear-gradient(#DC1010 5%, #90ED5A 10%, #2F57E8 15%);
        /*  Safari 5.1 到 6.0 */
        background: -o-repeating-linear-gradient(#DC1010 5%, #90ED5A 10%, #2F57E8 15%);
        /*  Opera 11.6 到 12.0 */
        background: -moz-repeating-linear-gradient(#DC1010 5%, #90ED5A 10%, #2F57E8 15%);
        /*  Fx 3.6 到 15 */
        background: repeating-linear-gradient(#DC1010 5%, #90ED5A 10%, #2F57E8 15%);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果：

椭圆径向渐变：

径向渐变 —— 颜色结点均匀分布

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 径向渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-radial-gradient(#DC1010, #90ED5A, #2F57E8);
        /*  Safari 5.1 到 6.0 */
        background: -o-radial-gradient(#DC1010, #90ED5A, #2F57E8);
        /*  Opera 11.6 到 12.0 */
        background: -moz-radial-gradient(#DC1010, #90ED5A, #2F57E8);
        /*  Fx 3.6 到 15 */
        background: radial-gradient(#DC1010, #90ED5A, #2F57E8);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果：

径向渐变 - 颜色结点不均匀分布

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-radial-gradient( #DC1010 5%, #90ED5A 30%, #2F57E8 60%);
        /*  Safari 5.1 到 6.0 */
        background: -o-radial-gradient( #DC1010 5%, #90ED5A 30%, #2F57E8 60%);
        /*  Opera 11.6 到 12.0 */
        background: -moz-radial-gradient( #DC1010 5%, #90ED5A 30%, #2F57E8 60%);
        /*  Fx 3.6 到 15 */
        background: radial-gradient( #DC1010 5%, #90ED5A 30%, #2F57E8 60%);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果如下：

径向渐变 —— 设置形状：

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形；默认值是 ellipse。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 径向渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-radial-gradient(circle,#DC1010, #90ED5A, #2F57E8);
        /*  Safari 5.1 到 6.0 */
        background: -o-radial-gradient(circle,#DC1010, #90ED5A, #2F57E8);
        /*  Opera 11.6 到 12.0 */
        background: -moz-radial-gradient(circle,#DC1010, #90ED5A, #2F57E8);
        /*  Fx 3.6 到 15 */
        background: radial-gradient(circle,#DC1010, #90ED5A, #2F57E8);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果：

径向渐变 —— 重复径向渐变

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 径向渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-repeating-radial-gradient(#DC1010 5%, #90ED5A 10%, #2F57E8 15%);
        /*  Safari 5.1 到 6.0 */
        background: -o-repeating-radial-gradient(#DC1010 5%, #90ED5A 10%, #2F57E8 15%);
        /*  Opera 11.6 到 12.0 */
        background: -moz-repeating-radial-gradient(#DC1010 5%, #90ED5A 10%, #2F57E8 15%);
        /*  Fx 3.6 到 15 */
        background: repeating-radial-gradient(#DC1010 5%, #90ED5A 10%, #2F57E8 15%);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果：

径向渐变 —— 设置大小

size 参数定义了渐变的大小。它有以下四个值：closest-side, farthest-side, closest-corner, farthest-corner。

例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 径向渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-radial-gradient(60% 55%, closest-side,#DC1010, #90ED5A, #2F57E8);
        /*  Safari 5.1 到 6.0 */
        background: -o-radial-gradient(60% 55%, closest-side,#DC1010, #90ED5A, #2F57E8);
        /*  Opera 11.6 到 12.0 */
        background: -moz-radial-gradient(60% 55%, closest-side,#DC1010, #90ED5A, #2F57E8);
        /*  Fx 3.6 到 15 */
        background: radial-gradient(60% 55%, closest-side,#DC1010, #90ED5A, #2F57E8);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 径向渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-radial-gradient(60% 55%, farthest-corner,#DC1010, #90ED5A, #2F57E8);
        /*  Safari 5.1 到 6.0 */
        background: -o-radial-gradient(60% 55%, farthest-corner,#DC1010, #90ED5A, #2F57E8);
        /*  Opera 11.6 到 12.0 */
        background: -moz-radial-gradient(60% 55%, farthest-corner,#DC1010, #90ED5A, #2F57E8);
        /*  Fx 3.6 到 15 */
        background: radial-gradient(60% 55%, farthest-corner,#DC1010, #90ED5A, #2F57E8);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 径向渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-radial-gradient(60% 55%, farthest-side,#DC1010, #90ED5A, #2F57E8);
        /*  Safari 5.1 到 6.0 */
        background: -o-radial-gradient(60% 55%, farthest-side,#DC1010, #90ED5A, #2F57E8);
        /*  Opera 11.6 到 12.0 */
        background: -moz-radial-gradient(60% 55%, farthest-side,#DC1010, #90ED5A, #2F57E8);
        /*  Fx 3.6 到 15 */
        background: radial-gradient(60% 55%, farthest-side,#DC1010, #90ED5A, #2F57E8);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css 径向渐变</title>
    <style>
      .content {
        width: 300px;
        height: 200px;
        background: pink; /* 针对不支持渐变的浏览器 */
        background: -webkit-radial-gradient(60% 55%, closest-side,#DC1010, #90ED5A, #2F57E8);
        /*  Safari 5.1 到 6.0 */
        background: -o-radial-gradient(60% 55%, closest-side,#DC1010, #90ED5A, #2F57E8);
        /*  Opera 11.6 到 12.0 */
        background: -moz-radial-gradient(60% 55%, closest-side,#DC1010, #90ED5A, #2F57E8);
        /*  Fx 3.6 到 15 */
        background: radial-gradient(60% 55%, closest-side,#DC1010, #90ED5A, #2F57E8);
        /* 标准语法（必须是最后一个） */
      }
</style>
  </head>
  <body>
    <div class="content"></div>
  </body>
</html>

页面效果如下：

vue 项目中使用背景颜色渐变：

给 div 设置 style：

<div class="middle-container" :style="{background:mainBgColor}">
</div>

data 中声明 mainBgColor 变量：

  data () {
    return {
      mainBgColor: ''
    }
  },

触发方法时设置：

setMainBackgroundColor (col1,col2) {
   this.mainBgColor = `linear-gradient(${col1},${col2})`
}

使用css实现镂空效果 gurenchang css 前端
前言：最近在公司完成小程序的新手引导中遇到了要将蒙层挖空，漏出后面内容的功能，找了各种资料之后，发现了一种就使用几行css代码就实现这个效果的方式，在这里分享给各位小伙伴们。功能描述：实现下图的镂空效果代码展示：.mask{position:absolute;bottom:20rpx;left:50%;transform:translateX(-50%);width:90%;height:500r
MTTK Vue Wrap 项目介绍 MTTKbelinda VUE Wrap vue.js 前端 javascript
关键字:Vue3,配置开发,快速开发,组件封装关于本项目概述MttkVueWrap是一个基于Vue3的组件封装工具，核心目标是通过纯JavaScript/TypeScript替代传统的单文件组件（SFC）开发模式，同时兼容与SFC的混合使用.它允许开发者通过类似JSON的配置对象或动态生成的脚本快速构建Vue组件，涵盖模板、双向绑定（v-model）、属性、事件、插槽等核心功能.项目起源在前端开发
对于简单的HTML、CSS、JavaScript前端，我们可以通过几种方式连接后端昨今前端 html css
1.使用FetchAPI发送HTTP请求（最简单的方式）：//home.html//示例：提交表单数据到后端constsubmitForm=async(formData)=>{try{constresponse=awaitfetch('http://your-backend-url/api/submit',{method:'POST',headers:{'Content-Type':'applic
【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【前缀和】2024E-分割数组的最大差值【欧弟算法】全网注释最详细分类最全的华为OD真题题解闭着眼睛学算法最新华为OD真题 #前缀和 java c++c语言华为od javascript 算法 python
可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例输入输出说明解题思路代码pythonjavaC++CNodejavaScriptGo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关推荐阅读【华为OD机考】2024E+D卷最全真题【完全原创题解|详细考点分类|不断更新
【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【排序】2024E-热点网站统计【欧弟算法】全网注释最详细分类最全的华为OD真题题解闭着眼睛学算法最新华为OD真题 #模拟 java c++c语言华为od golang 算法 leetcode
可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例一输入输出示例二输入输出解题思路代码pythonjavacppCNodejavaScriptGo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关推荐阅读【华为OD机考】2024E+D卷最全真题【完全原创题解|详细考点分
【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【BFS】2024E-狼羊过河【欧弟算法】全网注释最详细分类最全的华为OD真题题解闭着眼睛学算法最新华为OD真题 #BFS #模拟算法 java c++华为od c语言 javascript leetcode
可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述补充说明示例输入输出说明解题思路转化为搜索状态树最小层数问题节点的设计以及更新重复状态的排除代入BFS代码框架代码pythonJavaC++CNodeJavaScriptGo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关
【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【模拟】2024E-找终点【欧弟算法】全网注释最详细分类最全的华为OD真题题解闭着眼睛学算法最新华为OD真题 #模拟 java c++c语言 leetcode golang 华为od
可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例一输入输出说明示例二输入输出解题思路代码pythonjavaC++CNodejavaScriptGo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关推荐阅读【华为OD机考】2024E+D卷最全真题【完全原创题解|详细考
【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【DFS/BFS】2024E-战场索敌【欧弟算法】全网注释最详细分类最全的华为OD真题题解闭着眼睛学算法最新华为OD真题 #BFS #DFS 算法 java c++c语言 leetcode 华为od javascript
可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例输入输出解题思路代码解法一：BFSpythonjavacppCNodejavaScriptGo解法二：DFSpythonjavacppCNodejavaScriptGo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关推
【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【贪心】2024E-用户调度问题【欧弟算法】全网注释最详细分类最全的华为OD真题题解闭着眼睛学算法最新华为OD真题 #贪心 java c++c语言 leetcode 华为od javascript python
可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例输入输出说明解题思路代码pythonjavacppCNodejavaScriptGo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关推荐阅读【华为OD机考】2024E+D卷最全真题【完全原创题解|详细考点分类|不断更新
【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【贪心】2024E-静态代码扫描服务【欧弟算法】全网注释最详细分类最全的华为OD真题题解闭着眼睛学算法最新华为OD真题 #贪心 java c++c语言华为od python 算法 javascript
可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例一输入输出说明示例二输入输出解题思路题意理解贪心策略代码pythonjavacppCNodejavaScriptgo时空复杂度华为OD算法/大厂面试高频题算法练习冲刺训练相关推荐阅读【华为OD机考】2024E+D卷最全真题【完全
【Py/Java/C++/C/JS/Go六种语言OD独家2024E卷真题】20天拿下华为OD笔试之【二分查找】2024E-部门人力分配【欧弟算法】全网注释最详细分类最全的华为OD真题题解闭着眼睛学算法最新华为OD真题 #二分查找 #贪心 java c++华为od leetcode 算法 python
可上欧弟OJ系统练习华子OD、大厂真题绿色聊天软件戳oj1441了解算法冲刺训练（备注【CSDN】否则不通过）文章目录相关推荐阅读题目描述与示例题目描述输入描述输出描述示例输入输出说明解题思路代码pythonjavacppCNodejavaScriptgo时空复杂度本题易错点左指针初始化问题华为OD算法/大厂面试高频题算法练习冲刺训练相关推荐阅读【华为OD机考】2024E+D卷最全真题【完全原创题
高级前端工程师Vue面试题盼盼盼面试题前端前端
HTML/CSS1.解释HTML5中的元素及其用途。元素用于通过JavaScript绘制图形，比如图表、图像处理等。它提供了一个图形上下文，可以进行2D图形绘制。2.CSS中display:none和visibility:hidden有什么区别？display:none会将元素从文档流中完全移除，不占据空间。而visibility:hidden则元素依然占据空间，只是变得不可见。3.描述CSSFl
Reached heap limit Allocation failed - JavaScript heap out of memory 祝余、 javascript 开发语言 ecmascript
问题vue3打包时提示ReachedheaplimitAllocationfailed-JavaScriptheapoutofmemory解决方法（vue3可用）npminstallcross-envincrease-memory-limit然后检查package.jons文件下“scripts”是否有“fix-memory-limit”，如果没有，手动添加如下代码"scripts"：{"fix-
mac+CLion+redis6.2本地源码调试王冬的csdn redis redis
1.下载安装CLion下载地址：https://www.jetbrains.com.cn/clion/download/other.html安装过程自行百度2.下载redis源码gitclonehttp://github.com/redis/redis.git3.添加CMakeLists.txt文件1、\redis-6.2\cmake_minimum_required(VERSION3.0FATA
html5 判断长按操作,移动端h5模拟长按事件 weixin_39933414 html5 判断长按操作
1、标志位vartimer='';varisLongTouch=false;//加个标志位，防止settimeout因为事件循环和实际时间有偏差vartarget=document.getElementById('target');target.addEventListener('touchstart',function(){timer=setTimeout(function(){isLongTo
electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了阿毛sky electron vue 前端
由于公司需要，下一个项目需要做CS开发，技术选型分析后，选择了electron（Electron是一个使用JavaScript,HTML和CSS等Web技术创建原生程序的框架）研究发现，electron与vue-cli3.0脚手架做了很好的融合，对于我们这种用惯了vue，以及elementUI这些UI框架的Web前端开发工程师来说，实在太友好了，不过，这是一门国外框架技术，不仅是环境搭建、安装、文
Node.js使用教程 m0_74824112 面试学习路线阿里巴巴 node.js vim 编辑器
Node.js使用教程Node.js是一个基于ChromeV8引擎的JavaScript运行环境，它让JavaScript运行在服务器端。以下是一个简单的Node.js使用教程：一、Node.js开发环境和编译1.1安装Node.js访问Node.js官网下载并安装适合您操作系统的Node.js版本。1.2创建一个Node.js项目在您的工作目录中，创建一个新的文件夹作为项目目录，例如命名为my_
【CSS】图片比例完整展示与滚动查看 Peter-Lu #CSS 开发语言前端 css
文章目录一、问题背景二、问题分析为什么`100vh`会压缩图片高度？为什么固定像素高度有效？三、解决方案与改进1.页面布局代码2.样式代码3.核心点解读容器高度图片样式滚动支持在前端开发中，如何高效地展示多张图片，并确保图片保持原始比例，同时兼顾滚动查看的需求，是一个常见的问题。本文将通过一个实际案例，讲解如何解决100vh固定高度导致图片被压缩的问题，以及如何改进页面布局让滚动与展示兼顾。一、问
nodejs：express + js-mdict 网页查询英汉词典，能播放声音 belldeep nodejs web服务 nodejs express js-mdict
向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉词典文件（*.
nodejs：express + js-mdict 网页查询英汉词典，能显示图片 belldeep nodejs javascript nodejs javascript js-mdict express
向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词，并能显示图片1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉
three.js性能优化火辣辣- 学习总结学习笔记 three.js 性能优化
本文持续更新~~~参考文章three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。在使用的时候，虽然three.js做了优化，但是在使用不恰当的代码，也会产生性能损耗。帧率越低，给人感觉就越卡。这是我在开发中自己百度总结的，有不对的可以联系我啊2019-08-22更新———————1、disppose()方法得重要性每当你创建一个three.js中的实例时，都会
vue字符串的常用方法，截取字符串，获取字符串长度，检索字符串 luckyext vue.js javascript 前端
1.使用substr方法截取字符串letstr="12345";letpart=str.substr(0,3);//截取从索引0开始到索引3的子字符串console.log(part);//"123"2.获取字符串长度JavaScript中的字符串有一个length属性，该属性可以用在VUE获取字符串的长度conststr='hello';str.length输出结果：53.检索字符串是否包含特定
使用JvaScript做一个猜数字游戏And条件语句和循环语句整合偷只猫来养 javascript 游戏 js
**使用JvaScript做一个简单的猜数字游戏（这里设置的数字范围是0-100）**JavaScript是一门目前流行的面向对象的脚本语言，可以使用它来做很多事情，这里为大家分享一下如何使用js语言来写出一个猜数字游戏。1、需求用户可以控制游戏的开始和结束。在用户点击开始后，系统自动为用户生成一个0-100的随机数，用户在输入框中输入内容后点击确认后可以根据输入内容提示相关信息。2、逻辑分析使用
【Jvascript 算法】-- JavaScript实现对树结构数据的增删以及树型数据与数组的相互转换野生松
在日常开发中我们经常会碰到树结构数据，以下是我的笔记：constarr=[{id:2,name:'部门B',parentId:0},{id:3,name:'部门C',parentId:1},{id:1,name:'部门A',parentId:2},{id:4,name:'部门D',parentId:1},{id:5,name:'部门E',parentId:2},{id:6,name:'部门F',p
使用JavaScript设计一款简单的数字时钟布啦啦李 javascript 时钟
本文目录使用JavaScript设计一款带日期显示的数字时钟效果预览1.项目概述2.HTML结构代码说明3.CSS样式代码说明4.JavaScript逻辑代码说明5.运行效果使用JavaScript设计一款带日期显示的数字时钟本文将详细介绍如何使用HTML、CSS和JavaScript设计一款带日期显示的数字时钟。我们将逐步讲解每一行代码的作用，帮助你理解如何实现一个实时更新的时钟，并扩展功能以显
转：javascript获取上一访问页面 dianai7709 javascript 移动开发 ViewUI
原文链接：移动端返回上一页，刚需！document.referrer详解全文如下：返回上一页，在PC端我们可以使用：history.go(-1)或者history.back()，可以正常返回第一层。这样，我们不需要上一页的url具体是什么，只要使用history一般都没啥问题。但是在移动端，如果想要返回上一页。比如从A页面跳到B页面，如果B页面想返回A页面，为了防止不会跳错，必须要有一个返回那如果
DPlayer + vue3 使用是晓周哦 javascript vue.js 前端视频 typescript
帮助文档https://dplayer.diygod.dev/zh/guide.html#special-thanks安装pnpminstalldplayer--savepnpminstall@types/dplayer--save-dev使用方法import{ref,onMounted,onBeforeUnmount}from'vue';importDPlayerfrom'dplayer';im
qt 使用qss控制界面外观 yaofei2006 qt 开发语言 ui
在Qt中，QSS（QtStyleSheets）是一种基于CSS（CascadingStyleSheets）的样式表语言，用于自定义Qt应用程序的外观。通过QSS，你可以轻松地修改控件的颜色、字体、边框、背景等属性，而无需修改代码。以下是使用QSS的详细指南：1.基本语法QSS的语法与CSS类似，由选择器和声明块组成：选择器{属性:值;属性:值;}示例QPushButton{background-c
前端为什么要使用new Promise包裹一个函数没资格抱怨 JS核心前端 javascript
在前端开发中，使用newPromise包裹一个函数主要是为了将原本不支持Promise规范的操作转化为支持Promise规范的操作，从而可以更好地处理异步操作，提升代码的可读性和可维护性。下面详细介绍这么做的常见原因和应用场景：1.封装回调风格的异步操作在JavaScript中，早期的异步操作（如setTimeout、XMLHttpRequest等）通常使用回调函数来处理结果。这种方式容易导致回调
多语言实现图像生成的API调用指南 IT·小灰灰人工智能数据挖掘深度学习语言模型图像处理 AI作画
在现代软件开发中，API（应用程序编程接口）的使用变得越来越普遍。无论是JavaScript、Python、Go还是Java，开发者们都需要与各种API进行交互以实现特定的功能。本文将通过一个具体的例子，展示如何使用不同的编程语言调用一个图像生成的API，并生成一幅描述海岛的图像。目录API获取方式正文1.JavaScript实现2.Python实现3.Go实现4.Java实现结语API获取方式前
java短路运算符和逻辑运算符的区别 3213213333332132 java基础
/* * 逻辑运算符——不论是什么条件都要执行左右两边代码 * 短路运算符——我认为在底层就是利用物理电路的“并联”和“串联”实现的 * 原理很简单，并联电路代表短路或（||），串联电路代表短路与（&&）。 * * 并联电路两个开关只要有一个开关闭合，电路就会通。 * 类似于短路或（||），只要有其中一个为true（开关闭合）是
Java异常那些不得不说的事白糖_ java exception
一、在finally块中做数据回收操作比如数据库连接都是很宝贵的，所以最好在finally中关闭连接。 JDBCAgent jdbc = new JDBCAgent(); try{ jdbc.excute("select * from ctp_log"); }catch(SQLException e){ ... }finally{ jdbc.close();
utf-8与utf-8(无BOM)的区别 dcj3sjt126com PHP
BOM——Byte Order Mark，就是字节序标记在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符，它的编码是FEFF。而FFFE在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前，先传输字符"ZERO WIDTH NO-BREAK SPACE"。这样如
JAVA Annotation之定义篇周凡杨 java 注解 annotation 入门注释
Annotation: 译为注释或注解 An annotation, in the Java computer programming language, is a form of syntactic metadata that can be added to Java source code. Classes, methods, variables, pa
tomcat的多域名、虚拟主机配置 g21121 tomcat
众所周知apache可以配置多域名和虚拟主机，而且配置起来比较简单，但是项目用到的是tomcat，配来配去总是不成功。查了些资料才总算可以，下面就跟大家分享下经验。很多朋友搜索的内容基本是告诉我们这么配置：在Engine标签下增面积Host标签，如下： <Host name="www.site1.com" appBase="webapps"
Linux SSH 错误解析（Capistrano 的cap 访问错误 Permission ） 510888780 linux capistrano
1.ssh -v [email protected] 出现 Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password). 错误运行状况如下： OpenSSH_5.3p1, OpenSSL 1.0.1e-fips 11 Feb 2013 debug1: Reading configuratio
log4j的用法 Harry642 java log4j
一、前言： log4j 是一个开放源码项目，是广泛使用的以Java编写的日志记录包。由于log4j出色的表现，当时在log4j完成时，log4j开发组织曾建议sun在jdk1.4中用log4j取代jdk1.4 的日志工具类，但当时jdk1.4已接近完成，所以sun拒绝使用log4j，当在java开发中
mysql、sqlserver、oracle分页，java分页统一接口实现 aijuans oracle jave
定义：pageStart 起始页，pageEnd 终止页,pageSize页面容量 oracle分页：　　　　select * from ( select mytable.*,rownum num from (实际传的SQL) where rownum<=pageEnd) where num>=pageStart sqlServer分页：
Hessian 简单例子 antlove java Web service hessian
hello.hessian.MyCar.java package hessian.pojo; import java.io.Serializable; public class MyCar implements Serializable { private static final long serialVersionUID = 473690540190845543
数据库对象的同义词和序列百合不是茶 sql 序列同义词 ORACLE权限
回顾简单的数据库权限等命令; 解锁用户和锁定用户 alter user scott account lock/unlock; //system下查看系统中的用户 select * dba_users; //创建用户名和密码 create user wj identified by wj; identified by //授予连接权和建表权 grant connect to
使用Powermock和mockito测试静态方法 bijian1013 持续集成单元测试 mockito Powermock
实例： package com.bijian.study; import static org.junit.Assert.assertEquals; import java.io.IOException; import org.junit.Before; import org.junit.Test; import or
精通Oracle10编程SQL(6)访问ORACLE bijian1013 oracle 数据库 plsql
/* *访问ORACLE */ --检索单行数据 --使用标量变量接收数据 DECLARE v_ename emp.ename%TYPE; v_sal emp.sal%TYPE; BEGIN select ename,sal into v_ename,v_sal from emp where empno=&no; dbms_output.pu
【Nginx四】Nginx作为HTTP负载均衡服务器 bit1129 nginx
Nginx的另一个常用的功能是作为负载均衡服务器。一个典型的web应用系统，通过负载均衡服务器，可以使得应用有多台后端服务器来响应客户端的请求。一个应用配置多台后端服务器，可以带来很多好处：负载均衡的好处增加可用资源增加吞吐量加快响应速度，降低延时出错的重试验机制 Nginx主要支持三种均衡算法： round-robin l
jquery-validation备忘白糖_ jquery css F#Firebug
留点学习jquery validation总结的代码： function checkForm(){ validator = $("#commentForm").validate({// #formId为需要进行验证的表单ID errorElement :"span",// 使用"div"标签标记错误，默认:&
solr限制admin界面访问（端口限制和http授权限制） ronin47 限定Ip访问
solr的管理界面可以帮助我们做很多事情，但是把solr程序放到公网之后就要限制对admin的访问了。可以通过tomcat的http基本授权来做限制，也可以通过iptables防火墙来限制。我们先看如何通过tomcat配置http授权限制。第一步：在tomcat的conf/tomcat-users.xml文件中添加管理用户，比如： <userusername="ad
多线程-用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1 bylijinnan java 多线程
public class IncDecThread { private int j=10; /* * 题目:用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1 * 两个问题： * 1、线程同步--synchronized * 2、线程之间如何共享同一个j变量--内部类 */ public static
买房历程 cfyme
2015-06-21: 万科未来城，看房子 2015-06-26: 办理贷款手续，贷款73万，贷款利率5.65=5.3675 2015-06-27: 房子首付,签完合同 2015-06-28，央行宣布降息 0.25，就2天的时间差啊，没赶上。首付，老婆找他的小姐妹接了5万，另外几个朋友借了1-
[军事与科技]制造大型太空战舰的前奏 comsci 制造
天气热了........空调和电扇要准备好.......... 最近,世界形势日趋复杂化,战争的阴影开始覆盖全世界.......... 所以,我们不得不关
dateformat dai_lm DateFormat
"Symbol Meaning Presentation Ex." "------ ------- ------------ ----" "G era designator (Text) AD" "y year
Hadoop如何实现关联计算 datamachine mapreduce hadoop 关联计算
选择Hadoop，低成本和高扩展性是主要原因，但但它的开发效率实在无法让人满意。以关联计算为例。假设：HDFS上有2个文件，分别是客户信息和订单信息，customerID是它们之间的关联字段。如何进行关联计算，以便将客户名称添加到订单列表中？ &nbs
用户模型中修改用户信息时，密码是如何处理的 dcj3sjt126com yii
当我添加或修改用户记录的时候对于处理确认密码我遇到了一些麻烦，所有我想分享一下我是怎么处理的。场景是使用的基本的那些(系统自带)，你需要有一个数据表(user)并且表中有一个密码字段(password),它使用 sha1、md5或其他加密方式加密用户密码。面是它的工作流程: 当创建用户的时候密码需要加密并且保存，但当修改用户记录时如果使用同样的场景我们最终就会把用户加密过的密码再次加密，这
中文 iOS/Mac 开发博客列表 dcj3sjt126com Blog
本博客列表会不断更新维护，如果有推荐的博客，请到此处提交博客信息。本博客列表涉及的文章内容支持定制化Google搜索，特别感谢 JeOam 提供并帮助更新。本博客列表也提供同步更新的OPML文件（下载OPML文件），可供导入到例如feedly等第三方定阅工具中，特别感谢 lcepy 提供自动转换脚本。这里有导入教程。
js去除空格，去除左右两端的空格蕃薯耀去除左右两端的空格 js去掉所有空格 js去除空格
js去除空格，去除左右两端的空格 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>&g
SpringMVC4零配置--web.xml hanqunfeng springmvc4
servlet3.0+规范后，允许servlet，filter，listener不必声明在web.xml中，而是以硬编码的方式存在，实现容器的零配置。 ServletContainerInitializer：启动容器时负责加载相关配置 package javax.servlet; import java.util.Set; public interface ServletContainer
《开源框架那些事儿21》：巧借力与借巧力 j2eetop 框架 UI
同样做前端UI，为什么有人花了一点力气，就可以做好？而有的人费尽全力，仍然错误百出？我们可以先看看几个故事。故事1：巧借力，乌鸦也可以吃核桃有一个盛产核桃的村子，每年秋末冬初，成群的乌鸦总会来到这里，到果园里捡拾那些被果农们遗落的核桃。核桃仁虽然美味，但是外壳那么坚硬，乌鸦怎么才能吃到呢？原来乌鸦先把核桃叼起，然后飞到高高的树枝上，再将核桃摔下去，核桃落到坚硬的地面上，被撞破了，于是，
JQuery EasyUI 验证扩展可怜的猫 jquery easyui 验证
最近项目中用到了前端框架-- EasyUI，在做校验的时候会涉及到很多需要自定义的内容，现把常用的验证方式总结出来，留待后用。以下内容只需要在公用js中添加即可。使用类似于如下： <input class="easyui-textbox" name="mobile" id="mobile&
架构师之httpurlconnection----------读取和发送(流读取效率通用类) nannan408
1.前言. 如题. 2.代码. /* * Copyright (c) 2015, S.F. Express Inc. All rights reserved. */ package com.test.test.test.send; import java.io.IOException; import java.io.InputStream
Jquery性能优化 r361251 JavaScript jquery
一、注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery，所有javascript开发过程中，都需要注意，请一定不要定义成如下： $loading = $('#loading'); //这个是全局定义，不知道哪里位置倒霉引用了相同的变量名，就会郁闷至死的二、请使用一个var来定义变量如果你使用多个变量的话，请如下方式定义： . 代码如下: var page
在eclipse项目中使用maven管理依赖 tjj006 eclipse maven
概览: 如何导入maven项目至eclipse中建立自有Maven Java类库服务器建立符合maven代码库标准的自定义类库 Maven在管理Java类库方面有巨大的优势，像白衣所说就是非常“环保”。我们平时用IDE开发都是把所需要的类库一股脑的全丢到项目目录下，然后全部添加到ide的构建路径中，如果用了SVN/CVS，这样会很容易就把
中国天气网省市级联页面 x125858805 级联
1、页面及级联js <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> &l

css linear-gradient 设置背景颜色渐变

线性渐变

线性渐变 —— 从上向下（默认情况）：

线性渐变 —— 从左到右渐变：

线性渐变 —— 对角线：

线性渐变 —— 自定义角度渐变：

线性渐变 —— 使用多个颜色结点

线性渐变 —— 重复线性渐变

椭圆径向渐变：

径向渐变 —— 颜色结点均匀分布

径向渐变 - 颜色结点不均匀分布

径向渐变 —— 设置形状：

径向渐变 —— 重复径向渐变

径向渐变 —— 设置大小

你可能感兴趣的:(#,CSS,css,javascript,html)