首页 > 其他分享 >css的基本使用

css的基本使用

时间：2024-03-18 11:47:50浏览次数：21  
标签：基本 color 元素 height 1px background 使用 border css

CSS

2.3结构伪类选择器

伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li:first-child{
                background: brown;
        }
        ul li:last-child{
            background: gold;
        }
    /*选中p1：定位到父元素，选择当前的第一个元素，选择当前p     顺序
    元素的父级元素，选中分级元素的第一个
    情况：在提供的HTML代码中，p4, p5, p6, p7 分别位于无序列表 <ul> 的列表项 <li> 中，
    并且每个列表项都包含一个段落元素 <p>。因此，这些段落元素 <p> 都是它们所在列表项的第一个子元素。
    */
       /*p:nth-child(1){*/
       /*     background:blue;*/
       /* }*/
       /*选中父元素，下的p元素的第一个，类型*/
       p:nth-of-type(2){
           background: aqua;
       }
    </style>
</head>
<body>
<p>p0</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
    <li><p>p7</p></li>
</ul>
</body>
</html>

2.4 属性选择器

id+class结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: chartreuse;
            text-align: center;
            color: blue;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
    /*存在id属性的元素  属性名 = 属性值<正则>
    = 绝对等于
    *=包含这个元素
    ^=以这个开头
    $=以这个结尾
       a[]{}
    */
    /*a[id=first]{*/
    /*  background: gold;*/
    /*}*/
    /*    a[class*="link"]{*/
    /*        background: brown;*/
    /*    }*/
    /*    a[href^=https]{*/
    /*        background: blanchedalmond;*/
    /*    }*/
        a[href$=pdf]{
            background: brown;
        }
    </style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com"class="link item first"id="first">1</a>
<a href=""class="link item active"target="_blank"title="test">2</a>
<a href="image/123.html"class="link item">3</a>
<a href="image/123.png"class="link item">4</a>
<a href="image/123.jpg"class="link item">5</a>
<a href="abc"class="link item">6</a>
<a href="/a.pdf"class="link item">7</a>
<a href="/abc.pdf"class="link item">8</a>
<a href="abc.doc"class="link item">9</a>
<a href="abcd.doc"class="link item">10</a>
    </p>
</body>
</html>

3美化网站

3.1 为什么要美化网站

  1. 有效的转递页面信息
  2. 美化网页，页面漂亮
  3. 突出页面订单主题
  4. 提高用户的体验

span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习<span id="title1">java</span>>
</body>
</html>

