02.体验CSS以及Bootstrap框架

news2024/11/15 19:31:24

目录

CSS固定格式

1）style标签

2）div标签

3）span标签

 CSS属性

一、文字属性

1.规范文字样式的属性

2.规定文字粗细的属性

3.规定文字大小的属性

4.规范文字字体的属性

 二、文本属性

1.文本装饰属性

2.文本水平对齐属性

3.文本缩进属性

三、颜色属性

CSS选择器

1.标签选择器

2.id选择器

3.类选择器

4.后代选择器

5.子元素选择器

6.交集选择器

7.并集选择器

8.兄弟选择器

1）相邻兄弟选择器

2）通用兄弟选择器

CSS三大特性

继承性

层叠性

优先级 

important

CSS显示模式

块级元素和行内元素的区别

显示模式的转换

CSS背景

1.背景颜色（background-color）

2.背景图片（background-image）

3.背景平铺（background-repeat）

4.背景定位（background-position）

盒模型

1.边框属性（border）

2.内边距属性（padding）

3.外边距属性（margin）

4.盒子模型

5.行高

浮动

1.网页布局方式

     标准流排版方式

     浮动流排版方式

2.浮动元素脱标

3.浮动元素排序规则

4.浮动元素高度问题

5.清除浮动

Bootstrap框架

CSS固定格式

1）style标签

注：①style标签必须写在head标签内

       ②设置样式必须按照固定的格式来设置 key:value;

2）div标签

一般用于配合css完成网页的基本布局

3）span标签

一般用于配合css修改网页中的一些局部信息

div标签和span标签的区别

Ⅰ.div会单独占据一行，span不会

Ⅱ.div是一个容器级标签（可以嵌套其他所有标签），span是文本级标签（只能嵌套文字，图片，超链接）

容器级标签：div h ul ol dl li 

文本级标签：span p buis stong em ins del 

 CSS属性

一、文字属性
1.规范文字样式的属性

格式：font-style: ;

    italic 倾斜

    normal 正常（默认）

2.规定文字粗细的属性

格式： font-weight: ;

    bold 加粗

    bolder 更粗

    lighter 细线（默认就是细线）

3.规定文字大小的属性

格式：font-size: ;

注：一定要加单位

4.规范文字字体的属性

格式：font-family: ;

注：①如果取值是中文，需要用双引号或单引号括起来

       ②设置的字体必须是用户电脑里已安装的字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>2.1-CSS属性-文字属性</title>
    <style>
        p {
            font-style: italic;
            font-weight: bold;
            font-size: 30px;
            font-family: '宋体';
        }
        div {

        }
    </style>
</head>
<body>
    <p>我是段落1</p>
    <div>我是段落2</div>
</body>
</html>

 二、文本属性
1.文本装饰属性

格式： text-decoration: ;

underline 下划线

line-through 删除线

overline 上划线

none 什么都没有，常见用途为去除超链接的下划线

2.文本水平对齐属性

格式：text-align: ;

    left 左

    right 右

    center 中间

3.文本缩进属性

格式： text-indent: ;

注：带单位，一个em代表缩进一个文字的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>2.2-CSS属性-文本属性</title>
    <style>
        p {
            text-decoration: underline;
            text-align: center;
            text-indent: 2em;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1</p>
</body>
</html>

三、颜色属性

格式：color:;

取值：①英文

           ②rgb

           ③rgba（a表示透明度，取值在0-1，取值越小越透明）

           ④十六进制（本质就是rgb，其每两位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>2.3-CSS属性-颜色属性</title>
    <style>
        p1{
            color: red;
        }
        p2{
            color: rgb(156,264,15);
        }
        p3{
            color: rgba(156,264,15, 0.5);
        }
        p4{
            color: #f34000; 
        }
    </style>
</head>
<body>
    <p1>我是段落1</p1>
    <p2>我是段落1</p2>
    <p3>我是段落1</p3>
    <p4>我是段落1</p4>

</body>
</html>

CSS选择器

1.标签选择器

注：①标签选择器选中的是当前页面的所有标签，而不能选中其中的某一个标签

       ②标签选择器不论藏的多深都能选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3.1-CSS选择器-标签选择器</title>
    <style>
        p {
            color: #f34000; 
        }
    </style>
</head>
<body>
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
    <p>我是段落4</p>
</body>
</html>

 

2.id选择器

注：①同一个界面中的id标签不可重复

       ②id名前加#

      ③每个标签只能一个id名

       ④id命名：由字母、数字、下划线组成；不能以数字开头；不能和标签名称重复

         （如果只是为了设置样式，一般不使用id，前端开发中id留给js使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3.2-CSS选择器-id选择器</title>
    <style>
        #tag1 {
            color: #f34000; 
        }
        #tag2 {
            color: #26c012; 
        }
        #tag3 {
            color: #541eb8; 
        }
        #tag4 {
            color: #d61f74; 
        }
    </style>
