前端 | ( 十一)CSS3简介及基本语法(上) | 尚硅谷前端html+css零基础教程2023最新

学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频


系列笔记

  • 【HTML4】(一)前端简介
  • 【HTML4】(二)各种各样的常用标签
  • 【HTML4】(三)表单及HTML4收尾
  • 【CSS2】(四)CSS基础及CSS选择器
  • 【CSS2】(五)CSS三大特性及常用属性
  • 【CSS2】(六)CSS盒子模型
  • 【CSS2】(七)浮动
  • 【CSS2】( 八)定位与布局
  • 【实操】( 九)尚品汇实操练习
  • 【HTML5】( 十)HTML5简介及相关新增属性
  • 【CSS3】( 十一)CSS3简介及基本语法(上)| 相关新增属性
  • 【CSS3】( 十二)CSS3简介及基本语法(中)| 变换、过渡与动画
  • 【CSS3】 (十三)CSS3简介及基本语法(下)| 伸缩盒模型

文章目录

  • 📚CSS3简介
    • 🐇CSS3概述
    • 🐇CSS3私有前缀
  • 📚CSS3基本语法
    • 🐇CSS3新增长度单位
    • 🐇CSS3新增颜色设置方式
    • 🐇CSS3新增选择器
    • 🐇CSS3新增盒模型相关属性
      • ⭐️`box-sizing`怪异盒模型
      • ⭐️`resize`调整盒子大小
      • ⭐️`box-shadow`盒子模型
      • ⭐️`opacity`不透明度
    • 🐇CSS3新增背景属性
      • ⭐️`background-origin`
      • ⭐️`background-clip`
      • ⭐️`background-size`
      • ⭐️background复合属性
      • ⭐️多背景图
    • 🐇CSS3新增边框属性
      • ⭐️边框圆角
      • ⭐️边框外轮廓
    • 🐇CSS3新增文本属性
      • ⭐️文本阴影
      • ⭐️文本换行
      • ⭐️文本溢出
      • ⭐️文本修饰
      • ⭐️文本描边
    • 🐇CSS3新增渐变
      • ⭐️线性渐变
      • ⭐️径向渐变
      • ⭐️重复渐变
      • ⭐️渐变小案例
    • 🐇web字体
      • ⭐️基本用法
      • ⭐️定制字体
      • ⭐️字体图标

⭐️前文回顾:前端 | ( 十)HTML5简介及相关新增属性 | 尚硅谷前端html+css零基础教程2023最新
⭐️前文对应p160-p170,本文对应p171-p178
⭐️补充网站:W3school,MDN

📚CSS3简介

🐇CSS3概述

在这里插入图片描述

🐇CSS3私有前缀

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

📚CSS3基本语法

🐇CSS3新增长度单位

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>新增长度单位</title><style>* {margin: 0;padding: 0;}.box1 {width: 200px;height: 200px;background-color: deepskyblue;}.box2 {width: 20vw;height: 20vh;background-color: green;}.box3 {width: 20vmax;height: 20vmin;background-color: orange;}</style>
</head>
<body><div class="box1">像素</div><div class="box2">vw和vh</div><div class="box3">vmax</div>
</body>
</html>

在这里插入图片描述

🐇CSS3新增颜色设置方式

前端 | (五)CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新

在这里插入图片描述

🐇CSS3新增选择器

前端 | (四)CSS基础及CSS选择器 | 尚硅谷前端html+css零基础教程2023最新

在这里插入图片描述

🐇CSS3新增盒模型相关属性

