黑马程序员——html css基础——day09——CSS高级

目录：

  1. 定位
    1. 相对定位：
    2. 绝对定位
    3. 定位居中
    4. 固定定位
    5. 堆叠层级z-index
  2. 高级技巧
    1. CSS精灵
    2. 案例-写出自己的名字
    3. 字体图标
    4. 下载字体
    5. 使用字体
  3. CSS修饰属性
    1. 垂直对齐方式
    2. 过渡
    3. 表单获得焦点选择器focus
    4. 透明度opacity
    5. 光标类型cursor
    6. 禁用鼠标样式
    7. 表格样式-合并相邻两个边框
  4. 综合案例-轮播图
    1. 图片效果
    2. 箭头
    3. 圆点

1.定位

相对定位：

position: relative

特点：

  • 不脱标，占用自己原来位置

  • 显示模式特点保持不变

  • 设置边偏移则相对自己原来位置移动

div {position: relative;top: 100px;left: 200px;
}
绝对定位

position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

  • 脱标，不占位

  • 显示模式具备行内块特点

  • 设置边偏移则相对最近的已经定位的祖先元素改变位置

  • 如果祖先元素都未定位，则相对浏览器可视区改变位置

.father {position: relative;
}.father span {position: absolute;top: 0;right: 0;
}
定位居中

实现步骤：

  1. 绝对定位

  2. 水平、垂直边偏移为 50%

  3. 子级向左、上移动自身尺寸的一半

  • 左、上的外边距为 –尺寸的一半

  • transform: translate(-50%, -50%)

<!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>Document</title><style>/* 让绝对定位的盒子水平和垂直居中 */.box {position: absolute;/* 移动父亲的50% */left: 50%;/* 往左走自己宽度的一半 *//* margin-left: -100px; */top: 50%;/* margin-top: -100px; *//* 让子盒子走自己宽度和高度的一半 */transform: translate(-50%, -50%);width: 200px;height: 200px;background-color: pink;/* 绝对定位让margin 0 auto 失效 *//* margin: 0 auto; */}img {position: absolute;top: 50%;left: 50%;/* 让子盒子走自己宽度和高度的一半 */transform: translate(-50%, -50%);/* 注意，translate 百分比相对于盒子自身的宽度和高度来说 */}</style>
</head><body><!-- <div class="box"></div> --><img src="./images/down-open.png" alt="">
</body></html>

 

固定定位

position: fixed

场景：元素的位置在网页滚动时不会改变

特点：

  • 脱标，不占位

  • 显示模式具备行内块特点

  • 设置边偏移相对浏览器窗口改变位置

<!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>Document</title><style>.header {position: fixed;left: 0;top: 0;/* width: 200px; */width: 100%;height: 80px;background-color: pink;}</style>
</head><body><div class="header">123</div><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p><p> 里面有很多的文字</p>
</body></html>
堆叠层级z-index

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

属性名：z-index

属性值：整数数字（默认值为auto，取值越大，层级越高）