3.2字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
font-family 字体
font-size 字体大小
font-weight 字体粗细
color:字体颜色
-->
    <style>
        body{
            font-family: 微軟正黑體;
            color: blanchedalmond;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>故事简介</h1>
<p class="p1">这里是七种元素交汇的幻想世界“提瓦特”。</p>
<p>在遥远的过去，人们藉由对神灵的信仰，获赐了驱动元素的力量，得以在荒野中筑起家园。</p>
</body>
</html>

3.3 文本样式

  1. 颜色 color rgb rgba
  2. 文本对齐 text-align = center
  3. 首行缩进 text-inder：2em
  4. 行高 line-height：单行文字上下居中，；line-height = height
  5. 装饰 text-decoration
  6. 文本图片水平线对齐：vertical-align：middle

3.4 阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--默认的颜色-->
        a{
            text-decoration:none;
    color: black;
        }
        /*鼠标悬浮的颜色只需要记住这个*/
        a:hover{

            color: brown;
            font-size: 50px;
        }
        /*鼠标按住未释放的颜色*/
        a:active{
            color: blue;
        }
        a:visited{
            color: chartreuse;
        }
        /* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: blue 10px 10px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="image/QQ图片20240310093052.png" alt="">
</a>
<p>
    <a href="#">码出高效：java开发手册</a>
</p>
<p>
    <a href="">作者：孤尽老师</a>
</p>
<p id="price">
    99￥
</p>
</body>
</html>

3.5 超链接伪类

正常情况下a:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--默认的颜色-->
        a{
            text-decoration:none;
    color: black;
        }
        /*鼠标悬浮的颜色只需要记住这个*/
        a:hover{

            color: brown;
            font-size: 50px;
        }
        /*鼠标按住未释放的颜色*/
        a:active{
            color: blue;
        }
        a:visited{
            color: chartreuse;
        }
        /* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: blue 10px 10px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="image/QQ图片20240310093052.png" alt="">
</a>
<p>
    <a href="#">码出高效：java开发手册</a>
</p>
<p>
    <a href="">作者：孤尽老师</a>
</p>
<p id="price">
    99￥
</p>
</body>
</html>

3.6 列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="style.css"type="text/css">
</head>
<body>
<div id="div">
  <h2 class="title">全部商品分类</h2>

  <ul>
    <li>
      <a href="#">图书</a>
      <a href="#">音像</a>
      <a href="#">数字商品</a>
    </li>
    <li>
      <a href="#">家用电器</a>
      <a href="#">手机</a>
      <a href="#">数码</a>
    </li>
    <li>
      <a href="#">电脑</a>
      <a href="#">办公</a>
    </li>
    <li>
      <a href="#">家居</a>
      <a href="#">家装</a>
      <a href="#">厨具</a>
    </li>
    <li>
      <a href="#">服饰鞋帽</a>
      <a href="#">个性化妆</a>
    </li>
    <li>
      <a href="#">礼品箱包</a>
      <a href="#">钟表</a>
      <a href="#">珠宝</a>
    </li>
    <li>
      <a href="#">食品饮料</a>
      <a href="#">保健食品</a>
    </li>
    <li>
      <a href="#">彩票</a>
      <a href="#">旅行</a>
      <a href="#">充值</a>
      <a href="#">票务</a>
    </li>
  </ul>
</div>

</body>
</html>

#div{
    width: 300px;

}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: red;
}
/*ul li*/
ul li{
    /*行高*/
    height: 30px;
    /* list-style:none 取掉原点
                   circle空心圆
                   decimol数字
                   squre空心圆*/
    list-style: none;
}
ul{
    background:#a0a0a0;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: gold;
    text-decoration: underline;
}

3.7 背景颜色

背景颜色

背景照片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("ph4550-p00004.jpg");
        /*默认全部平铺*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

#div{
    width: 300px;

}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    /*颜色 图片 图片位置，平铺方式*/
    background: red url("image/780.jpg") 250px 10px no-repeat;
}
/*ul li*/
ul li{
    /*行高*/
    height: 30px;
    /* list-style:none 取掉原点
                   circle空心圆
                   decimol数字
                   squre空心圆*/
    list-style: none;
    background: url("image/OIP-C.jpg")130px 10px no-repeat;
}
ul{
    background:#a0a0a0;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: gold;
    text-decoration: underline;
}

3.8 渐变

4 盒子模型

image-20240310113043384

4.1 什么是盒子

margin：外边距

padding：内边框

border：边框

4.2 边框

  1. 边框的粗细
  2. 边框的样式
  3. 边框颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body总有一个默认的外边距margin：0
        常见规范： margin: 0;
            padding: 0;
            text-decoration: none;
        */
        h1,ul,li,a,body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        #box{
         width: 300px;
            /*border :粗细 样式，颜色*/
            border: 1px solid red;
        }
        h2{
            font-size: 16px;
            background-color: aqua;
            line-height: 30px;
            color: wheat;
        }
        /*form{}标签选择器*/
        form{
            background: aqua;
        }
        div:nth-of-type(1) input{
            border: 2px solid black;
        }
        div:nth-of-type(2) input{
            border: 2px dashed yellow;
        }
        div:nth-of-type(3) input{
            border: 2px dashed wheat;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登入</h2>
    <form action="#">
        <div>
            <span>姓名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>

</div>
</body>
</html>

4.3 外边距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    h1,ul,li,a,body{
      margin: 0;
      padding: 0;
      text-decoration: none;
    }
    /*
    顺时针选择
    margin：0
    margin：0 1px
    margin：0 1px 2px 3px
    */
    #box{
      width: 300px;
      /*border :粗细 样式，颜色*/
      border: 1px solid red;
margin: 0 auto;
    }
    h2{
      font-size: 16px;
      background-color: aqua;
      line-height: 30px;
      color: wheat;
      margin: 0 1px 2px 3px;
    }
    /*form{}标签选择器*/
    form{
      background: aqua;
    }
    input{
      border: 1px solid black;
    }
    div:nth-of-type(1){
      padding: 10px 2px;
    }
  </style>
