JavaWEB学习笔记 2024-1-8 --CSS

« 上一篇


文章目录

    • 2.CSS
      • 2.1CSS的引入方式
      • 2.2选择器
        • 2.2.1基本选择器
        • 2.2.2选择器的权重
        • 2.2.3其他选择器
          • 2.2.3.1群组选择器
          • 2.2.3.2后代选择器和父子选择器
          • 2.2.3.3兄弟选择器和相邻选择器
          • 2.2.3.4属性选择器
          • 2.2.3.5伪类选择器
      • 2.3CSS常见的样式
        • 2.3.1CSS盒子模型
          • 2.3.1.1margin
          • 2.3.1.2border
          • 2.3.1.3padding
          • 2.3.1.4标签的默认的margin和padding
        • 2.3.2尺寸样式
        • 2.3.3边框圆角
        • 2.3.4盒子阴影
        • 2.3.5背景样式
          • 2.3.5.1背景颜色
          • 2.3.5.2背景图片
          • 2.3.5.3背景平铺
          • 2.3.5.4背景合并写法
          • 2.3.5.5背景大小
        • 2.3.6文本样式
        • 2.3.7float浮动
        • 2.3.8position定位
        • 2.3.9弹性盒布局
      • 2.4变换
        • 2.4.1平移
        • 2.4.2旋转
        • 2.4.3缩放
        • 2.4.4变换的原点
        • 2.4.5 3D旋转
      • 2.5过渡
      • 2.6动画


2.CSS

层叠样式表
 用于美化页面,修饰页面
CSS分为两个版本
 CSS2.x
 CSS3.x(伴随着HTML5一起发布的)

2.1CSS的引入方式

为了配合CSS的使用,所有的标签都添加了style,id,class等属性
CSS的引入分为三种方式
和HTML不同的是,HTML中的长宽是没有单位的,而CSS必须写单位(px,%,rem等)

行内式,和HTML编写在一起

<body><div style="width: 200px;height: 200px;background: #0cc;"></div><input type="text" style="outline: none;width: 200px;height: 200px;border:none;border-bottom: 1px solid pink;">
</body>

内联式/内嵌式,使用style标签在head中引入css

