Web CSS笔记3

已于 2024-04-14 22:31:34 修改
阅读量920 收藏 30
点赞数 14
文章标签： 前端 css 笔记
于 2024-04-02 05:57:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cycyzh/article/details/137046668
版权

一、边框弧度

使用它你就可以制作盒子边框圆角

border-radius：
1个值四个圆角值相同
2个值 第一个值为左上角与右下角，第二个值为右上角与左下角
3个值第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
4个值 左上角，右上角，右下角，左下角。
属性描述
border-radius所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius定义了左上角的弧度
border-top-right-radius定义了右上角的弧度
border-bottom-right-radius定义了右下角的弧度
border-bottom-left-radius定义了左下角的弧度
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 50px;
            background-color: aqua;
            border-radius: 25px;
            border-top-right-radius: 70px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

 border-radius: 0.5*h;       ---》变成一个胶囊

 border-radius: 50%;        ---》变成一个圆

斜杠'/'前设置水平半径，斜杠'/'后设置垂直半径，参数之间以空格隔开。

border-radius：参数释义
 border-radius: 100px/50px; 四角的水平半径为100px，垂直半径为50px
 border-radius: 50px 20px/30px 60px;①左上与右下圆角 ②左下与右上圆角
 border-radius: 50px 20px 20px/30px 60px 40px; ①左上 ②左下与右上圆角 ③右下
 border-radius: 10px 20px 20px  10px/10px 10px 20px 10px;①左上②右上③右下④左下      
图片来自​​​​​​http://segmentfault.com/a/1190000041261333

二、盒子阴影

box-shadow:  x轴的偏移量  y轴的偏移量  模糊的半径  扩散的半径  阴影颜色  内/外阴影

/* x轴的偏移量 y轴的偏移量必须写 */

值描述
x-shadowx轴的偏移量，必需，可以为负值
y-shadowx轴的偏移量，必需，可以为负值
blur模糊的半径，不可以为负值
spread扩散的半径，不可以为负值
color 阴影颜色
insert内阴影（inset）/外阴影（outset）默认
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            box-shadow: 5px 2px 10px 10px black inset;
        }
    </style>
</head>
<body>
    <div></div>

</body>
</html>

三、文字阴影

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

值描述
x-shadowx轴的偏移量，必需，可以为负值
y-shadowx轴的偏移量，必需，可以为负值
blur模糊的半径，不可以为负值
color 阴影颜色
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            text-shadow: 5px 5px 3px pink;
        }
    </style>
</head>

<body>
    <p>
        ncjdncjdc
    </p>
</body>
</html>

四、列表属性

list-style 属性是一个简写对属性集合，

  • 包括 list-style-type 和 list-style-image与list-style-position。

list-style-image：指定一个能用来作为列表元素标记的图片。

  • list-style-image: url("图片路径");
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    ul{
        margin: 0 200px;
        display: block;
        list-style-image: url("../img/鲁迅.jfif");
        list-style-position: inherit;
}
    </style>
</head>

<body>
      <ul>
        List 3
        <li>List Item 3-1</li>
        <li>List Item 3-2</li>
        <li>List Item 3-3</li>
      </ul>
</body>
</html>

list-style-position：指定标记框在主体块框中的位置

  • list-style-position：inside       标记框位于主体块框外部。
  • list-style-position：outside     标记框是主体块框中的第一个内联框，之后是元素的内容。
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .one {
        list-style: square inside;
}

    .two {
        list-style-position: outside;
        list-style-type: circle;
}
    </style>
</head>
<body>
    <ul class="one">
        List 1
        <li>List Item 1-1</li>
        <li>List Item 1-2</li>
        <li>List Item 1-3</li>
        <li>List Item 1-4</li>
      </ul>
      <ul class="two">
        List 2
        <li>List Item 2-1</li>
        <li>List Item 2-2</li>
        <li>List Item 2-3</li>
        <li>List Item 2-4</li>
      </ul>
</body>
</html>

 

list-style-type：列表样式类型 