</head>
<body>
    <p id="tag1">我是段落1</p>
    <p id="tag2">我是段落2</p>
    <p id="tag3">我是段落3</p>
    <p id="tag4">我是段落4</p>
</body>
</html>

3.类选择器

专门用来给某个特定的标签来设计样式

注：①同一个界面中的class标签可以重复

       ②class名前加.

       ③每个标签可以绑定多个class名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3.3-CSS选择器-类选择器</title>
    <style>
        .tag1 {
            color: #f34000; 
        }
        .tag2 {
            color: #26c012; 
        }
        .tag3 {
            color: #541eb8; 
        }
        .tag4 {
            color: #d61f74; 
        }
        .ft {
            font-size: 30px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="tag1">我是段落1</p>
    <p class="tag1">我是段落1</p>
    <p class="tag1">我是段落1</p>
    <p class="tag1">我是段落1</p>
    <p class="tag2">我是段落2</p>
    <p class="tag3">我是段落3</p>
    <p class="tag4 ft">我是段落4</p>
</body>
</html>

4.后代选择器

找到指定标签的所有后代标签，设置属性

注：①后代选择器必须用空格隔开

       ②只要最终放在标签中的都属于后代

       ③后代选择器不仅可以使用标签名称，还可以使用其他选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3.4-CSS选择器-后代选择器</title>
    <style>
        #bbb p {
            color: #f34000; 
        }
    </style>
</head>
<body>
    <div class="aaa" id="bbb">
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p>我是段落3
            <p>sadfdfd</p>
        </p>
        <p>我是段落4</p>
    </div>

    <p>我是段落5（在外面）</p>
</body>
</html>

 

5.子元素选择器

找到指定标签的所有特定的直接子元素，设置属性

注：①子元素选择器只会查找儿子，不会查找其他被嵌套的标签

       ②子元素选择器之间用>符号连接，并且可以一直延续下去，不能有空格

       ③子元素选择器不仅可以使用标签名称，还可以使用其他选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3.5-CSS选择器-子元素选择器</title>
    <style>
        .aaa>ul>li>p {
            color: #f34000; 
        }
    </style>
</head>
<body>
    <div class="aaa" id="bbb">
        <p>我是段落1</p>
        <p>我是段落2</p>
        <ul>
            <li>
                <p>我是段落3</p>
                <p>我是段落4</p>
            </li>
        </ul>
    </div>

    <p>我是段落5（在外面）</p>
</body>
</html>

6.交集选择器

注：①选择器与选择器之间没有任何符号连接

用的不多，了解即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3.6-CSS选择器-交集选择器</title>
    <style>
        p.nnn {
            color: #f34000; 
        }
    </style>
</head>
<body>
    <div>
        <p>我是段落1</p>
        <p class="nnn">我是段落2</p>
        <p class="paragraph">我是段落3</p>
        <p class="paragraph">我是段落4</p>
        <div class="nnn">我是div标签</div>
    </div>

    <p>我是段落5（在外面）</p>
</body>
</html>

7.并集选择器

注：①选择器与选择器之间用，连接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3.7-CSS选择器-并集选择器</title>
    <style>
        .paragraph1,.paragraph2 {
            color: #f34000; 
        }
    </style>
</head>
<body>
    <div>
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p class="paragraph1">我是段落3</p>
        <p class="paragraph2">我是段落4</p>
    </div>

    <p>我是段落5（在外面）</p>
</body>
</html>

8.兄弟选择器
1）相邻兄弟选择器

给指定选择器后面紧跟的那个选择器选中的标签设置属性

注：①选择器与选择器之间用+连接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3.8-CSS选择器-相邻兄弟选择器</title>
    <style>
        h1+p {
            color: #f34000; 
        }
    </style>
</head>
<body>
    <h1>我是标题</h1>
    <p>我是段落1</p>
    <p>我是段落2</p>

    <h1>我是标题</h1>
    <p>我是段落1</p>
    <p>我是段落2</p>