</head>
<body>
<div id="box">
  <h2>会员登入</h2>
  <form action="#">
    <div>
      <span>姓名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="text">
    </div>
    <div>
      <span>邮箱：</span>
      <input type="text">
    </div>
  </form>

</div>
</body>
</html>

盒子的计算方式：你这个元素到底多大？

image-20240310151314570

margin+border+padding+内容宽度

50*50px是所有加在一起的要仔细规划

4.4 圆角边框

4个角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:100px;
            height: 40px;
            border: 10px solid red;
            /*左上，右下，右上，左下
            border-radius：xxpx
            4个角都是
            border-radius：xxpx xxpx
            左上，右下相同
            右上，左下相同
            border-radius：xxpx xxpx xxpx
            左上，右下，右上和左下相同
             border-radius：xxpx xxpx xxpx xxpx
             左上，右上，右下，左下
            */
            border-radius: 50px 50px 0 0;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

4.5 阴影

门户网站，模板之间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .app {
            /*margin:0 auto居中
            前提：块元素，块元素有固定的宽度
            */
            width: 1500px;
            box-shadow: 10px 10px 100px yellow;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="app">

    <img src="../image/f159a24f7a0672f7.jpg" alt="">
</div>

</body>
</html>

5 浮动

5.1介绍

块内元素：独占一行

h1~h6 p div 列表

行内元素：不独占一行

span a img strong

行内元素可以被包含在块级元素中，反之不行

5.2 display

导航栏：line-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
block,块元素
inline-block;行块元素 是块元素但是可以在一行
inline行
none消失
-->
  <style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }
  </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

这也是实现一种行内元素排列的反射光hi，但我们很多情况下都是用float

5.3 float

左右浮动用float

/*clear:right; 右侧不允许有浮动
clear:left; 左侧不允许有浮动
clear：both 两侧不允许有浮动
clear：none 
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css"type="text/css">
</head>
<body>
<div id="father">
    <div class="layer01">    <img src="image/img.png" alt=""><div>
    <div class="layer02">    <img src="image/img_1.png" alt=""></div>
    <div class="layer03">    <img src="image/img_2.png" alt=""></div>
</div>
</body>
</html>

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px red solid;
}
.layer01{
    border: 1px red solid;
    display: inline-block;
    float: left;
}.layer02{
    border: 1px red solid;
    display: inline-block;
    font-size: 50px;
     float: left;
}.layer03{
    border: 1px red solid;
    display: inline-block;
      float: left;
}

5.4 父级边框塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #app{
      width: 200px;
      height: 200px;
      overflow: scroll;
    }
  </style>
</head>
<body>
<div id="app">
  <img src="image/img.png" alt="">
  <p>关于《原神》 《原神》是由米哈游自研的一款全新开放世界冒险RPG。 你将在游戏中探索一个被称作「提瓦特」的幻想世界。 在这广阔的世界中，你可以踏遍七国，邂逅性格各异、能力独特的同伴，与他们一同对抗强敌，踏上寻回血亲之路；
    也可以不带目的地漫游，沉浸在充满生机的世界里，让好奇心驱使自己发掘各个角落的奥秘……直到你与分离的血亲重聚，在终点见证一切事物的沉淀。 《原神》现已登录PS平台、iOS、Android、PC平台，并支持移动端与PC端数据互通，旅行者可自由选择平台和设备开启冒险。</p>
</div>
</body>
</html>

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px red solid;
}
#father:after{
    content: '';
    display: block;
    clear: both;
}
.layer01{
    border: 1px red solid;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px red solid;
    display: inline-block;
    font-size: 50px;
     float: left;
}
/*clear:right; 右侧不允许有浮动
clear:left; 左侧不允许有浮动
clear：both 两侧不允许有浮动
clear：none
*/
.layer03{
    border: 1px red solid;
    display: inline-block;
      float: left;
}
/*.clear{*/
/*    clear: both;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/

解决方案

  1. 增加父级元素的高度
#father{
    border: 1px red solid;
    height: 800px;
}

  1. 增加一个空的div标签，清除浮动

    /*.clear{*/