list-style-type：列表样式类型描述
list-style-type: none;不显示列表项的标记。
list-style-type: disc; 实心圆点 (默认值)
list-style-type: circle;  空心圆点
list-style-type: square; 实心方块
list-style-type: decimal; 十进制阿拉伯数字
list-style-type: cjk-decimal；汉十进制数，例如一，二，三，...，九八，九九
list-style-type：upper/lower-roman；大小写罗马数字编号
list-style-type：upper/lower-greek；大小写希腊数字编号
list-style-type: "-";字符编号
list-style-type: simp-chinese-informal；简体中文非正式编号。 一万一千一百一十一
list-style-type: simp-chinese-formal ；简体中文正式编号，例如壹万壹仟壹佰壹拾壹
list-style-type: trad-chinese-informal;繁体中文非正式编号， 例如一萬一千一百一十一
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            width: 200px;
            height: 200px;
            background-color: aqua;
            list-style: none;
            list-style-type: none;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
    </ul>
</body>
</html>

五、resize

resize 用于设置元素是否可调整尺寸，以及可调整的方向,常见的textarea尺寸就是会变的

resize 不适用于下列元素：

  • 内联元素
  • overflow 属性设置为 visible 的块元素

参数描述
none元素不提供用户可控的调整其尺寸的方法。
both元素显示可让用户调整其尺寸的机制，可沿水平和竖直方向调整尺寸。
vertical元素显示可让用户沿竖直方向调整其尺寸的机制。
horizontal元素显示可让用户沿水平方向调整其尺寸的机制。
<textarea  style="resize: none;"></textarea>

六、浮动

  • 浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。
  • 之后发现浮动有个特性：就是让任何盒子可以一行排列,因此用浮动的特性来布局了

① “环绕”图片的效果

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .dad{
           width: 400px;
           height: 400px;
           background-color: aqua;
       }
       img{
           display: block;
           width: 100px;
           height:100px;
           float: right;
       }
    </style>
</head>
<body>
    <div class="dad">
        <img src="../img/鲁迅.jfif" alt="">
         《朝花夕拾》原名《旧事重提》，是现代文学家鲁迅的散文集，收录鲁迅于1926年创作
           的10篇回忆性散文， [1]1928年由北京未名社出版，现编入《鲁迅全集》第2卷。
        此文集作为“回忆的记事”，多侧面地反映了作者鲁迅青少年时期的生活，
        形象地反映了他的性格和志趣的形成经过。前七篇反映他童年时代在绍兴的
        家庭和私塾中的生活情景，后三篇叙述他从家乡到南京，又到日本留学，
        然后回国教书的经历；揭露了半殖民地半封建社会种种丑恶的不合理现象，
        同时反映了有抱负的青年知识分子在旧中国茫茫黑夜中，不畏艰险，寻找
        光明的困难历程，以及抒发了作者对往日亲友、师长的怀念之情 [2]。
        文集以记事为主，饱含着浓烈的抒情气息，往往又夹以议论，做到了抒情、
        叙事和议论融为一体，优美和谐，朴实感人。作品富有诗情画意，又不时穿
        插着幽默和讽喻；形象生动，格调明朗，有强烈的感染力
    </div>
</body>
</html>
标准流父盒子 有文字，会包围浮动盒子

②盒子可以一行排列

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
       .box2{
            width: 200px;
            height: 200px;
            background-color: brown;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
</body>
</html>
全部盒子加了float: left; 之前全部盒子加了float: left; 之后

浮动设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

选择器{float:属性值;}
属性值描述
left元素向左浮动
right元素向右浮动
none元素不浮动（默认值）
  •  浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。
  •  浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。 
  • 浮动的元素会具有行内块元素的特性
  • 首先浮动的盒子需要和标准流的父级搭配使用
  • 若浮动盒子下有一个标准流盒子，盒中有文字，会尽量显示出来
  • 若标准流父盒子有文字，会包围浮动盒子
  • 浮动的元素排列位置：

        跟上一个元素（块级）有关系。

  1. 如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；
  2. 如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

③哥哥浮动盒子飘在弟弟标准流盒子的上面不占位置

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .box2{
            width: 90px;
            height: 90px;
            background-color: brown;
            float: left;
        }

        .box3{
            width: 150px;
            height: 120px;
            background-color: yellow;
        }
    </style>
</head>
<body>
            <div class="box2">2222</div>
            <div class="box3">3333</div>
</body>
</html>

④弟弟浮动盒子在哥哥标准流盒子下面飘不上去，哥哥占了位置

     .box2{
            width: 90px;
            height: 90px;
            background-color: brown;
        }

        .box3{
            width: 150px;
            height: 120px;
            background-color: yellow;
            float: left; 
        }

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            float: left;
        }

        .out {
            width: 800px;
            height: 400px;
            background-color: brown;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: pink;
            float: right;
        }
    </style>