</body>
</html>

 

2）通用兄弟选择器

给指定选择器后面所有选择器选中的标签设置属性

注：①选择器与选择器之间用~连接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3.9-CSS选择器-通用兄弟选择器</title>
    <style>
        h1~p {
            color: #f34000; 
        }
    </style>
</head>
<body>
    <h1>我是标题</h1>
    <p>我是段落1</p>
    <p>我是段落2</p>

    <h1>我是标题</h1>
    <p>我是段落1</p>
    <p>我是段落2</p>
</body>
</html>

CSS三大特性

继承性

给父元素设置一些属性，子元素也可以使用

注：①不是所有属性都能继承，只有以color/font-/text-/line开头的属性才能继承

        （a标签的文字颜色和下划线，h标签的文字大小不能继承）

       ②子元素指所有的后代

层叠性

即CSS处理冲突的一种能力

注：①层叠性只有在多个选择器选中同一标签，然后设置了相同属性，才会发生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>4.2-CSS三大特性-层叠性</title>
    <style>
        p {
            color: #f34000; 
        }
        .pa {
            color: rgb(25, 0, 255);
        }
    </style>
</head>
<body>
    <div>
        <p class="pa">我是段落2</p>
    </div>
</body>
</html>

优先级 

如何层叠由优先级来决定

判断优先级的三种方法：

Ⅰ.看是否为直接选中（间接选中就是指继承）

如果是间接选中，则谁离目标近就听谁的

Ⅱ.相同选择器

如果是直接选中，则谁写在后面就听谁的

Ⅲ.不同选择器

如果是直接选中，则按照选择器的优先级来层叠

id>class>标签>通配符>继承>浏览器默认

important