<!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>Document</title><style>div {position: absolute;top: 0;left: 0;/* 默认的层级 z-index: auto; *//* 根据标签的书写顺序排列 *//* 越往后，层级越高 */width: 200px;height: 200px;}.box1 {background-color: red;/* 层级属性  整数 不要跟单位*//* 数字越大，层级越高 */z-index: 1;}.box2 {background-color: green;left: 20px;top: 20px;z-index: 2;}.box3 {background-color: blue;left: 40px;top: 40px;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body></html>

2.高级技巧

CSS精灵
  • CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。

 

优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度  

 

实现步骤：

  1. 创建盒子，盒子尺寸与小图尺寸相同

  2. 设置盒子背景图为精灵图

  3. 添加 background-position 属性，改变背景图位置

3.1 使用 PxCook 测量小图片左上角坐标

3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）

 

案例-写出自己的名字

HTML结构

<!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>Document</title><style>div {display: inline-block;margin: 0 15px;background: url(./images/abcd.jpg) no-repeat;}.l {width: 96px;height: 112px;background-color: pink;background-position: -5px -275px;}.i {width: 62px;height: 107px;background-position: -324px -141px;}.u {width: 112px;height: 112px;background-position: -476px -421px;}span {display: block;width: 106px;height: 118px;background: url(./images/abcd.jpg) no-repeat;/* 过渡 */transition: .2s;}span:hover {/* background-position: -118px -12px; */background-position: -484px -10px;/* width: 95px; *//* background-position: -3px -137px; */}</style>
</head><body><div class="l"></div><div class="i"></div><div class="u"></div><span></span>
</body></html>

 

字体图标

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点

  • 灵活性：灵活地修改样式，例如：尺寸、颜色等

  • 轻量级：体积小、渲染快、降低服务器请求次数

  • 兼容性：几乎兼容所有主流浏览器

  • 使用方便：先下载再使用

下载字体

iconfont 图标库：iconfont-阿里巴巴矢量图标库

登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标，加入购物车 → 购物车，添加至项目，确定 → 下载至本地

 

使用字体

  1. 引入字体样式表（iconfont.css）

  2. 标签使用字体图标类名

    • iconfont：字体图标基本样式（字体名，字体大小等等）

    • icon-xxx：图标对应的类名

 

<!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>Document</title><link rel="stylesheet" href="./fonts/iconfont.css"><style>.iconfont {font-size: 300px;color: pink;}</style>
</head><body><!-- 必须2个类名，第一个类名iconfont --><i class="iconfont icon-shouji"></i><span class="iconfont  icon-zhaoxiangji"></span>
</body></html>

3.CSS修饰属性

垂直对齐方式

属性名：vertical-align

<!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>Document</title><style>img {/* 行内块元素  默认和文字的基线对齐*/vertical-align: middle;}span {display: inline-block;vertical-align: middle;width: 50px;height: 50px;background-color: pink;}div {/* width: 300px;height: 300px; */border: 2px solid red;}</style>
</head><body><img src="./images/computer.png" alt=""> my name is 刘德华<span></span> my name is 刘德华<hr><div><img src="./images/1.webp" alt=""></div>
</body></html>

去除图片底部缝隙的两种方法：

  1. 给图片添加 display: block;

  2. 给图片添加 vertical-align: middle; 等，只要不是 baseline就行

过渡

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition（复合属性）

属性值：过渡的属性 花费时间 (s)

提示：

  • 过渡的属性可以是具体的 CSS 属性

  • 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）

  • transition 设置给元素本身

<!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>Document</title><style>.box {width: 200px;height: 200px;background-color: pink;/* 谁做过渡给谁加 */transition: all .3s;}.box:hover {height: 300px;width: 300px;background-color: green;}input {width: 200px;height: 30px;transition: all .3s;}/* 当表单得到光标的时候 */input:focus {width: 300px;background-color: pink;}</style>
</head><body><div class="box"></div><input type="text">
</body></html>
 表单获得焦点选择器 focus
/* 当表单得到光标的时候 */
input:focus {width: 300px;background-color: pink;
}
透明度opacity

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：0 – 1

  • 0：完全透明（元素不可见）

  • 1：不透明

  • 0-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>Document</title><style>body {background: url(./images/huawei.jpg);}.box1 {width: 200px;height: 200px;background-color: pink;/*1. 盒子包括内容都是半透明 *//* 0 是完全透明 *//* 1 是完全不透明 */opacity: 0.2;}.box2 {width: 200px;height: 200px;/*2. 背景半透明只是盒子背景透明，而里面的内容不透明 */background-color: rgba(0, 0, 0, 0.3);color: #fff;}</style>
</head><body><div class="box1">里面的文字也会半透明</div><div class="box2">里面的文字不半透明</div>
</body></html>
光标类型cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

 

<!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>Document</title><style>div:nth-child(1) {cursor: default;}div:nth-child(2) {/* 小手 */cursor: pointer;}div:nth-child(3) {/* 文本 */cursor: text;}div:nth-child(4) {/* 移动 */cursor: move;}div:nth-child(5) {/* 禁止 */cursor: not-allowed;}button {cursor: pointer;}</style>
</head><body><div>鼠标默认</div><div>鼠标小手</div><div>鼠标选择文本</div><div>鼠标移动</div><div>鼠标禁止</div><button>注册</button>
</body></html>
 禁用鼠标样式

div:nth-child(5) {/* 禁止 */cursor: not-allowed;
}

 

表格样式-合并相邻两个边框

<!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>Document</title><style>table {width: 700px;height: 400px;margin: 0 auto;text-align: center;}table,tr,td {border: 1px solid pink;/* 合并相邻的两个边框 */border-collapse: collapse;}/* 2n 偶数 / even   *//* tr:nth-child(2n) {background-color: #eee;} */tr:nth-child(even) {background-color: #eee;}/* 2n+1 奇数   odd */tr:nth-child(odd) {background-color: #ddd;}</style>
</head><body><table><tr><td>内</td><td>内</td><td>内</td><td>内</td><td>内</td></tr><tr><td>内</td><td>内</td><td>内</td><td>内</td><td>内</td></tr><tr><td>内</td><td>内</td><td>内</td><td>内</td><td>内</td></tr><tr><td>内</td><td>内</td><td>内</td><td>内</td><td>内</td></tr><tr><td>内</td><td>内</td><td>内</td><td>内</td><td>内</td></tr><tr><td>内</td><td>内</td><td>内</td><td>内</td><td>内</td></tr></table>
</body></html>

 

4.综合案例-轮播图

图片效果

HTML结构

<div class="banner"><!-- 图: ul > li --><ul><li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li><li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li><li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li></ul>
</div>

CSS样式

* {margin: 0;padding: 0;box-sizing: border-box;
}li {list-style: none;
}.banner {position: relative;margin: 100px auto;width: 564px;height: 315px;/* background-color: pink; */overflow: hidden;
}/* 图片 */
.banner img {width: 564px;border-radius: 12px;vertical-align: middle;
}.banner ul {display: flex;
}
箭头

HTML结构

<!-- 箭头 -->
<!-- 上一张 prev -->
<a href="#" class="prev"><i class="iconfont icon-zuoce"></i>
</a>
<!-- 下一张 next -->
<a href="#" class="next"><i class="iconfont icon-youce"></i>
</a>

CSS样式

/* 箭头 */
.banner .prev,
.banner .next {/* 隐藏 */display: none;position: absolute;top: 50%;transform: translateY(-50%);width: 20px;height: 30px;background-color: rgba(0,0,0, 0.3);text-decoration: none;color: #fff;line-height: 30px;
}/* 鼠标滑到banner区域，箭头要显示 display:block */
.banner:hover .prev,
.banner:hover .next {display: block;
}.banner .prev {left: 0;border-radius: 0 15px 15px 0;
}.banner .next {right: 0;border-radius: 15px 0 0 15px;text-align: center;
}
圆点

HTML结构

<!-- 圆点 -->
<ol><li></li><li class="active"></li><li></li>
</ol>

CSS样式

/* 圆点 */
.banner ol {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);height: 13px;background-color: rgba(255,255,255,0.3);display: flex;border-radius: 10px;
}.banner ol li {margin: 3px;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;cursor: pointer;
}/* 橙色的li */
.banner ol .active {background-color: #ff5000;
}

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

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

相关文章

Redis篇之分布式锁

Redis篇之分布式锁

一、为什么要使用分布式锁 1.抢劵场景 &#xff08;1&#xff09;代码及流程图 &#xff08;2&#xff09;抢劵执行的正常流程 就是正好线程1执行完整个操作&#xff0c;线程2再执行。 &#xff08;3&#xff09;抢劵执行的非正常流程 因为线程是交替进行的&#xff0c;所以有…
阅读更多...
Vagrant 虚拟机工具基本操作指南

Vagrant 虚拟机工具基本操作指南

Vagrant 虚拟机工具基本操作指南 ​#虚拟机 #​ ​#vargant#​ ​#ubuntu#​ ‍ 虚拟机virtualbox ,VMWare及WSL等大家都很了解了&#xff0c;那Vagrant是什么东西&#xff1f; 它是一组命令行工具&#xff0c;可以象Docker管理容器一样管理虚拟机&#xff0c;这样快速创…
阅读更多...
Java代码实现基数排序算法（附带源码）

Java代码实现基数排序算法（附带源码）

基数排序是一种非比较型整数排序算法&#xff0c;其原理是将整数按位数切割成不同的数字&#xff0c;然后按每个位数分别比较。由于整数也可以表达字符串&#xff08;比如名字或日期&#xff09;和特定格式的浮点数&#xff0c;所以基数排序也不是只能使用于整数。 1. 基数排序…
阅读更多...
缓存组件Caffeine的使用

缓存组件Caffeine的使用

caffeine是一个高性能的缓存组件&#xff0c;在需要缓存数据&#xff0c;但数据量不算太大&#xff0c;不想引入redis的时候&#xff0c;caffeine就是一个不错的选择。可以把caffeine理解为一个简单的redis。 1、导入依赖 <!-- https://mvnrepository.com/artifact/com.git…
阅读更多...
Sublime Text 3配置 Node.js 开发环境

Sublime Text 3配置 Node.js 开发环境

《开发工具系列》 Sublime Text 3配置 Node.js 开发环境 一、引言二、主要内容2.1 初识 Sublime Text 32.2 初识 Node.js2.3 接入 Node.js2.3.1 下载并安装 Node.js2.3.2 环境变量配置 2.4 配置 Node.js 开发环境2.5 编写 Node.js 代码2.6 运行 Node.js 代码 三、总结 一、引言…
阅读更多...
网站服务器中毒或是被入侵该怎么办？

网站服务器中毒或是被入侵该怎么办？

随着互联网的普及和发展&#xff0c;网站服务器已经成为企业和个人不可或缺的资源。然而&#xff0c;网络安全问题也日益突出&#xff0c;其中服务器中毒或被入侵是常见的问题之一。一旦服务器中毒或被入侵&#xff0c;不仅会导致数据泄露、网站瘫痪等严重后果&#xff0c;还可…
阅读更多...
Ubuntu22.04切换系统cuda版本

Ubuntu22.04切换系统cuda版本

由于最近项目要求的cuda版本有差异&#xff0c;而在Ubuntu中可以通过切换cuda来满足需求&#xff0c;现记录如下。 1、按照 Ubuntu22.04与深度学习配置 中的cuda安装章节&#xff0c;将需要的cuda版本下载到本地并进行安装。 2、cuda安装完成后修改bashrc文件内容 sudo gedit …
阅读更多...
2024 Google Chrome 浏览器回退安装旧版本

2024 Google Chrome 浏览器回退安装旧版本

2024 Google Chrome 浏览器回退安装旧版本 查看当前谷歌版本备份浏览器数据卸载浏览器双击重新安装旧版本浏览器 查看当前谷歌版本 详细参考&#xff1a;参考 笔记&#xff1a;最近谷歌浏览器更新后&#xff0c;用着总感觉别扭&#xff1a;不习惯 备份浏览器数据 &#xff…
阅读更多...
MySQL ——group by子句使用with rollup

MySQL ——group by子句使用with rollup

group by 子句使用with rollup关键字之后&#xff0c;具有分组加和的功能。即&#xff1a;在所有的分组记录之后&#xff0c;自动新增一条记录&#xff0c;从全局计算所有记录的数据。 0 问题描述 求出每年的学生平均成绩&#xff0c;及历史至今的平均成绩&#xff0c;结果保留…
阅读更多...
高可用 k8s 1.29 一键安装脚本, 丝滑至极

高可用 k8s 1.29 一键安装脚本, 丝滑至极

博客原文 文章目录 集群配置配置清单集群规划集群网络规划 环境初始化主机配置 配置高可用ApiServer安装 nginx安装 Keepalived 安装脚本需要魔法的脚本不需要魔法的脚本配置自动补全加入其余节点 验证集群 集群配置 配置清单 OS&#xff1a; ubuntu 20.04kubernetes&#xf…
阅读更多...
C++三剑客之std::any(一) : 使用

C++三剑客之std::any(一) : 使用

相关系列文章 C三剑客之std::any(一) : 使用 C之std::tuple(一) : 使用精讲(全) C三剑客之std::variant(一) : 使用 C三剑客之std::variant(二)&#xff1a;深入剖析​​​​​​​ 目录 1.概述 2.构建方式 2.1.构造函数 2.2.std::make_any 2.3.operator分配新值 3.访问值…
阅读更多...
猫头虎分享已解决Bug || Go Error: imported and not used: ‘fmt‘

猫头虎分享已解决Bug || Go Error: imported and not used: ‘fmt‘

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …
阅读更多...
EMC学习笔记（二十一）降低EMI的PCB设计指南（一）

EMC学习笔记（二十一）降低EMI的PCB设计指南（一）

降低EMI的PCB设计指南&#xff08;一&#xff09; 1.概述2.射频3.连接器与过孔元件4.静态引脚和动态引脚和输入5.基本回路6.差模与共模 tips&#xff1a;资料主要来自网络&#xff0c;仅供学习使用。 1.概述 印刷电路板(PCB)的一般布局准则&#xff0c;基本上都有相对的文件进…
阅读更多...
Phobos捆绑某数控软件AdobeIPCBroker组件定向勒索

Phobos捆绑某数控软件AdobeIPCBroker组件定向勒索

前言 Phobos勒索病毒最早于2019年被首次发现并开始流行起来&#xff0c;该勒索病毒的勒索提示信息特征与CrySiS(Dharma)勒索病毒非常相似&#xff0c;但是两款勒索病毒的代码特征却是完全不一样&#xff0c;近日笔者在逛某开源恶意软件沙箱的时候发现了一款Phobos勒索病毒捆绑…
阅读更多...
ad18学习笔记十八：如何放置丝印层敷铜？

ad18学习笔记十八：如何放置丝印层敷铜？

我画板的时候&#xff0c;需要把板卡顶面丝印层的一个矩形区域&#xff0c;画成白色&#xff0c;但是这个区域内有好几个焊盘&#xff0c;丝印涂色的地方需要避开这几个焊盘&#xff0c;我觉得不能简单的在丝印层画一个矩形完事&#xff0c;最好让丝印层的这个区域&#xff0c;…
阅读更多...
Docker容器化K8s集群部署教程（一键部署sheel脚本）

Docker容器化K8s集群部署教程（一键部署sheel脚本）

本文通过脚本&#xff0c;可以快速地部署和配置Kubernetes环境&#xff0c;省去了各插件手动部署、配置的繁琐过程。 先看最终结果&#xff1a; [rootlocalhost home]# kubectl get node NAME STATUS ROLES AGE VERSION k8smaster Ready control-p…
阅读更多...
计网——运输层、端口号

计网——运输层、端口号

目录 运输层 1 进程之间的通信 运输层的作用 屏蔽作用 可靠信道与不可靠信道 2 运输层的两个主要协议 3 运输层的端口 端口号 (protocol port number) 软件端口 硬件端口 TCP/IP 运输层端口的标志 两大类、三种类型的端口 常用的熟知端口 运输层 1 进程之间的通信 …
阅读更多...
【Spring源码解读！底层原理进阶】【下】探寻Spring内部：BeanFactory和ApplicationContext实现原理揭秘✨

【Spring源码解读！底层原理进阶】【下】探寻Spring内部：BeanFactory和ApplicationContext实现原理揭秘✨

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《Spring 狂野之旅&#xff1a;底层原理高级进阶》 &#x1f680…
阅读更多...
「深度学习」循环神经网络RNN

「深度学习」循环神经网络RNN

一、序列模型的例子 二、数学符号定义 X^{(i)<t>}&#xff1a;训练样本 i 的输入序列的第 t 个元素。 T_{X}^{i}&#xff1a;训练样本 i 的输入序列的长度。 Y^{(i)<t>}&#xff1a;训练样本 i 的输出序列的第 t 个元素。 T_{Y}^{i}&#xff1a;训练样本 i 的输…
阅读更多...
[大厂实践] Netflix容器平台内核panic可观察性实践

[大厂实践] Netflix容器平台内核panic可观察性实践

在某些情况下&#xff0c;K8S节点和Pod会因为出错自动消失&#xff0c;很难追溯原因&#xff0c;其中一种情况就是发生了内核panic。本文介绍了Netflix容器平台针对内核panic所做的可观测性增强&#xff0c;使得发生内核panic的时候&#xff0c;能够导出信息&#xff0c;帮助排…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发