</head>

<body>
    <div class="out">
        <div class="box1">1111111</div>
        <div class="box2">2222</div>
    </div>
</body>

</html>

七、浮动的问题

问题1、

解决方法 1

  1. 给父盒子设置高度
  2. 让父盒子浮动
  3. 保证父盒子是块元素的前提下，在父盒子后面加上伪元素选择器，其次写上clear:both clear:both----》 消除浮动的影响

  4. 父级添加overflow属性：给父级添加： overflow为 hidden|auto|scroll  都可以实现

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .father {
            width: 700px;
            background-color: aqua;
        }

        .left {
            width: 300px;
            height: 300px;
            background-color: blue;
            float: left;
        }
        .father::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left"></div>
    </div>
</body>

</html>
解决问题前解决问题后

 clear 的属性值

属性值描述
left不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素（清除右侧浮动的影响）
both同时清除左右两侧浮动的影响

问题2、

 浮动盒子遮挡住标准流盒子

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
   
        .f{
            width: 500px;
            height:500px;
            background-color: blue;
            float: left;
        }

        p {
            background-color: aqua;
            clear: both; 
        }
        /* p::before {
            display: block;
            content: "";
            clear: both;
        } */
    </style>
</head>
<body>
    <div class="f">
    </div>
    <p>mckdmckdmckdcmddkcmdkcmdkdfghjk</p>
</body>
</html>

解决方法2 

1、  p {

         clear: both;

        }

2、p::before {

            display: block;

            clear: both;

        } 

解决问题前
解决问题后

八、flex布局

弹性盒子的特点就是

  • 默认父盒子成为弹性容器的时候，中的子盒子会会变成弹性盒子，在一行排列
  • 若子盒子没有给高度，会自动延伸成父元素高度


            主轴：默认在水平方向
            测轴：默认在垂直方向
            子元素可以自动挤压和延伸

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: aqua;
            margin: 0 auto;

        }

        li {
            list-style: none;
            width: 100px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        
    </ul>
   </body>
</html>
******子元素设高度******
有高度时前提下，li 盒子在有设宽度的情况下，自动挤压和延伸

有高度时前提下，li 盒子在有设宽度的情况下，增加了一堆 li 盒子，发现，对子元素设宽度作用不大

******子元素不设高度，会自动延申到父盒子宽度******
没有高度时前提下，li 盒子在有设宽度的情况下，没有自动挤满父盒子宽度

没有高度时前提下，li 盒子在没有设宽度的情况下，增加了一堆 li 盒子，没有自动挤满父盒子宽度

八.1、主轴上的对齐方式

主轴：默认在水平方向

​<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: aqua;
            margin: 0 auto;

        }
        li {
            width: 100px;
            height: 180px;
            list-style: none;
            background-color: blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
       
    </ul>
   </body>
</html>

    </ul>
</body>
</html>

对齐方式在父盒子里面写

主轴对齐方式默认从左开始 ：

justify-content: flex-start;

从后面开始：justify-content: flex-end;

两边贴边中间平分

justify-content: space-between;

弹性盒子与弹性盒子之间的距离相等，

justify-content: space-around

弹性盒子与弹性盒子之间的距离相等，

弹性盒子与弹性容器之间的距离相等

justify-content: space-evenly

居中

justify-content: center

八.2、侧轴上的对齐方式

测轴：默认在垂直方向

还是上面的初始盒子 

初始默认在上面：align-items: start;从末尾排起：align-items: end;
 在中间：align-items: center;

挑选其中一个子盒子单独设置

 ul li:nth-child(3) {  align-self: center;  }

八.3、修改主轴方向

还是上面的初始盒子 ，只不过高度改长

主轴方向默认水平从左到右

主轴方向改为水平方向，从右到左

flex-direction: row-reverse

主轴方向改为垂直方向，从上到下

flex-direction: column;

主轴方向改为垂直方向，从下到上

flex-direction: column-reverse

八.4、弹性伸缩比

在我们不确定宽度时，可以利用比例来让弹性盒子宽度自由变换

 /* 整数：占用父级剩余尺寸的分数 */

子盒子写 flex：数字

<<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 0 auto;
            display: flex;
            width: 700px;
            height: 400px;
            background-color: rgb(51, 59, 59);
        }

        li {
            list-style: none;
            height: 40px;
            background-color: aqua;
        }

        ul li:first-child {
            flex: 1;
           
        }

        ul li:nth-child(2) {
            flex: 2;
            background-color: royalblue;
        }

        ul li:last-child {
            flex: 1;
        }
    </style>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>

    </ul>