/*    clear: both;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/

  2. overflow

    在父级元素中增加一个overflow：hidden

#father{
    border: 1px red solid;
    overflow: hidden;
}

  1. 父类添加一个伪类：after

    #father:after{
    content: '';
    display: block;
    clear: both;
}这段代码是一个 CSS 伪元素选择器规则，用于在 #father 元素的内容之后插入一个额外的块级元素，并且清除浮动。

让我解释一下每一行代码的含义：

#father:after：选择器指定了一个 #father 元素的伪元素，在其内容之后添加样式。
content: ''：设置伪元素的内容为空字符串。在 CSS 中，如果要在伪元素中显示内容，需要设置 content 属性。这里将内容设置为空，所以实际上是一个空白的块级元素。
display: block：设置伪元素为块级元素，确保它占据一行空间。
clear: both：这是清除浮动的 CSS 属性。当父元素包含浮动元素时，如果不清除浮动，可能会导致父元素的高度无法自适应浮动元素的高度。这里设置为 both，表示在伪元素之后不允许出现任何浮动元素。
综合起来，这段代码的作用是在 #father 元素的内容之后插入一个空白的块级元素，并且清除其内部浮动元素可能造成的影响。

小结：

  1. 浮动元素后面增加空div 简单，代码中尽量避免空div
  2. 设置父元素的高度 简单，元素假设有了固定的高度，就会被限制
  3. overflow 简单，下拉的一些场景避免使用
  4. 父类添加一个伪类：after 写法复杂一点，但是没有副作用推荐使用

5.5 对比

display

方向不可控

float

可控，浮动起来的话对脱离标准文档流，所以要解决父级边框塌陷的问题

6 定位

6.1相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 20px;
            line-height: 50px;
        }
        #father{
            width: 500px;
            height: 500px;
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background-color: red;
            border: 1px dashed powderblue;
            position: relative;
            top:-20px;
            left: 30px;
        /*相对定位*/
        }
        #second{
            background-color: yellow;
            border: 1px dashed blueviolet;
        }
        #third{
            background-color: lawngreen;
            border: 1px dashed blue;
        }
    </style>
</head>
<body>
<div id="father"></div>
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</body>
</html>

相对定位：position：relative

相对于原来的位置进行偏移，相对定位，它仍然在标准文档中，原来的位置将被保留。

        top:-20px;
        left: 30px;
        bottom：-10px；
        right：20px；

练习image-20240311134518785

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            line-height: 100px;
            text-align: center;
            display: block;
        }
        div{
            margin: 0px;
            padding: 0px;
            font-size: 20px;
            line-height: 50px;

        }
        #father{
            width: 300px;
            height: 300px;
            border: 1px solid #666;
            padding: 0;
        }
        #one{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: lawngreen;

        }
        #two{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: lawngreen;
            position: relative;
            left: 200px;
            top:-100px;

        }
        #thire{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: lawngreen;

        }
        #four{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: lawngreen;
            position: relative;
            left: 200px;
            top:-100px;

        }
        #five{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: lawngreen;
            position: relative;
            left: 100px;
            top:-300px;

        }
        a:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="one"><a href="" >链接1</a></div>
    <div id="two"><a href="">链接2</a></div>
    <div id="thire"><a href="">链接3</a></div>
    <div id="four"><a href="">链接4</a></div>
    <div id="five"><a href="">链接5</a></div>
</div>
</body>
</html>

设计时难点display：block；使他成为块元素

6.2绝对定位

定位：基于XXX来定位

  1. 没有父级元素定位的前提下，相对于浏览器定位
  2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移
  3. 在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它仍然在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 20px;
            line-height: 50px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;

        }
        #first{
            background-color: red;
            border: 1px dashed powderblue;
        }
        #second{
            background-color: yellow;
            border: 1px dashed blueviolet;
            position: absolute;
            left: 100px;
        }
        #third{
            background-color: lawngreen;
            border: 1px dashed blue;
        }
    </style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

6.3 固定定位fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        /*固定定位*/
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background-color: blue;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4 z-inder

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
    <ul>
        <li>
            <img src="image/img.png" alt="">
            <li class="tipText">玩游戏，玩原神</li>
            <li class="tipBg"></li>
            <li>时间：2099-1-10</li>
            <li>地点：火星</li>
        </li>
    </ul>
</div>
</body>
</html>

#content{
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 25px;
    width: 600px;
    border: 1px black solid;
}
ui,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 300px;
    height: 25px;
    top:569px;
}
.tipText{
    z-index: 99;
}
.tipBg{
    background: red;
    opacity: 0.5;
}

默认是从0层开始