⭐️box-sizing怪异盒模型

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>box-sizing</title><style>.box1 {width: 200px;height: 200px;background-color: deepskyblue;padding: 5px;border: 5px solid black;margin-bottom: 20px;}.box2 {width: 200px;height: 200px;background-color: gray;padding: 5px;border: 5px solid black;box-sizing: border-box;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

在这里插入图片描述

⭐️resize调整盒子大小

实际开发中有什么意义嘛?好像没有👀 了解一下~

  • resize必须和overflow配合

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>resize</title><style>.box1 {width: 400px;height: 400px;background-color: orange;resize: both;overflow: scroll;}.box2 {width: 800px;height: 600px;background-color: skyblue;}</style>
</head>
<body><div class="box1"><div class="box2">看右下角!可以调整大小!</div></div>
</body>
</html>

在这里插入图片描述

⭐️box-shadow盒子模型

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>box-shadow</title><style>.box1 {width: 400px;height: 400px;background-color: orange;margin: 0 auto;margin-top: 100px;font-size: 40px;/* 写两个值,含义:水平位置 垂直位置 *//* box-shadow: 10px 10px; *//* 写三个值,含义:水平位置 垂直位置 阴影的颜色 *//* box-shadow: 10px 10px blue; *//* 写三个值,含义:水平位置 垂直位置 模糊程度 *//* box-shadow: 10px 10px 20px; *//* 写四个值,含义:水平位置 垂直位置 模糊程度 阴影颜色 *//* box-shadow: 10px 10px 20px blue; *//* 写五个值,含义:水平位置 垂直位置 模糊程度 外延值 阴影颜色 *//* box-shadow: -10px -10px 20px 10px blue; *//* 写六个值,含义:水平位置 垂直位置 模糊程度 外延值 阴影颜色 内阴影 *//* box-shadow: 10px 10px 20px 10px blue inset; */position: relative;top: 0;left: 0;transition: 0.4s linear all ;}.box1:hover {box-shadow: 0px 0px 20px black;top: -1px;left: 0;}</style>
</head>
<body><div class="box1">你好啊</div>
</body>
</html>

在这里插入图片描述

⭐️opacity不透明度

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>opacity</title><style>.box1 {position: relative;}h1 {position: absolute;top: 100px;left: 0;background-color: black;color: white;width: 400px;line-height: 100px;text-align: center;font-size: 40px;opacity: 0.5;}</style>
</head>
<body><div class="box1"><img src="../images/你瞅啥.jpg" alt=""><h1>你瞅啥</h1></div>
</body>
</html>

在这里插入图片描述

🐇CSS3新增背景属性

⭐️background-origin

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>01_background-origin</title><style>.box1 {width: 400px;height: 400px;background-color: skyblue;margin: 0 auto;font-size: 40px;padding: 50px;border: 50px dashed pink;color: white;background-image: url('../images/bg01.jpg');background-repeat: no-repeat;/* 从border区域开始 */background-origin: border-box;}</style>
</head>
<body><div class="box1">你好啊</div>
</body>
</html>

在这里插入图片描述

⭐️background-clip

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>background-clip</title><style>.box1 {width: 400px;height: 400px;line-height: 400px;background-color: skyblue;margin: 0 auto;font-size: 125px;font-weight: bold;padding: 50px;border: 50px dashed pink;color: transparent;background-image: url('../images/bg02.jpg');background-repeat: no-repeat;background-origin: border-box;/* 好好看的效果 *//* 无论是背景的颜色还是背景图片都受此元素指挥 *//* 前提是文字颜色设置为透明色 */-webkit-background-clip: text;}</style>
</head>
<body><div class="box1">你好啊</div>
</body>
</html>

在这里插入图片描述

⭐️background-size

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>03_background-size</title><style>.cover_like {width: 400px;height: 400px;border: 1px solid black;background-image: url('../images/bg03.jpg');background-size: cover;}.contain_like{width: 400px;height: 400px;border: 1px solid black;background-image: url('../images/bg03.jpg');background-size: contain;}</style>
</head>
<body><div class="cover_like"></div><hr><div class="contain_like"></div>
</body>
</html>

在这里插入图片描述

⭐️background复合属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>04_background复合属性</title><style>.box1 {width: 400px;height: 400px;margin: 0 auto;font-size: 40px;padding: 50px;border: 50px dashed rgba(255, 0, 0, 0.7);/* background: 背景颜色 背景url 是否重复 位置 / 大小 原点 裁剪方式; */background:skyblue url('../images/bg03.jpg') no-repeat 10px 10px / 500px 500px border-box content-box;}</style>
</head>
<body><div class="box1">你好啊</div>
</body>
</html>

⭐️多背景图

CSS3允许元素设置多个背景图片

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>多背景图</title><style>div {width: 400px;height: 400px;border: 1px solid black;background: url('../images/bg-lt.png') no-repeat left top,url('../images/bg-rt.png') no-repeat right top,url('../images/bg-lb.png') no-repeat left bottom,url('../images/bg-rb.png') no-repeat right bottom;}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

🐇CSS3新增边框属性

⭐️边框圆角

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>01_边框圆角</title><style>div {width: 400px;height: 400px;border: 2px solid black;margin: 0 auto;border-radius:100px;}</style>
</head>
<body><div></div>
</body>
</html>

在这里插入图片描述

⭐️边框外轮廓

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>边框外轮廓</title><style>.box1 {width: 400px;height: 400px;padding: 10px;border: 10px solid black;background-color: gray;font-size: 40px;margin: 0 auto;margin-top: 100px;/* 外轮廓与边框的距离 */outline-offset: 30px;/* 复合属性 */outline:20px solid orange;}</style>
</head>
<body><div class="box1">你好啊</div>
</body>
</html>

在这里插入图片描述

🐇CSS3新增文本属性

⭐️文本阴影

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>文本阴影</title><style>body {background-color: black;}h1 {font-size: 80px;text-align: center;color: white;text-shadow: 0px 0px 20px red;font-family: '翩翩体-简';}</style>
</head>
<body><h1>红浪漫洗浴欢迎您的光临</h1>
</body>
</html>

在这里插入图片描述

⭐️文本换行

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>02_文本换行</title><style>div {width: 400px;height: 400px;border: 1px solid black;font-size: 20px;white-space: pre-wrap;}</style>
</head>
<body><div>山回路转不见君           雪上空留马行处山回路转不见君 山回路转不见君山回路转不见君山回路转不见君山回路转不见君雪上空留马行处山回路转不见君雪上空留马行处山回路转不见君雪上空留马行处山回路转不见君雪上空留马行处山回路转不见君雪上空留马行处</div>
</body>
</html>

在这里插入图片描述

⭐️文本溢出

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>03_文本溢出</title><style>ul {width: 400px;height: 400px;border: 1px solid black;font-size: 20px;list-style: none;padding-left: 0;padding: 10px;}li {margin-bottom: 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}</style>
</head>
<body><ul><li>焦点访谈:隐形冠军 匠心打造 分毫必争</li><li>我,嫁到日本才发现,女性活得真憋屈,体毛不能有,放屁也不自由</li><li>高洪波无缘!足协盟主热门人选曝光,3选1,冷门人物或成黑马杀出</li><li>《狂飙》爆火以后“疯驴子”被骂上热搜:跪着赚钱丢人吗</li><li>气温猛降15℃,冷空气再来袭!这些地方迎大范围降雨!“虚高”气温大跳水!!!!!</li></ul>
</body>
</html>

在这里插入图片描述

⭐️文本修饰

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>04_文本修饰</title><style>h1 {font-size: 100px;/* text-decoration-line: overline; *//* text-decoration-style: dashed; *//* text-decoration-color: blue; */text-decoration: overline wavy blue;}</style>
</head>
<body><h1>你好啊,欢迎来到尚硅谷学习</h1>
</body>
</html>

在这里插入图片描述

⭐️文本描边

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>05_文本描边</title><style>h1 {font-size: 100px;/* -webkit-text-stroke-color:red; *//* -webkit-text-stroke-width:3px; *//* -webkit-text-stroke-width:3px; */-webkit-text-stroke:3px black;color: transparent;}</style>
</head>
<body><h1>lalayouyixixixi!</h1>
</body>
</html>

在这里插入图片描述

🐇CSS3新增渐变

⭐️线性渐变

  • 多个颜色之间的渐变,默认从上到下渐变。
    在这里插入图片描述
  • 使用关键词设置线性渐变的方向。
    在这里插入图片描述
  • 使用角度设置线性渐变的方向
    在这里插入图片描述
  • 调整开始渐变的位置
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>01_线性渐变</title><style>.box {width: 300px;height: 200px;border: 1px solid black;float: left;margin-left: 50px;font-size: 20px;text-align: center;line-height: 200px;}.box1 {background-image: linear-gradient(red,yellow,green);}.box2 {background-image: linear-gradient(to right top,red,yellow,green);}.box3 {background-image: linear-gradient(20deg,red,yellow,green);}.box4 {background-image: linear-gradient(red 50px,yellow 100px,green 150px);}.box5 {background-image: linear-gradient(20deg,red 50px,yellow 100px,green 150px);font-size: 80px;text-align: center;line-height: 200px;font-weight: bold;color: transparent;-webkit-background-clip: text;}</style>
</head>
<body><div class="box box1">默认情况(从上到下)</div><div class="box box2">通过关键词调整线性渐变的方向</div><div class="box box3">通过角度调整线性渐变的方向</div><div class="box box4">调整线性渐变的区域</div><div class="box box5">你好啊</div>
</body>
</html>

在这里插入图片描述

⭐️径向渐变

  • 多个颜色之间的渐变,默认从圆心四散。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>02_径向渐变</title><style> .box {width: 300px;height: 200px;border: 1px solid black;float: left;margin-left: 50px;font-size: 20px;margin-top: 20px;}.box1 {background-image: radial-gradient(red,yellow,green);}.box2 {background-image: radial-gradient(at right top,red,yellow,green);}.box3 {background-image: radial-gradient(at 100px 50px,red,yellow,green);}.box4 {background-image: radial-gradient(circle,red,yellow,green);}.box5 {background-image: radial-gradient(200px 200px,red,yellow,green);}.box6 {background-image: radial-gradient(red 50px,yellow 100px,green 150px);}.box7 {background-image: radial-gradient(100px 50px at 150px 150px,red 50px,yellow 100px,green 150px);}</style>
</head>
<body><div class="box box1">默认情况</div><div class="box box2">通过关键词调整径向渐变圆的圆心</div><div class="box box3">通过像素值调整径向渐变圆的圆心</div><div class="box box4">通过circle关键字调整为正圆</div><div class="box box5">通过像素值调整为正圆</div><div class="box box6">调整径向渐变的区域</div><div class="box box7">综合写法</div>
</body>
</html>

在这里插入图片描述

⭐️重复渐变

在这里插入图片描述


⭐️渐变小案例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>04_渐变小案例</title><style>.box1 {width: 300px;height: 400px;padding: 20px;border: 1px solid black;background-image: repeating-linear-gradient(transparent 0px,transparent 29px,gray 30px);background-clip: content-box;}.box2 {width: 200px;height: 200px;border-radius: 50%;background-image: radial-gradient(at 80px 80px,white,#333);}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

在这里插入图片描述

🐇web字体

⭐️基本用法

可以通过 @font-face 指定字体的具体地址,浏览器会自动下载该字体,这样就不依赖用户电脑上的字体了。

  • 语法(简写方式)

    @font-face {
    font-family: "情书字体";
    src: url('./方正手迹.ttf');
    }
    
  • 语法(高兼容性)

    @font-face {
    font-family: "atguigu";
    font-display: swap;
    src: url('webfont.eot'); /* IE9 */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'),
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari,
    Android*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
    }
    

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title><style>@font-face {font-family: "情书字体";src: url('./font1/方正手迹.ttf');}@font-face {font-family: "atguigu";font-display: swap;src: url('./font2/webfont.eot'); /* IE9 */src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('./font2/webfont.woff2') format('woff2'),url('./font2/webfont.woff') format('woff'), /* chrome、firefox */url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */}.t1 {font-size: 100px;font-family: '情书字体';}.t2 {font-size: 100px;font-family: 'atguigu';}</style>
</head>
<body><h1 class="t1">春风得意马蹄疾,不信人间有别离</h1><h1 class="t2">春风得意马蹄疾,不信人间有别离</h1>
</body>
</html>

在这里插入图片描述

⭐️定制字体

  • 中文的字体文件很大,使用完整的字体文件不现实,通常针对某几个文字进行单独定制。
  • 可使用阿里 Web 字体定制工具

⭐️字体图标

  • 相比图片更加清晰。
  • 灵活性高,更方便改变大小、颜色、风格等。
  • 兼容性好, IE 也能支持。
  • 阿里图标官网地址
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title><style>/* 第一步 */@font-face {font-family: 'iconfont';src: url('./font3/iconfont.woff2?t=1676857973138') format('woff2'),url('./font3/iconfont.woff?t=1676857973138') format('woff'),url('./font3/iconfont.ttf?t=1676857973138') format('truetype');}/* 第二步 */.iconfont {font-family: "iconfont" !important;font-size: 100px;}</style>
</head>
<body><span class="iconfont">&#xe85c;</span><span class="iconfont">&#xe85d;</span><span class="iconfont">&#xe85e;</span><span class="iconfont">&#xe85f;</span>
</body>
</html>

在这里插入图片描述

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

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

相关文章

2023/07/23

1. 必须等待所有请求结束后才能执行后续操作的处理方式 方式一&#xff1a; async func () {const p1 await api1();const p2 await api2();const p3 await api3();Promise.all([p1, p2, p3]).then(res > {后续操作...}) }方式二&#xff1a;待补充 2. flex 弹性盒子布…

FPGA实现串口回环

文章目录 前言一、串行通信1、分类1、同步串行通信2、异步串行通信 2、UART串口通信1、UART通信原理2、串口通信时序图 二、系统设计1、系统框图2.RTL视图 三、源码1、串口发送模块2、接收模块3、串口回环模块4、顶层模块 四、测试效果五、总结六、参考资料 前言 环境&#xff…

【计算机视觉 | 目标检测】arxiv 计算机视觉关于目标检测的学术速递(7 月 21 日论文合集)

文章目录 一、检测相关(15篇)1.1 Representation Learning in Anomaly Detection: Successes, Limits and a Grand Challenge1.2 AlignDet: Aligning Pre-training and Fine-tuning in Object Detection1.3 Cascade-DETR: Delving into High-Quality Universal Object Detectio…

《Docker与持续集成/持续部署:构建高效交付流程,打造敏捷软件交付链》

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

c语言修炼之指针和数组笔试题解析(1.2)

前言&#xff1a; 书接上回&#xff0c;让我们继续开始今天的学习叭&#xff01;废话不多说&#xff0c;还是字符数组的内容上代码&#xff01; char *p是字符指针&#xff0c;*表示p是个指针&#xff0c;char表示p指向的对象类型是char型&#xff01; char*p"abcdef&q…

使用Plist编辑器——简单入门指南

本指南将介绍如何使用Plist编辑器。您将学习如何打开、编辑和保存plist文件&#xff0c;并了解plist文件的基本结构和用途。跟随这个简单的入门指南&#xff0c;您将掌握如何使用Plist编辑器轻松管理您的plist文件。 plist文件是一种常见的配置文件格式&#xff0c;用于存储应…

7.6Java EE——Bean的生命周期

Bean在不同作用域内的生命周期 Bean的生命周期是指Bean实例被创建、初始化和销毁的过程。在Bean的两种作用域singleton和prototype中&#xff0c;Spring容器对Bean的生命周期的管理是不同的。在singleton作用域中&#xff0c;Spring容器可以管理Bean的生命周期&#xff0c;控制…

vue父组件和子组件数据传递

vue --父组件向子组件传递数据 父组件&#xff1a; <template><div class"parent"><p>父组件&#xff1a;{{ msg }}</p><Child message"Hello, I am parent!"></Child></div> </template><script>…

【Linux】udp客户端windows版以及Tcp服务器的实现

windows版客户端更适合大多数人~ 文章目录 一. udp客户端windows版二.Tcp服务器的实现总结 一、udp客户端windows版 首先我们将上一篇文章中实现的udp大型聊天室的代码进行修改&#xff0c;注意我们只修改服务端代码将代码修改的很简单就好&#xff0c;因为我们只是做一个如何…

【Flume 01】Flume简介、部署、组件

1 Flume简介 Flume是一个高可用、高可靠、分布式的海量日志采集、聚合和传输的系统 主要特性&#xff1a; 它有一个简单、灵活的基于流的数据流结构&#xff08;使用Event封装&#xff09;具有负载均衡机制和故障转移机制一个简单可扩展的数据模型(Source、Channel、Sink) Sou…

Zookeeper的基本概念以及安装

Zookeeper简介 Zookeeper是一个分布式的(多台机器同时干一件事情),开源的分布式应用程序协调服务,是Google公司Chubby产品,是Hadoop和Base重要的组件,.它是一个分布式应用程序提供一致性的服务的软件,提供的功能包括:配置服务,域名服务,分布式同步,组服务等 Zookeeper目…

多肽试剂1801415-23-5,Satoreotide,UNII-S58172SSTS,应用在多肽标记及修饰上

资料编辑|陕西新研博美生物科技有限公司小编MISSwu​ Satoreotide&#xff0c;UNII-S58172SSTS Product structure Product specifications 1.CAS No&#xff1a;1801415-23-5 2.Molecular formula&#xff1a;C58H72ClN15O14S2 3.Molecular weight&#xff1a;1302.9 4.Packa…

手机word文档怎么转换成pdf?分享两种方法

手机word文档怎么转换成pdf&#xff1f;在如今信息化的时代&#xff0c;电子文档已经成为人们日常办公不可或缺的一部分。随着科技的不断进步&#xff0c;电子文档的格式也在不断发展。PDF作为电子文档的一种重要格式&#xff0c;被广泛使用。那么&#xff0c;如何将手机上的Wo…

一)Stable Diffusion使用教程:安装

目前AI绘画最火的当属Midjorney和Stable Diffusion&#xff0c;但是由于Midjourney没有开源&#xff0c;因此我们主要分享下Stable Diffusion&#xff0c;后面有望补上Midjourney教程。 本节主要讲解Stable Diffusion&#xff08;以下简述SD&#xff09;的下载和安装。 1&…

MyBatis学习笔记——2

MyBatis学习笔记——2 一、MyBatis核心配置文件详解1.1、environment&#xff08;环境&#xff09;1.2、transactionManager&#xff08;事务管理器&#xff09;1.3、dataSource&#xff08;数据源&#xff09;1.4、properties1.5、mapper 二、在WEB中应用MyBatis&#xff08;使…

轮播图添加删除

轮播图页面和对话框搭建 页面简单布局 <template><div id"banner"><el-space direction"vertical" :size"20" style"width: 100%"><h1>轮播图管理</h1><div style"text-align: right"&g…

商城-学习整理-基础-分布式组件(三)

目录 一、前言二、Spring Cloud&Spring Cloud Alibaba1、Spring Cloud 与Spring Cloud Alibaba简介2、为什么使用Spring Cloud Alibaba3、版本选择4、项目中的依赖 三、Spring Cloud Alibaba-Nacos作为注册中心1、Nacos1&#xff09;、下载 nacos-server2&#xff09;、启动…

42. 接雨水

42.接雨水 这是一个简单的动态规划问题&#xff0c;虽然leetcode将它归结为困难。 但是我感觉它难度应该达不到&#xff0c;可能归结为中等比较合适0x1 题目 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨…

python flask 返回中文乱码

使用flask返回数据中带有中文的时候会显示成乱码(ascii)&#xff0c; 中文报文&#xff1a; ABAP中的三大财务报表是&#xff1a;* **资产负债表** * **收入证明** * **现金流量表**这些报表全面概述了公司的财务状况和业绩。* **资产负债表**显示公司在特定时间点的资产、负…

【Python数据分析】Python基础知识篇

&#x1f389;欢迎来到Python专栏~Python基础知识篇 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;Python学习专栏 文章作者技术和水平有限&#xff0c;如果文中出现错误&#xff0c;希望大…