</body>
</html>

八.5、换行、

不够挤就换行        父盒子写：flex-wrap: wrap;

简直是布局好帮手佳人们！！

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            display: flex;
            width: 500px;
            height: 400px;
            background-color: aqua;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-evenly;
        }

        li {
            list-style: none;
            width: 150px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
</body>

</html>

</html>

九、grid布局(浅谈)

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            display: grid;
            width: 500px;
            height: 900px;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: repeat(4, 100px);
            /* 单元格之间的间距 */
            grid-gap: 20px;
        }

        .box div {
            border: 1px solid pink;
        }

    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>6</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>

grid-template-columns: 1fr 2fr 1fr：（水平方向）一行里按照1：2：1 的比例划分格子
grid-template-rows: repeat(4, 100px)：（垂直方向）一列的高都是100px，重复4行
grid-gap: 20px;          /* 单元格之间的间距 */         

 .box {
            display: grid;
            width: 500px;
            height: 900px;
            grid-template-columns: 1fr 1fr 1fr ;
            grid-template-rows: repeat(4, 100px);
            grid-gap: 20px;
        }

.test {
            /* grid-column-start: 1;
            grid-column-end: 3; */
            grid-column: 1/3;
        }
<div class="test">4</div>

水平跨行

更改了盒子水平比例为 1：1：1

grid-column-start: 1;+ grid-column-end: 3; ===== grid-column: 1/3;

可以理解为3-1=2，所以只横跨了两格，从第一个格子开始，不包括第三个格子

垂直跨列也相同道理

 