<head><meta charset="utf-8"><title></title><!-- 内嵌式,CSS代码通过style标签嵌入到html中,课上举例使用较多 --><style>/* 选择器,用于对指定内容添加样式使用 标签选择器:所有的标签都可以作为选择器的名字*/div {width: 200px;height: 200px;background: #0cc;}</style>
</head>
<body><div></div>
</body>

外联式(开发时使用较多)
 两个文件:.html 和 .css
  在html文件中使用link标签,将两个文件进行连接

<head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css.css" />
</head>
<body><div></div>
</body>
div {width: 200px;height: 200px;background: #0cc;
}

2.2选择器

CSS中语法都是使用选择器

语法
 选择器 {
  css样式:样式值;
  …
  …
 }

2.2.1基本选择器

标签选择器
 所有标签名都可以作为选择器
id选择器
 为标签添加id属性,使用#id值作为选择器,唯一的
class选择器
 为标签添加class属性,使用.class值作为选择器,一组的

<head><meta charset="utf-8"><title></title><style>/* 标签选择器 */p {color:red;}/* id选择器,唯一的 */#p1 {background-color: aquamarine;}/* class选择器,一组 */.p-1 {font-size: 28px;}</style>
</head>
<body><p>ppppp</p><p>ppppp</p><p id="p1">ppppp</p><p class="p-1">ppppp</p><p class="p-1">ppppp</p><h2 class="p-1">h2222222222222</h2>
</body>
2.2.2选择器的权重

其他选择器(0) element(1) class(10) id(100) 行内样式(1000)
同等样式使用多种选择器的优先级
可以使用!important去改变选择器样式的优先级

<head><meta charset="utf-8"><title></title><style>/* 权重100 */#p1 {color:hotpink;}/* 权重10 */.p-1 {color:yellowgreen;}/* 权重1 */p {color:red !important;/*!important权重最高*/}/* 其他选择器权重0 */</style>
</head>
<body><!-- 权重1000 --><p class="p-1" id="p1" style="color:cyan;">ppppppppppppppp</p>
</body>
2.2.3其他选择器

高级选择器,组合选择器
 可以将基本选择器组合在一起使用,更加针对某一个位置的样式

2.2.3.1群组选择器

同时为多个标签添加样式,使用逗号

<head><meta charset="utf-8"><title></title><style>div,p,span,a,b{color:red;}/* 通用选择器,可以匹配所有的选择器,很少使用 *//* * {color:red;} */</style>
</head>
<body><div>div...</div><p>pppppp</p><span>span....</span><a href="">aaaaa</a><b>bbbbb</b>
</body>
2.2.3.2后代选择器和父子选择器

用于标签嵌套
 后代选择器:使用空格,可以是隔代使用(直接或者间接嵌套) 使用很多
 父子选择器:使用>,必须为父子关系(直接嵌套)

<head><meta charset="utf-8"><title></title><style>/* 后代选择器:间接的嵌套关系 */#div1 .span1 {background: #0cc;}/* 父子选择器:直接的嵌套关系 */#div2>.span1{background: orange;}</style>
</head>
<body><div id="div1"><div><span class="span1">内容....</span><span class="span2">内容....</span></div></div><div id="div2"><div><span class="span1">内容....</span><span class="span2">内容....</span></div></div>
</body>
2.2.3.3兄弟选择器和相邻选择器

平级标签
 兄弟:平级的俩个标签,使用~
 相邻:紧紧挨着的两个标签,使用+

<head><meta charset="utf-8"><title></title><style>/* 兄弟:只要是平级的可以 */p ~ p {color:red;}p ~ span {color:pink;}/* 相邻:紧紧相邻 */p + p {background: #0cc;}p + span {background: #0cc;}</style>
</head>
<body><p>ppppp</p><span>span</span><span>span</span><p>ppppp</p><span>span</span><p>pppp</p><span>span</span>
</body>
2.2.3.4属性选择器
<head><meta charset="utf-8"><title></title><style>/* 有type属性 */[type] {background: #0cc;}/* type=text */[type=text] {width: 200px;height: 200px;}/* input标签type=text */input[type=text] {background: none;}</style>
</head>
<body><input type="text"><input type="password"><div type="text">div...</div>
</body>
2.2.3.5伪类选择器

针对对标签状态的选择器
:link 超链接未被访问过的状态
:visited超链接访问后的状态
:hover 鼠标悬停状态
:active 鼠标按下状态
若编写样式时,只能按照上述的顺序编写(:link和:visited可以交换的)

对于其他标签可以使用
:hover 鼠标悬停状态
:active 鼠标按下状态

针对于表单标签使用
:focus 获取焦点时

<head><meta charset="utf-8"><title></title><style>a:link {text-decoration: none;/*文本修饰*/color:black;}/* 访问过的a不能添加背景色 */a:visited {color:red;/* background: orangered; */}/* 鼠标移入 */a:hover {background: #0cc;}a:active {color:yellowgreen;background: orange;}td:hover {background: #0cc;}td:active {color:red;}input:focus {background: #0cc;}</style>
</head>
<body><!-- #表示空连接 --><a href="#">跳转</a><table border="1"><tr><td>1</td><td>2</td></tr><tr><td>1</td><td>2</td></tr></table><input type="text">
</body>

2.3CSS常见的样式

CSS可以设置样式,用于修饰HTML

2.3.1CSS盒子模型

所有标签都可以被看做一个盒子
盒子=margin+border+padding+content
 所有的盒子都是由外边距,边框,内边距,内容区组成

2.3.1.1margin
<html><head><meta charset="utf-8"><title></title><!-- 块级标签模式占一整行,被称为通栏 --><style>#div1 {width: 200px;height: 200px;background: #0cc;/* margin是外边距,有上下左右四个方位margin-top:margin-left:可以直接设置的可以将整个盒子在页面上移动,不是改变盒子的大小*/margin-top: 100px;margin-left: 100px;}#div2 {width: 1124px;height: 90px;background: gray;/* 使用margin去完成盒子的居中效果 *//* margin-left: auto;margin-right: auto; *//* margin:1个值:表示上下左右2个值:表示 上下 左右 3个值:表示 上 左右 下4个值:表示 上 右 下 左(顺时针的方向)*//* margin: 10px auto; *//* margin: 10px auto 100px; */margin:10px 20px 30px 40px;}#div3 {width: 200px;height: 200px;background: #0cc;/* margin的垂直失效:margin在垂直方向上的值是合并的,而不是相加的,取的是最大值*/margin-top: 40px;}</style></head><body><div id="div1"></div><div id="div2"><span>欢迎使用xxx系统</span></div><div id="div3"></div></body>
</html>
2.3.1.2border

边框,可以改变我们盒子的大小

<head><meta charset="utf-8"><title></title><style>#div1 {width: 200px;height: 200px;background: #0cc;margin: 100px;/* border简化写法border: 宽度 样式 颜色正常情况下是四个方位+三个属性*//* border:10px solid pink; *//* border-top:10px solid pink; *//* border-left:10px solid pink; *//* border-bottom:10px solid pink; *//* border-right:10px solid pink; */border-color:pink;border-width: 10px;border-style: dotted;/*边框样式是必备的属性*/}</style>
</head>
<body><div id="div1"></div>
</body>
2.3.1.3padding

内边距,内容和border的距离

<head><meta charset="utf-8"><title></title><style>#div1 {width: 200px;height: 200px;background: #0cc;padding:100px;/* 四个方位:1个值:上右下左2个值:上下 左右3个值:上 左右 下4个值:上 右 下 左*//* 一个盒子的真实大小=border+padding+内容 */border:2px solid pink;}</style>
</head>
<body><div id="div1"></div>
</body>
2.3.1.4标签的默认的margin和padding
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 对于布局而言,默认的html的样式是不要的 *//* body,p,ul,li {margin: 0;padding:0;} *//* 统一设置 */* {padding:0;margin: 0;}a {text-decoration: none;}.div1 {width: 200px;height: 200px;background: #0cc;}</style></head><body><div class="div1"></div><div class="div1"></div><p>pppp</p><ul><li>li1</li><li>li2</li><li>li3</li></ul></body>
</html>
2.3.2尺寸样式

width:宽度
height:高度
html标签是没有单位的,css样式有单位可以为px

width: 200px;
height: 200px;
2.3.3边框圆角

CSS3属性,对边框的修饰,有四个方位,可是设置像素和百分比
 若像素/百分比超过对应的宽高50%就圆

<head><meta charset="utf-8"><title></title><style>#div {width: 200px;height: 200px;border:1px solid red;/* border-radius: 100px; *//* border-radius: 50%; */border-bottom-left-radius: 100px;border-top-right-radius: 10px;}</style>
</head>
<body><div id="div"></div>
</body>
2.3.4盒子阴影

CSS3属性

<style>/* div的统一设置 */div {width: 200px;height: 200px;background: #0cc;margin: 100px;}#div1 {/* 阴影 *//* x轴偏移量 y轴偏移量 */box-shadow: -10px -10px;}#div2 {/* 右上 */box-shadow: 10px -10px;}#div3 {/* 左下 */box-shadow: -10px 10px;}#div4 {/* 右下 */box-shadow: 10px 10px;}#div5 {/* 模糊度 */box-shadow: 10px 10px 10px;}#div6 {/* 延展度 */box-shadow: 10px 10px 10px 10px;}#div7 {/* 颜色 */box-shadow: 10px 10px 10px red;}
</style>
2.3.5背景样式
2.3.5.1背景颜色

background-color
 值:
  颜色的英文单词
  十六进制的值,#000000 白色 #ffffff 黑色 #ff0000 红色 #00ff00 绿色 #0000ff蓝色
  rgb()颜色显示,每个位置是0~255的
  rgb,a是透明度

background-color: aqua;
background-color: #55aa00;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0,.1);
2.3.5.2背景图片

background-image:url(图片路径)

background-image: url(img/3.jpg);
2.3.5.3背景平铺

background-repeat:背景平铺

background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
2.3.5.4背景合并写法

background:颜色 图片 平铺

background: #0cc url(img/3.jpg) no-repeat;
2.3.5.5背景大小

background-size:CSS3属性,不能使用合并写法
 可以是px 可以是% 可以auto

<style>
div {width: 400px;height: 200px;border-radius: 50%;background: #0cc url(img/1.jpg) no-repeat;/* 将背景图按照比例进行缩放 *//* background-size: 200px 200px; *//*background-size: 50% 50%;/*容器的百分比*/background-size: cover;/*将整张图片按照容器等比例缩放,图片若太大可能会超出,最符合做头像效果*//*background-size: contain;/*图片按照容器,容器会有超过,会将图片全部填充到容器中,可能会导致容器留白*/
}
</style>
2.3.6文本样式
p {/* 字体大小 */font-size: 28px;/* 加粗 */font-weight: bolder;/* 斜体 */font-style: italic;/* 文本修饰 */text-decoration: overline;text-decoration: underline;text-decoration: none;text-decoration: line-through;/* 颜色 */color:red;/* 字体 */font-family: '黑体';
}
2.3.7float浮动

可以移动当前的div盒子,有两种移动方式(left/right)
脱离文档输出流

<head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}.div {width: 200px;height: 200px;background: #0cc;border:1px solid red;/* 左浮动 *//* float: left; */float:right;/* 内容居中 */text-align: center;}#banner {width: 1200px;height: 90px;background: orange;margin: 0 auto;}#banner #div1 {float: left;}#banner #div2 {float: right;}</style>
</head>
<body><!-- <div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div> --><div id="banner"><div id="div1"><h2>欢迎使用xxx平台</h2></div><div id="div2">欢迎:lhy[<a href="#">退出</a>]</div></div>
</body>
2.3.8position定位

static:默认值,正常文档输出流的

absolute:绝对定位,脱离文档输出流
 相对于网页原点定位:
  没有父容器,或者父容器没有设置position:absolute/relative/fixed
 相对于父容器原点定位:
  有父容器且设置position:absolute/relative/fixed

<!--网页原点-->
<head><meta charset="utf-8"><title></title><style>#div1 {width: 200px;height: 200px;background: #0cc;/* 相对于网页原点定位 */position: absolute;top:100px;left:100px;}</style>
</head>
<body><div id="div1"></div><p>pppp1</p><p>pppp2</p><p>pppp3</p><p>pppp4</p><p>pppp5</p><p>pppp6</p><p>pppp7</p>
<!--父容器--><head><meta charset="utf-8"><title></title><style>#div1 {width: 200px;height: 200px;background: #0cc;/* 相对于网页原点定位 */position: absolute;top:100px;left:100px;}#div2 {width: 100px;height: 100px;background:orange;/* 相对于父容器的位置 */position: absolute;top:100px;left: 100px;}</style></head><body><div id="div1"><div id="div2"></div></div></body>

relative:相对定位
 正常文档输出流,在原本的位置上进行偏移

position: relative;
top: 150px;
left: 150px;

fixed:固定
 脱离文档输出流,针对视口原点

position: fixed;
bottom: 0px;
right: 0px;
2.3.9弹性盒布局

父容器设置display:flex;
子容器设置flex:数值;
 可以将父容器进行等分

<head><meta charset="utf-8"><title></title><style>#content {width: 1200px;height: 300px;background: #0cc;margin: 0 auto;display: flex;}/* 所有的div统一设置 */#content div {height: 280px;background: orange;margin: 5px;}#content .div1 {flex: 1;}#content .div2 {flex: 3;}</style>
</head>
<body><div id="content"><div class="div1"></div><div class="div1"></div><div class="div2"></div><div class="div2"></div><div class="div1"></div><div class="div1"></div></div>
</body>

2.4变换

transform:变换
 变换形状

2.4.1平移
#div1 {width: 200px;height: 200px;background-color: #0cc;/* transform: translate(200px,200px); *//* 过渡 */transition: all 1s;
}
#div1:hover {/* transform: translate(200px,200px); */transform: translateX(200px);transform: translateY(200px);
}
2.4.2旋转
<head><meta charset="utf-8"><title></title><style>#div1 {width: 200px;height: 200px;background-color: #0cc;margin: 100px;border-radius: 10px;/* 过渡 */transition: all 1s;}#div1:hover {transform: rotate(15deg);box-shadow: 0px 0px 10px gray;}</style>
</head>
<body><div id="div1"></div>
</body>
2.4.3缩放
<head><meta charset="utf-8"><title></title><style>#div1 {width: 200px;height: 200px;background-color: #0cc;margin: 100px;border-radius: 10px;/* 过渡 */transition: all 1s;}#div1:hover {/* scale(x,y) x轴缩放的倍数 y轴缩放的倍数 *//* transform: scale(1.5,1.5); */transform: scale(.5,.5);box-shadow: 0px 0px 10px gray;}</style>
</head>
<body><div id="div1"></div>
</body>
2.4.4变换的原点
<head><meta charset="utf-8"><title></title><style>#div1 {background-image: url(../03-CSS常见样式/img/3.jpg);background-size: 100%;width: 200px;height: 200px;background-color: #0cc;margin: 100px;border-radius: 10px;/* 变换的原点 *//* transform-origin: 0 0; */transform-origin: left top;/* 过渡 */transition: all .5s;}#div1:hover {/* transform: scale(.5,.5); */transform: rotate(3deg);box-shadow: 0px 0px 10px gray;}</style>
</head>
<body><div id="div1"></div>
</body>
2.4.5 3D旋转
<head><meta charset="utf-8"><title></title><style>/* 3D旋转发生在父子容器上 */.div {width: 300px;height: 300px;background: #0cc;border: 1px solid red;margin: 100px;/* 在父容器上添加远近度的属性 不能为0,数值越小,视觉感觉越明显*/perspective: 400px;}.div img {/* inherit继承属性值(父子容器) */width: inherit;height: inherit;/* 过渡 */transition: all 1s;/* 背面不可见 */backface-visibility: hidden;}/* 鼠标移入到div上时,img状态发生改变 */.div:hover img {/* 按照Y轴旋转 */transform: rotateY(180deg);/* transform: rotateX(180deg); */}</style>
</head>
<body><div class="div"><img src="img/3.jpg" alt=""></div>
</body>

2.5过渡

transform:过渡样式 过渡时间 过渡效果 延迟时间
 过渡样式:从一个状态到另一个状态可以使用过渡,但是从无到有不行;若所有的样式都参与过渡使用all
 过渡时间:秒为单位
 过渡动画:ease(慢-快-慢) ease-in(慢-快) ease-out(快-慢) linear(匀速)
 延迟时间:开始过渡的时间

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#div1 {width: 200px;height: 200px;background: #0cc;/* 所有样式同步执行 *//* transition: all 1s; *//* transition: width 1s,background 5s; *//* transition: all 1s linear; *//* transition: all 1s linear 3s; *//* width在2s内完成,background是延迟2s的 效果就是宽度先变化,然后背景颜色变化 *//* transition: width 2s,background 5s 2s; */transition: all 2s;position: relative;top: 0px;left: 0px;}#div1:hover {width:800px;background: orange;/* 没有默认值 */top:100px;left: 100px;}</style></head><body><div id="div1">helloworld</div></body>
</html>

2.6动画

以帧为单位进行连续播放

<head><meta charset="utf-8"><title></title><style>/* 自定义动画 */@keyframes donghua {/* 设置时间节点 */0% {top:0px;left:0px;}25% {top:0px;left:200px;transform: scale(1.5,1.5);}50% {top:200px;left:200px;background: orchid;}75% {top:200px;left:0px;}100% {top:0px;left:0px;}}#div1 {margin: 100px;width: 50px;height: 50px;background: #0cc;position: relative;top: 0px;left: 0px;border-radius: 50%;/* 动画名 完成动画的时间 过渡效果 循环动画的次数(infinite无穷) */animation: donghua 10s linear infinite;}</style>
</head>
<body><div id="div1"></div>
</body>

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

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

相关文章

一站式搞定文案生成、违规检测、一键分发的全流程

随着社交媒体的不断发展&#xff0c;越来越多的企业开始布局新媒体矩阵&#xff0c;从集团总部到区域门店、个人销售&#xff0c;从全品类到细分垂直类目、从单一平台到多平台&#xff0c;试图让品牌影响力覆盖更广泛群体&#xff0c; 当然&#xff0c;随之而来的&#xff0c;如…

砥砺深耕,历伴童行 ——南阳人人社工2022年度未保项目结项回顾

未成年人的健康成长&#xff0c;关乎国家未来和民族兴旺。2023年&#xff0c;南阳市人人社会工作服务中心在南阳市民政局的指导下&#xff0c;坚持党建引领未成年人保护服务&#xff0c;紧紧围绕“保权益&#xff0c;促发展&#xff0c;育新人”的使命任务&#xff0c;以最有利…

Qt源码分析:Qt程序是怎么运行起来的?

一、从exec()谈起 一个标准的Qt-gui程序&#xff0c;在启动时我们会coding如下几行简洁的代码&#xff1a; #include "widget.h"#include <QApplication>int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); …

蓝桥杯单片机组备赛——蜂鸣器和继电器的基本控制

文章目录 一、蜂鸣器和继电器电路介绍二、题目与答案2.1 题目2.2 答案2.3 重点函数解析 一、蜂鸣器和继电器电路介绍 可以发现两个电路一端都接着VCC&#xff0c;所以我们只要给另一端接上低电平就可以让蜂鸣器和继电器进行工作。与操作LED类似&#xff0c;只不过换了一个74HC5…

爬虫之使用代理

爬虫—使用代理 1. 为什么使用代理 1.1 让服务器以为不是同一个客户端在请求 1.2 防止我们的真实地址被泄漏&#xff0c;防止被追究 2. 理解使用代理的过程 3. 理解正向代理和反向代理的区别 通过上图可以看出&#xff1a; 正向代理&#xff1a;对于浏览器知道服务器的真实…

vue前端开发自学demo,父子组件之间传递数据demo2

vue前端开发自学demo,父子组件之间传递数据demo2!实际上&#xff0c;组件之间传递数据的&#xff0c;数据类型&#xff0c;是可以多种多样的&#xff0c;下面为大家展示几个常见的数据类型&#xff0c;比如数字类型&#xff0c;数组类型&#xff0c;对象类型。 代码如下所示&a…

Linux Debian12系统gnome桌面环境默认提供截屏截图工具gnome-screenshot

一、简介&#xff1a; 在Debian12中系统gnome桌面环境默认提供一个截图捕获工具screenshot,可以自定义区域截图、屏幕截图、窗口截图和录制视频&#xff0c;截图默认保存在“~/图片/截图”路径下。 可以在应用程序中搜索screenshot,如下图&#xff1a; 也可以在桌面右上角找到…

中国聚α烯烃(PAO)行业市场调研与预测报告(2024版)

内容简介&#xff1a; 合成润滑油是指使用化学方法合成的基础油加入不同的添加剂调和而成的高性能润滑油。合成润滑油在各项性能上都远远优于矿物润滑油&#xff0c;为苛刻工况下工作的设备提供更加可靠的润滑。 常见的合成润滑油主要有聚烯烃类、合成酯类、聚醚类和烷基化芳…

算法进阶——按之字形顺序打印二叉树

题目 给定一个二叉树&#xff0c;返回该二叉树的之字形层序遍历&#xff0c;&#xff08;第一层从左向右&#xff0c;下一层从右向左&#xff0c;一直这样交替&#xff09;。 数据范围&#xff1a;0≤n≤1500,树上每个节点的val满足∣val∣<1500 要求&#xff1a;空间复杂…

物理机搭建hive

一、修改Hadoop配置 修改core-site.xml 配置yarn-site.xml 分发文件&#xff0c;然后重启集群 二、 Hive解压安装 上传文件 添加hive环境便量&#xff0c;source生效 启动高可用集群&#xff0c;启动hive 三、配置mysql元数据库 检查当前系统是否安装过Mysql&#xf…

AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(七)

08.什么是模块化&#xff1f; CommonJS 标准 09.ECMAScript 标准 - 默认导出和导入 10.ECMAScript 标准 - 命名导出和导入 11.包的概念 实操&#xff1a; server.js utils/lib/index.js utils/package.json 12.npm - 软件包管理器 13.npm - 安装所有依赖 从别处&#xff08;网…

node 第二十一天 webpack 初见

为什么需要学习&#xff08;了解&#xff09;webpack webpack是前端工程化的基石&#xff0c;webpack又是基于node进行文件打包bundle&#xff0c;所以作为前端起手学习node服务端开发&#xff0c;同时学习webpack是很有必要的。 随着vite的出现&#xff0c;vue这一脉可能也许不…

HarmonyOS应用开发学习笔记 UIAbility组件与UI的数据同步 EventHub、globalThis

1、 HarmoryOS Ability页面的生命周期 2、 Component自定义组件 3、HarmonyOS 应用开发学习笔记 ets组件生命周期 4、HarmonyOS 应用开发学习笔记 ets组件样式定义 Styles装饰器&#xff1a;定义组件重用样式 Extend装饰器&#xff1a;定义扩展组件样式 5、HarmonyOS 应用开发…

TS:.d.ts 文件 和 declare 的作用

1 declare 做外部声明1.1 声明外部类型1.2 声明外部模块1.2.1 解决引入资源模块报错1.2.2 跳过对第三方库的类型检查 1.3 声明外部变量1.4 声明外部命名空间&#xff08;作用域&#xff09; 2 .d.ts 文件做外部声明3 declare global {} 在模块中做外部声明 先说一下我对 .d.ts文…

计算机缺失msvcp140.dll的修复教程,教你快速解决dll问题

“针对计算机系统中出现的msvcp140.dll文件丢失问题&#xff0c;小编将详细阐述一系列有效的解决方法。首先&#xff0c;msvcp140.dll是Microsoft Visual C Redistributable Package中的一个关键动态链接库文件&#xff0c;对于许多应用程序的正常运行至关重要。当系统提示该文…

RS触发器

转自&#xff1a;【基础】RS触发器_两个或非门构成rs触发器-CSDN博客 RS触发器为什么能 “保持上一状态” 触发器就是在常规的门电路的基础上加入了反馈&#xff0c;这样触发器就实现了存储数据的功能。这也是上面章节 “RS触发器实验” 的 RS触发器特征表 中第3条 “保持上一…

线性分解模型(LDM)的扩展方法——分析稀疏数据里的微生物组存在或缺失关联

谷禾健康 生态学家在分析微生物组和感兴趣的协变量(如临床结果或环境因素)之间的关联时&#xff0c;经常以两种方式查看物种分类计数数据。 一种是将计数视为定量的(即作为相对丰度数据进行分析)&#xff1b;另一种是将计数数据离散化&#xff0c;只表明一个分类单元在样本中是…

终极Linux命令宝典:从入门到精通,一网打尽!

文章目录 Linux命令详解1、Linux初级命令1.1、ls&#xff08;List&#xff09;1.1.1、ls-常用参数&#xff1a; 1.2、pwd&#xff08;Print Working Directory&#xff09;1.3、touch&#xff08;change file timestamps&#xff09;1.3.1、touch-常用参数 1.4、cat&tac (C…

Java多线程:创建多线程的三种方式

在Java中&#xff0c;有三种方式创建多线程&#xff0c;继承类Thread&#xff0c;继承接口Runnable&#xff0c;继承接口Callable。其中Thread和Runnable需要重写方法run&#xff0c;方法run没有返回值&#xff1b;Callable需要重写方法call&#xff0c;方法call可以返回值。 …

SAP OData(三)Query Option

Query option是指客户端在获取EntitySet的URL中后缀的一些指令&#xff0c;在第一篇第四小节我们已经见识了一部分Query指令。在下面表中列出了最重要的QueryOption。注意指令在URL中必须小写。 Operation Query Option Filtering and projecting $filter and $select Sort…