用于提升某个直接选中标签的选择器1中的某个属性的优先级，可以将被指定属性的优先级提升为最高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>4.4-CSS三大特性-!important</title>
    <style>
        #pd1 {
            color: rgb(25, 0, 255);
            font-size: 12px;
        }
        .pc2 {
            color: #f34000 !important;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>
        <p id="pd1" class="pc1 pc2">我是段落2</p>
    </div>
</body>
</html>

CSS显示模式

在HTML中标签分为容器级和文本级标签

在CSS中标签分为块级元素和行内元素

块级元素和行内元素的区别

Ⅰ.块级元素

    独占一行

    如果没有设置宽度，则默认和父元素一样宽

    如果设置了宽高，则按照设置的来显示

Ⅱ.行内元素

    不会独占一行

    行内元素不能设置宽度和高度（默认和内容一样宽）

Ⅲ.行内块级元素

    能够使元素即不独占一行，又可以设置宽度和高度

显示模式的转换

设置元素的display属性

（display 取值，block 块级，inline 行内，inline-block 行内块级）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>显示模式</title>
    <style>
        div {
            background: red;
            /* display: inline; */
        }
    </style>
</head>
<body>
    <div>111111</div>
    <div>33333</div>
</body>
</html>

 消除 display: inline; 的注释

CSS背景

1.背景颜色（background-color）

在CSS用background-color:属性设置标签背景颜色

2.背景图片（background-image）

在CSS用 background-image: url()属性设置标签背景颜色

注：①图片地址必须放在url()中，可以使本地地址，也可以是网络地址

       ②如果图片的大小没有标签的大小大，那么会自动在水平和垂直的方向平铺和填充

       ③如果网页上出现了图片，那么浏览器会再次发出请求获取图片

3.背景平铺（background-repeat）

在CSS用background-repeat:属性设置背景的平铺方式

（repeat 默认，水平垂直都平铺，no-repeat 都不平铺）

（repeat-x只在水平方向平铺，repeat-y只在垂直方向平铺）

4.背景定位（background-position）

在CSS用background-position:属性设置背景图片的位置

（1）格式：background-position: 水平方向 垂直方向；

（2）取值：水平方向（left center right）

         垂直方向（top center bottom）

（3）像素：background-position:100px 200px（例）

         一定要加上单位

注：①同一个标签背景颜色和背景图片可以同时设置，但图片会覆盖颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>6-CSS背景</title>
    <style>
        div {
            border: 1px solid #333;
            width: 600px;
            height: 600px;
            background-color: rgb(49, 49, 175);
            background-image: url(./img/tx.png);
            background-repeat: repeat-x;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

盒模型

1.边框属性（border）

即环绕在标签宽度和高度周围的线条

（1）格式：

              连写1.（同时设置四条边框）：border:宽度 样式 颜色;

              分写2.  border-top:同上

                          border-right:

                          border-bottom:

                          border-left:

             分写3.  border-width：上  右  下  左

                          border-style：

                          border-color：

2.内边距属性（padding）

边框与内容之间的距离

            连写1.padding:上 右 下 左

            分写2.padding-top: 其他位置同上

注：①给标签设置内边距之后，标签占有的宽度和高度会发生改变

       ②内边距也会有背景颜色

3.外边距属性（margin）

标签和标签之间的距离

            连写1.margin:上 右 下 左

            分写2.margin-top: 其他位置同上

4.盒子模型

一个比喻，HTML中的所有标签都是盒子

（1）内容的宽度和高度是通过标签的width/height属性设置的宽度和高度

（2） text-align: center;设置盒子中储存的文字/图片水平居中

           margin: 0 auto;设置盒子自己水平居中

5.行高

在CSS中所有的行都有自己的行高

注：①行高和盒子高不是同一个概念

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>7.1-盒模型-边框属性</title>
    <style>
        div {
            width: 600px;
            height: 600px;
            background-color: blueviolet;
            color: white;
            padding: 20px 50px 20px 40px;
            border: 10px solid #000;
            border-width: 2px 6p4px x 8px;
            border-color: red gold green blueviolet;
            border-style: dashed solid dashed solid;
            margin: 0 auto;
            margin-bottom: 10px;
        }
        .div2 {
            margin: 30px 20px 40px 20px;
            line-height: 600px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="div1">111111</div>
    <div class="div2">222222</div>
</body>
</html>

 

浮动

1.网页布局方式
     标准流排版方式

          浏览器的默认排版方式，其中有两种排版方式，一是垂直排版，二是水平排版

 （如果元素是块级元素，则垂直排版；如果元素是行内元素/行内块级元素，则水平排版） 

     浮动流排版方式

         是一种“半脱离标准流”的排版方式，只有一种排版方式，即水平排版

（只能设置某个元素左对齐或右对齐）

注：①浮动流中没有居中对齐（通过设置float:left/right;）

       ②在浮动流中不可以使用margin: 0 auto;

特点:

(1)在浮动流中是不区分块级元素/行内元素/行内块级元素的无论是级元素/行内元素/行内块级元素都可以水平排版

(2)在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高

2.浮动元素脱标

     脱离标准流

     当某一个元素浮动之后，那么这个元素看上去就像是被从标准流中删除了一样，这个就是浮动元素的脱标

（如果前面的一个元素浮动了，后面的一个元素没有浮动，这时前面的元素会盖住后面的一个元素）

3.浮动元素排序规则

在同一方向上的浮动元素：先浮动的元素会显示在前面，后浮动的显示在后面

在不同方向上浮动的元素：左浮动找左浮动，右浮动找右浮动

4.浮动元素高度问题

只有在标准流中内容的高度可以撑起父元素的高度

5.清除浮动

通过添加 overflow:hidden:

Bootstrap框架

Bootstrap4中文站 · 全球最流行的 HTML、CSS 和 JS 工具库。

Bootstrap v4 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据库中锁的机制和MVCC协议以及隔离级别

数据库中锁的机制和MVCC协议以及隔离级别

文章目录 数据库中的锁锁与索引的关系释放锁的时机乐观锁与悲观锁行锁与表锁共享锁与排它锁意向锁记录锁、间隙锁和临键锁记录锁间隙锁临键锁 锁优化方案 MVCC协议MySQL的隔离级别脏读和幻读快照读和当前读 版本链Read ViewRead View 与已提交读Read View 与可重复读m_up_limit…
阅读更多...
【C语言题解】1、写一个宏来计算结构体中某成员相对于首地址的偏移量；2、写一个宏来交换一个整数二进制的奇偶位

【C语言题解】1、写一个宏来计算结构体中某成员相对于首地址的偏移量；2、写一个宏来交换一个整数二进制的奇偶位

&#x1f970;欢迎关注 轻松拿捏C语言系列&#xff0c;来和 小哇 一起进步&#xff01;✊ &#x1f308;感谢大家的阅读、点赞、收藏和关注 &#x1f495;希望大家喜欢我本次的讲解&#x1f495; 目录&#x1f451; 1、写一个宏&#xff0c;计算结构体中某变量相对于首地址的偏…
阅读更多...
STM32_HAL库_外部中断

STM32_HAL库_外部中断

一、设置分组 stm32f1xx_hal_cortex.c 查看分组 五个形参&#xff0c;分组0~4 stm32f1xx_hal.c 设置了分组为2&#xff0c; 此工程就不需要再设置了 再回到stm32f1xx_hal_cortex.c 查看NVIC_SetPriorityGrouping的定义&#xff0c;若无法跳转&#xff0c;先编译一下&…
阅读更多...
【数据结构】穿梭在二叉树的时间隧道：顺序存储的实现

【数据结构】穿梭在二叉树的时间隧道：顺序存储的实现

专栏引入 哈喽大家好&#xff0c;我是野生的编程萌新&#xff0c;首先感谢大家的观看。数据结构的学习者大多有这样的想法&#xff1a;数据结构很重要&#xff0c;一定要学好&#xff0c;但数据结构比较抽象&#xff0c;有些算法理解起来很困难&#xff0c;学的很累。我想让大家…
阅读更多...
Apple开发者应用商店(AppStore)描述文件及ADHOC描述文件生成

Apple开发者应用商店(AppStore)描述文件及ADHOC描述文件生成

创建AD HOC描述文件 1.选中Profiles,然后点击加号创建 2.创建已注册设备可安装描述文件 3.选择要注册的id 4.选择证书 5.选择设备 6.输入文件名,点击生成 7.生成成功,点击下载
阅读更多...
重新ysyx

重新ysyx

一、克隆仓库 1.创建ssh key ssh-keygen -t rsa cd ~/.ssh ls 查看里面是否有id_rsa id_rsa.pub ssh-keygen -t rsa -C "xiantong15834753336outlook.com" cat id_rsa.pub***********查看里面的内容&#xff0c;复制到下图中绿色的按钮 git init ssh -T g…
阅读更多...
Alsa UCM

Alsa UCM

Alsa Use Case Manager&#xff08;用例管理器&#xff09;描述如何为某些用例&#xff08;如 “播放音频”、“通话”&#xff09;设置 mixer 混频器。它还描述如何修改 mixer 混频器状态以将音频路由到某些输出和输入&#xff0c;以及如何控制这些设备。 这基本上涵盖了 Pul…
阅读更多...
胶南代理记账，为您提供专业、便捷的会计服务

胶南代理记账，为您提供专业、便捷的会计服务

欢迎来到胶南代理记账服务站&#xff0c;这里我们专注于为企业提供专业的会计服务&#xff0c;无论您是初创企业还是已经在业界有一定规模的企业&#xff0c;我们都将以最专业的态度和最高效的服务为您量身定制合适的记账方案。 我们的目标不仅是帮助您完成财务报告的制作&…
阅读更多...
奥威BI零售数据分析方案的优缺点一览

奥威BI零售数据分析方案的优缺点一览

奥威BI零售数据分析方案是一套基于BI大数据智能可视化分析系统&#xff0c;根据零售企业数据分析共性需求、业务特殊性量身打造&#xff0c;点击下载应用&#xff0c;立即将零售数据情况分析清楚&#xff0c;直观呈现。很多企业都是直接在该零售数据分析方案的基础上实现了智能…
阅读更多...
Windows系统中好用的闪迪U盘修复工具

Windows系统中好用的闪迪U盘修复工具

本文向你介绍了一款简单好用的闪迪U盘修复工具&#xff0c;它可以帮助你轻松修复闪迪U盘的各种问题。该工具操作简单&#xff0c;能帮用户节省大量的时间和精力。 闪迪U盘损坏可以修复吗&#xff1f; “我有一只32GB的闪迪U盘出现了问题&#xff0c;可能是因为我在关机前将它强…
阅读更多...
【CS.CN】深入解析HTTP中的Expect: 100-continue头：性能优化的利器还是鸡肋？

【CS.CN】深入解析HTTP中的Expect: 100-continue头：性能优化的利器还是鸡肋？

目录 0 序言 0.1 由来0.2 使用场景0.3 现在还需要吗&#xff1f; 1 Expect: 100-continue的机制2 语法 && 通过重新设置空的Expect头优化性能3 实例分析&#xff1a;长连接中的Expect问题解决4 总结 0 序言 0.1 由来 Expect: 100-continue头部字段最早在HTTP/1.1规…
阅读更多...
国产操作系统上给麒麟虚拟机安装virtualbox增强工具 _ 统信 _ 麒麟 _ 中科方德

国产操作系统上给麒麟虚拟机安装virtualbox增强工具 _ 统信 _ 麒麟 _ 中科方德

原文链接&#xff1a;国产操作系统上给麒麟虚拟机安装virtualbox增强工具 | 统信 | 麒麟 | 中科方德 Hello&#xff0c;大家好啊&#xff01;昨天给大家带来了一篇在国产操作系统上给VirtualBox中的Win7虚拟机安装增强工具的文章&#xff0c;今天我们将继续深入&#xff0c;介绍…
阅读更多...
Interview preparation--RabbitMQ

Interview preparation--RabbitMQ

AMQP AMQP(Advanced Message Queueing protocol). 高级消息队列协议&#xff0c;是进程之间床底一步新消息的网络协议AMQP工作原理如下&#xff1a; 发布者&#xff08;Publisher&#xff09;发布消息&#xff08;Message&#xff09;经过交换机&#xff08;Exchange&#xff…
阅读更多...
【Python】认识 Python

【Python】认识 Python

一、计算机基础概念 1、什么是计算机 很多老一辈的人&#xff0c;管下面这个叫做计算机。然而&#xff0c;它只是 “计算器”&#xff0c;和计算机是有很大区别的。 现在我们所说的计算机&#xff0c;不光能进行算术运算&#xff0c;还能进行逻辑判断、数据存储、网络通信等…
阅读更多...
uniapp原生插件开发实战——集成Android端的Twitter登陆

uniapp原生插件开发实战——集成Android端的Twitter登陆

Android集成Twitter登陆的官方教程：https://github.com/twitter-archive/twitter-kit-android/wiki 项目创建 首先可以先看下uniapp原生插件开发教程 uniapp原生插件类型分为两种： Module模式：能力扩展，无嵌入窗体的UI控件，类似于功能插件。Component模式：在窗体中内嵌…
阅读更多...
websocket php workerman 服务器nginx配置wss协议

websocket php workerman 服务器nginx配置wss协议

首先 Nginx的版本要高&#xff0c;尽量用当前最新稳定版本。 其次 WSS协议&#xff0c;是在HTTPS协议的基础上&#xff0c;进行协议升级&#xff0c;进行通讯的&#xff0c;所以先要保证你有一个 HTTPS正常的WEB站点。 所以&#xff0c;通过Nginx -V 请保证 一定有 --with-ht…
阅读更多...
监控摄像机接入GB28181平台如何获取监控视频

监控摄像机接入GB28181平台如何获取监控视频

各种型号监控摄像头或硬盘录像机接入 GB28181平台配置过程非常简单明了&#xff0c;但有些细节需要注意&#xff0c;避免走弯路。 1、基本要求 &#xff08;1&#xff09;网络要求 总的来说&#xff0c;只要监控设备和GB28181平台的网络是连通的&#xff0c;设备可以主动访问…
阅读更多...
Linux 35.5 + JetPack v5.1.3@FC-Planner编译安装

Linux 35.5 + JetPack v5.1.3@FC-Planner编译安装

Linux 35.5 JetPack v5.1.3FC-Planner编译安装 1. 源由2. 编译&安装Step 1&#xff1a;依赖库安装Step 2&#xff1a;克隆工程Step 3&#xff1a;编译工程Step 4&#xff1a;LKH编译Step 5&#xff1a;安装工程 3. 问题汇总3.1 Killed signal terminated program cc1plus3…
阅读更多...
跟着小白学linux的基础命令

跟着小白学linux的基础命令

小白学习记录&#xff1a; 前情提要&#xff1a;Linux命令基础格式!查看 lsLinux 的7种文件类型及各颜色代表含义 进入指定目录 cd查看当前工作目录 pwd创建一个新的目录(文件夹&#xff09; mkdir创建文件 touch查看文件内容 cat、more操作文件、文件夹- 复制 cp- 移动 mv- 删…
阅读更多...
Vxe UI vxe-form 实现折叠表单，当表单很多时实现自动收起与展开

Vxe UI vxe-form 实现折叠表单，当表单很多时实现自动收起与展开

Vxe UI vue vxe-form 实现折叠表单&#xff0c;当表单很多时实现自动收起与展开 代码 folding 用于将当前表单项设置为默认隐藏 collapse-node 设置折叠按钮&#xff0c;加上之后会自动在该表单项的右侧显示一个折叠按钮 <template><div><vxe-formtitle-colo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023