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

css的基本使用

时间:2024-03-18 11:47:50浏览次数:20  
标签:基本 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]......