7 动画

8 总结

image-20240311171703818

image-20240311171842504

image-20240311172318634

image-20240311172546648

标签：基本,color,元素,height,1px,background,使用,border,css
From： https://www.cnblogs.com/zzl990110/p/18079995

相关文章

  • git diff 查看文件修改提示“new mode 100644”和“old mode 100755”（使用 vscode 查
    使用vscode查看不出差异通过gitgui或者通过gitbash查看文件内容并没有修改，出现这个问题的原因是修改了文件的权限，文件的filemode发生了变化，比如执行了chmod命令。解决办法：切换到项目的根目录，执行如下命令，忽略filemode的变化即可gitconfig--addcore.filemodefa......
  • 数据库的基本学习
    1数据库1.1什么是数据库数据库（DB）概念：数据库仓库作用：存储数据，管理数据1.2数据库分类关系型数据库：（SQL）Mysql，Oracle，SqlSever，DB2,SQlite通过表和表之间，行和列之间的关系进行数据的存储：学员得信息表非关系型数据库:(NoSQL)notOnlyRedis，MongDB非关系型数据库，对象存储，通......
  • binlog2sql的安装及使用
    binlog2sql的安装及使用binlog2sql的用途：1)数据快速回滚(闪回)2)主从切换后数据不一致的修复3)从binlog生成标准SQL，带来的衍生功能yum-yinstallepel-releaseyum-yinstallgitpython-pipgitclonehttps://github.com/danfengcao/binlog2sql.git&&cdbinlog......
  • C# 的SmartThreadPool线程使用
    1、为什么需要使用线程池(ThreadPool）减少线程间上下文切换。线程执行一定的时间片后，系统会自动把cpu切换给另一个线程使用，这时还需要保存当前的线程上下文状态，并加载新线程的上下文状态。当程序中有大量的线程时，每个线程分得的时间片会越来越少，可能会出现线程未处理多少操作，就需......
  • 【ai学习】 扣子使用，创建自己的AI应用
     扣子介绍扣子是新一代AI大模型智能体开发平台。整合了插件、长短期记忆、工作流、卡片等丰富能力,扣子能帮你低门槛、快速搭建个性化或具备商业价值的智能体,并发布到豆包、飞书等各个平台。说白了： 扣子和GPTs一样可以帮助你创建自己的AI应用。字节扣子国内版：coze.cn......
  • Tmux使用教程
    1安装及配置安装TmuxUbuntu或Debiansudoapt-getinstalltmuxCentOS或FedorasudoyuminstalltmuxMacbrewinstalltmux配置Tmux设置鼠标在Tmux中可用，在~/.tmux.conf文件中写入如下命令。set-gmouseon在配置完Tmux之后重新加载配置。tmuxsource~/.tmux.co......
  • 多线程系列(二十一) -ForkJoin使用详解
    一、摘要从JDK1.7开始，引入了一种新的Fork/Join线程池框架，它可以把一个大任务拆成多个小任务并行执行，最后汇总执行结果。比如当前要计算一个数组的和，最简单的办法就是用一个循环在一个线程中完成，但是当数组特别大的时候，这种执行效率比较差，例如下面的示例代码。longsum=0......
  • VIM使用教程
    安装ubuntu系统sudoapt-getinstallvim-gtkcentos系统yum-yinstallvim*配置sudovim/etc/vim/vimrc首先取消掉红框中的注释（即如果行开头有引号的话去掉），然后下面有一些推荐的配置命令，可以根据需要去掉引号进行配置，这里我再补充一些。setnu//在......
  • Vue3学习日记 Day3 —— Pinia的介绍及使用
    一、Pinia1、介绍 1、介绍 Pinia是Vue最新的状态管理工具，是Vuex的替代品 2、变化 2.1、去掉了modules和mutation，每一个store都是一个独立的模块 2.2、actions即可提供异步，又可提供同步，且可直接修改state数据 2.3、提供更加符合、组合式风格的API ......
  • git 使用教程
    0写在前面首先需要在电脑下载安装git，具体步骤不再赘述。1配置命令查看密钥cd~/.ssh若显示无法找到该文件则当前电脑没有ssh密钥，需要创建新的sshkey。注：在Windows系统下的位置即为“C:\Users[用户名]”文件夹。生成密钥ssh-keygen-trsa-C"[email protected]......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99