...:...:...
关注
  • 14
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端webcss3笔记.docx
08-16
Web CSS3 笔记 本笔记主要讲解了 CSS3 的选择器、属性选择器、伪类选择器、伪元素选择器、阴影、字体、渐变等方面的知识点。 一、选择器 1. 兄弟选择器 - 相邻兄弟选择器：E + F，选择紧邻在 E 后面的 F 元素 - ...
css笔记
04-02
这本“css笔记”是对CSS技术的深入理解和实践的总结，旨在帮助开发者巩固基础知识，提升技能水平。 **基本概念** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p`）、类选择器（`.myClass`）、ID...
web前端CSS学习笔记
09-23
前端笔记CSS第一部分
web开发-css完整笔记
05-17
这篇“web开发-css完整笔记”涵盖了多个CSS相关的知识点，让我们逐一深入探讨。 1. **CSS背景色与前景色**：背景色可以通过`background-color`属性来设置，而前景色则是通过`color`属性来设定。例如，`background-...
《CSS3》学习笔记大全
04-12
"CSS3 学习笔记大全" CSS3 是当前 Web 开发中最重要的样式表语言之一，它能够使得网页变得更加炫酷，之前需要用 JavaScript 才能实现的效果现在用 CSS3 就可以轻松实现。下面是 CSS3 的一些重要知识点： CSS3 简介...
JavaScript代码片段
weixin_66128399的博客
08-26 2936
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
vue ref和reactive区别
灰海
08-25 4983
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
AI 大模型时代，对前端工程师有哪些机遇和挑战？
Z4400840的博客
08-28 1966
AI 大模型时代为前端工程师带来了丰富的机遇，同时也带来了挑战。前端工程师需要积极适应这些变化，掌握新的技能，以抓住时代发展的红利。通过不断学习和提升技术水平，前端工程师可以在AI时代中发挥更大的作用，创造更多的价值。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 651
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
JavaWeb——前端工程化
m0_50460160的博客
08-30 450
通过解构赋值，可以访问到对象中的属性，并将其赋值给对应的变量，从而提高代码的可读性和可维护性;ES6 的解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。该语句将数组 [1,2,3]中的第一个值赋值给a变量，第二个值赋值给b变量，第三个值赋值给c变量。ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式，不仅提高了程序的可维护性，还让JavaScript更方便地应用于大型的应用程序;并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动;
KEYSIGHT是德 Infiniium EXR系列 示波器
XLTYQYB的博客
08-29 1036
该系列的所有型号都集成了一个 10 位 ADC，并且在所有通道上同时提供 16 GSa/s 的采样率。高分辨率 ADC 的效用取决于示波器的前端底噪是否足够低以提供与之匹配的额外的量化电平空间。我们的低噪声前 端包含定制 IC，例如 130 纳米 BiCMOS IC（其中集成了用户可选的模拟滤波器），并且带宽可通过软件 许可证升级。使用硬件滤波时，噪声低至 43 μV，系统 ENOB 达到 9.0 位。Infiniium EXR系列 示波器 型号比较。垂直分辨率是 8 位示波器的 4 倍。
Vue动态表头数据
lplovewjm的博客
08-27 579
本文主要解决场景：表头不固定、从后端数据中拿取表头并渲染到页面中。
vue3+vant4父组件点击提交并校验子组件form表单
最新发布
liuzaixi的博客
08-30 168
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
url中获取参数对象+多条数据展示拼接符号问题
weixin_59787755的博客
08-26 549
多条内容展示拼接符号问题。url中获取参数对象。
WHAT - 前端服务部署和托管推荐
weixin_58540586的博客
08-26 669
Vercel和Netlify特别适合前端和静态网站的快速部署，提供强大的集成功能和自动化部署。Render提供更多样化的服务，包括 Web 应用和后台服务，适合需要更多控制和灵活性的项目。Railway注重简洁性和快速开发，适合那些希望简化流程和配置的用户。选择哪个平台取决于你的具体需求和项目类型。
页面显示图片列表，点击放大和缩小展示
hexianfan的博客
08-27 405
【代码】页面显示图片列表，点击放大和缩小展示。
动态表单实现思路
风情
08-28 436
表单模板设计：将表单拆分为表头属性、表单模板和数据存储三部分。表头属性包含表单的基本信息，如表单名称、描述等；表单模板定义表单的结构和字段，包括字段名称、类型、是否必填等；数据存储则用于保存用户提交的数据。字段配置：抽象出一般化的字段属性，如属性编码（保证唯一性）、属性名称、显示类型（如只读文本、输入框、下拉列表等）、输入类型（如数字、字符串、日期等）。这些属性可以通过后台管理系统进行配置，实现表单的灵活扩展。动态表单的实现思路是通过灵活配置表单模板和字段，结合前后端技术实现表单的动态渲染和交互。
Haproxy搭建Web群集
pangdongqiqi的博客
08-29 561
默认haproxy的日志是输出到系统的syslog中，查看起来不是非常方便，为了更好的管理haproxy的日志，我们在生产环境中一般单独定义出来。需要将haproxy的info及notice日志分别记录到不同的日志文件中。global#需要修改rsyslog配置，为了便于管理。将haproxy相关的配置独立定义到haproxy.conf，并放到/etc/rsyslog.d/下，rsyslog启动时会自动加载此目录下的所有配置文件。
Vue笔记总结（Xmind格式）：第三天
m0_71805303的博客
08-29 345
vue知识总结响应更新：1.v-for高效更新：①当v-for遍历的目标结构改变, Vue触发v-for的更新②数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()2.v-for就地更新：v-for 的默认行为会尝试原地修改元素而不是移动它们3.动态响应数据处理（数组、对象）：①数组：Vue.set(data,index,newvalue);②对象：vm.$set(data,index,newvalue);
CSS学习笔记：WEB开发中的样式精华
"很好的css学习笔记，pdf格式（64页），包含了CSS+DIV的学习内容，适合初学者逐步了解和掌握CSS技术。" 这篇CSS学习笔记详细介绍了CSS的基础知识，包括其起源、作用以及如何改善HTML页面的设计。CSS，即层叠样式表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值