CSS---学习笔记

其他 2021-11-29 18:25:43 阅读次数: 0

HTML + CSS + JS （结构 + 表现 + 交互）

CSS（Cascading Style Sheet）层叠级联样式表：表现（美化网页）

基本入门:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范,<style>可以编写css代码,每一个声明最好使用分号结尾
        语法:
            选择器{
                声明1;
                声明2;
                ...
            }
    -->
    <style>
        h1{
            color:red;
        }
    </style>

</head>
<body>

<h1>我是标题</h1>
</body>
</html>

最好使用如下规范：

 CSS的优势：

  1. 内容和表现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式十分的丰富
  4. 建议使用独立于HTML的CSS文件
  5. 利用SEO，容易被搜索引擎记录

CSS的三种导入方式：行内样式、内部样式、外部样式

优先级：就近原则，那种样式离元素更近谁的优先级更高

 拓展：外部样式两种写法

  • 链接式 
    <link rel="stylesheet" href="CSS/style.css">

  • 导入式：@import是CSS2.1特有的 
    <!--导入式    -->
    <style>
        @import url("CSS/style.css");
    </style>

选择器

作用：选择页面上的某一个或者某一类元素

基本选择器

  1. 标签选择器：选择一类标签 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择页面上所有的这个标签*/
        h1{
            color: #123131;

        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>java</h1>
<p>hzx</p>
</body>
</html>
  2. 类选择器：选择所有class属性一致的标签，跨标签.类名{} 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式 .class的名称
        好处：可以多个标签归类，同一个class可以复用
        */
        .hzx{
            color: green;
        }
        .java{
            color: antiquewhite;
        }
    </style>
</head>
<body>
<h1 class="hzx">标题1</h1>
<h1 class="java">标题2</h1>
<h1>标题3</h1>
</body>
</html>
  3. ID选择器:全局唯一！#id名{}  
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器 #id名称{} : id必须保证全局唯一 不能复用
          选择器优先级:不遵循就近原则,id选择器>class选择器>标签选择器
        */
        #hzx{
            color: aqua;
        }
        .style1{
            color: red;
        }
        h1{
            color: blue;
        }
    </style>
</head>
<body>
<h1 id="hzx">标题1</h1>
<h1 class="style1">标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
选择器优先级:不遵循就近原则,id选择器>class选择器>标签选择器

层次选择器

1、后代选择器：在某个元素后面

/*  后代选择器  */
        body p{
            background: green;
        }

2、子选择器：一代

/*  子选择器  */
        body>p{
            background: green;
        }

3、相邻兄弟选择器：同辈

/*  相邻兄弟选择器 :只有一个,相邻（向下） */
        .active + p{
            background: green;
        }

4、通用选择器

/*  通用选择器:当前选中元素向下的所有兄弟元素  */
        .active~p{
            background: green;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p{*/
        /*    background: green;*/
        /*}*/
        /*!*  后代选择器  *!*/
        /*body p{*/
        /*    background: green;*/
        /*}*/
        /*!*  子选择器  *!*/
        /*body>p{*/
        /*    background: green;*/
        /*}*/
        /*!*  相邻兄弟选择器 :只有一个,相邻（向下） *!*/
        /*.active + p{*/
        /*    background: green;*/
        /*}*/
        /*  通用选择器:当前选中元素向下的所有兄弟元素  */
        .active~p{
            background: green;
        }
    </style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

结构伪类选择器

伪类：条件

/*ul的第一个子元素*/
    ul li:first-child{
      background: wheat;
    }

    /*ul的最后一个子元素*/
    ul li:last-child{
      background: aqua;
    }

/*选中 p1:定位到父元素,选择当前第一个元素
      p:nth-child(2)选择当前P元素的父级元素,选择父级元素的第一个,并且是当前元素才生效
    */
    p:nth-child(2){
      background: green;
    }
    /*选中父元素,下的p元素的第二个类型*/
    p:nth-of-type(2){
      background: yellow;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 避免使用 class id 选择器 -->
  <style>
    /*ul的第一个子元素*/
    ul li:first-child{
      background: wheat;
    }

    /*ul的最后一个子元素*/
    ul li:last-child{
      background: aqua;
    }

    /*选中 p1:定位到父元素,选择当前第一个元素
      p:nth-child(2)选择当前P元素的父级元素,选择父级元素的第一个,并且是当前元素才生效
    */
    p:nth-child(2){
      background: green;
    }
    /*选中父元素,下的p元素的第二个类型*/
    p:nth-of-type(2){
      background: yellow;
    }
  </style>
</head>
<body>

<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>
    li1
  </li>
  <li>
    li2
  </li>
  <li>
    li3
  </li>
</ul>
</body>
</html>

属性选择器（常用较好）

<!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: blue;
        text-align: center;
        color: gainsboro;
        text-decoration: none;
        margin-right: 5px;
        font: bold 20px/50px Arial;
      }
      /*属性选择器格式:a[]{}
      属性名 = 属性值(正则)
      = 绝对等于
      *= 通配 包含这个元素
      ^= 以这个开头
      $= 以这个结尾
      */
      /*存在id属性的元素 */
      a[id]{
        background: yellow;
      }
      a[id=first]{
        background: greenyellow;
      }
      /*class中有links的元素*/
      a[class*="links"]{
        background: yellow;
      }
      /*选中href中以HTTP开头的元素*/
      a[href^=http]{
        background: red;
      }
      /*选中以pdf结尾*/
      a[href$=jpg]{
          background: aqua;
      }

    </style>
</head>
<body>
<p class="demo">
  <a href="https://www.baidu.com" class="links item first" id="first">1</a>
  <a href="" class="links item active" target="_blank" title="test">2</a>
  <a href="images/123.html" class="links item">3</a>
  <a href="images/123.png" class="links item">4</a>
  <a href="images/123.jpg" class="links item">5</a>
  <a href="ac" class="links item">6</a>
  <a href="/a.pdf" class="links item">7</a>
  <a href="/ad.pdf" class="links item">8</a>
  <a href="ad.doc" class="links item">9</a>
  <a href="aa.doc" class="links item" last>10</a>

</p>
</body>
</html>
/*属性选择器格式:a[]{}
      属性名 = 属性值(正则)
      = 绝对等于
      *= 通配 包含这个元素
      ^= 以这个开头
      $= 以这个结尾
      */
有很多  这就是正则表达式的通配符

 美化网页元素

为什么要美化网页：

  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>

字体样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        font: 字体的风格
        font-family: 字体
        font-size: 字体大小
        font-weight: 字体的粗细
        color: 字体颜色

    -->
    <style>
        body{
            font-family: 楷体;
        }
        h1{
            font-size: 50px;
        }

    </style>
</head>

<body>

<h1>人物介绍</h1>
<p>
    hzx
</p>
<p>
    zs
</p>
</body>
</html>

文本样式：

1、颜色：color        rgb        rgba

2、文本对齐的方式：text-align=center

3、首行缩进：text-indent：2em;

4、行高：line-height；单行文字上下居中 line-height = height

5、装饰：text-decoration 

6、文本图片水平对齐：verti-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
       颜色:
            单词
            RGB 0~F
            RGBA A:0~1   增加透明度

       text-align: 排版
       text-indent: 首行缩进 2em(两个字母)
       line-height: 行高 (行高和块的高度一致 就可以实现上下居中)
       text-decoration : 划线
       vertical-align: 水平对齐

    -->
    <style>
        h1{
            color: #a13d30;
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            background: blue;
            height: 300px;
            line-height: 300px;

        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*
        水平对齐 需要参照物 a,b
        */
        img,span{
            vertical-align:  middle;

        }


    </style>
</head>
<body>
<p class="l1">123</p>
<p class="l2">123</p>
<p class="l3">123</p>
<h1>人物介绍</h1>
<p class="p1">
    hzx
</p>
<p class="p2">
    zs
</p>
<p>
    <img src="images/img.png" alt="">
    <span>asdsadas</span>
</p>
</body>
</html>

超链接伪类：a,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: orange;
            font-size: 50px;
        }
        /*鼠标按住未释放*/
        a:active{
            color: greenyellow;
        }
        a:visited{

        }
        /*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径 */
        #p1{
            text-shadow: #3cc7f5 10px 10px 10px;
        }

    </style>
</head>
<body>
<a href="">
    <img src="images/img.png" alt="">
</a>
<p>
    <a href="#">hzx</a>
</p>
<p>
    <a href="">zs</a>
</p>
<p id="p1">
    666
</p>
</body>
</html>

阴影：

/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径 */
        #p1{
            text-shadow: #3cc7f5 10px 10px 10px;
        }

列表：

//html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp; <a href="#">厨具</a></li><li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href=".#">钟表</a>&nbsp;&nbsp;<a href="">珠宝</a></li><li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href=#"">充值</a>&nbsp;&nbsp; <a href="#">票务</a></li>
    </ul>
</div>


</body>
</html>



//css
#nav{
    width: 300px;
    background: #a0a0a0;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*ul li
list-style: none;去掉圆点
            circle;空心圆
            decimal;数字
            square;正方形

*/
/*ul{*/
/*    background: #a0a0a0;*/
/*}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;

}

a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}
a:hover{
    color: orange;
    text-decoration: underline;

}

背景：

背景颜色

背景图片：

<!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("images/img.png");
        }
        .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>

渐变：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 径向渐变,圆形渐变  -->
    <style>
        body{
            background-image: linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);
        }
    </style>
</head>
<body>
12321a
</body>
</html>

 盒子模型

什么是盒子模型：

margin：外边距

padding：内边距 

border：边框

边框：

1、边框的粗细

2、边框的样式

3、边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body总有一个默认的外边距 常见操作*/
        body{
            margin: 0;
            padding: 0;

        }
        /*
            border: 粗细 样式 颜色
        */
        #app{
            width: 300px;
            border: 1px solid red;


        }
        h2{
            font-size: 16px;
            background-color: #3cc7f5;
            line-height: 30px;
            color: white;
        }
        form{
            background: forestgreen;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px dashed black;
        }
        div:nth-of-type(1) input{
            border: 3px dashed darkblue;
        }
    </style>
</head>
<body>
<div id="app">
    <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>

内外边距：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*外边距妙用:居中元素
        margin: 0 auto;
        */
        /*
        顺时针旋转
        margin:0   上下左右都是0
        margin:0 1px   上下是0左右是1px
        margin:0 1px 2px 3px 上是0 右是1px 下是2px 左是3px
        */
        #app{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;

        }
        h2{
            font-size: 16px;
            background-color: #3cc7f5;
            line-height: 30px;
            color: white;
            margin: 0;
        }
        form{
            background: forestgreen;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 2px;
        }
    </style>
</head>
<body>
<div id="app">
    <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>

盒子计算模型：margin+border+padding+内容宽度

圆角边框：

4个角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        左上 右上 右下 左下 顺时针方向
        */
        /*
        圆圈: 圆角 = 半径
        */
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px;
        }
    </style>
</head>
<body>
<div>

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

盒子阴影：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*margin: 0 auto;居中
        要求: 块元素，块元素有固定的高度
        */
        div{
            width: 100px;
            height: 100px;

        }
        img{
            width: 100px;
            height: 100px;
            border-radius: 50px;
            box-shadow:10px 10px 100px yellow;
        }
    </style>
</head>
<body>
<div style="margin: 0 auto">
    <img src="images/img.png" alt="">
</div>

</body>
</html>

浮动

标准文档流

块级元素：独占一行

行内元素：不独占一行

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

display：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*display
                block 块元素
                inline 行内元素
                inline-block 即是行内元素也是块元素 是块元素，但可以内联在一行
                none 消失

        */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div元素块</div>
<span>span行内元素</span>
</body>
</html>

 这也是实现行内元素排序的方式,但是我们很多情况都是用float

浮动：

float:left   左浮动
      right  右浮动
clear:both   清除浮动

父级边框塌陷问题：

clear:

clear:left    左侧不允许浮动
      right    右侧不允许浮动
      both     两侧不允许浮动

解决方案：

  1. 增加父级元素的高度 
    #father{
    border：1px solid #000;
    height: 800px;
}
  2. 增加一个空的div标签，清除浮动 
    <div class="clear"></div>

.clear{
    clear:both;
    margin:0;
    padding:0;
}
  3. overflow 
    在父级元素中增加一个overflow:hidden;
  4. 父类添加一个伪类：after 
    #content:after{
            fater:'';
            display: block;
            clear: both;
        }

 小结：

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

对比

  • display                                                                                                                                        方向不可以控制
  • float                                                                                                                                             浮动起来的话脱离标准文档流，所以要解决父级边框塌陷的问题

定位：

相对定位：position：relative；

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相对定位
        相对于自己原来的位置进行偏移
    -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #f85f2c;
            position: relative;/*相对定位:上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: #44b93a;
            border: 1px dashed #13420f;

        }
        #third{
            background-color: #3cc7f5;
            border: 1px dashed #1e0f4b;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>

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

绝对定位：

定位：基于XXX定位，上下左右

1、父级元素没有定位的情况下，相对于浏览器定位

2、假设父级元素存在定位，相对于父级元素进行偏移

3、在父级元素范围内移动

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            position: relative;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #f85f2c;

        }
        #second{
            background-color: #44b93a;
            border: 1px dashed #13420f;
            position: absolute;
            right: 30px;
            top: -10px;
        }
        #third{
            background-color: #3cc7f5;
            border: 1px dashed #1e0f4b;

        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>

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

固定定位：

<!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: red;
           position: absolute;
           right: 0;
           bottom: 0;
       }
       div:nth-of-type(2){/*固定定位fixed*/
           width: 50px;
           height: 50px;
           background: yellow;
           position: fixed;
           right: 0;
           bottom: 0;
       }

    </style>
</head>
<body>

    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>



</body>
</html>

z-index：图层 默认是0 越大越先显示


#content{
    width: 380px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 90px;

}
.tipText{
    color: white;
    z-index: 0;
}
.tipBg{
    background: #000;
    /*opacity: 0.5; /*背景透明度*/
    filter: alpha(opacity=50);/*IE8更早才支持 背景透明度*/
}


-----------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="images/img.png" alt=""></li>
        <li class="tipText">学习王者,看大仙</li>
        <li class="tipBg"></li>
        <li>时间:2099-01-01</li>
        <li>地点:虎牙618</li>
    </ul>
</div>
</body>
</html>

背景透明度：

 opacity: 0.5; /*背景透明度*/
 filter: alpha(opacity=50);/*IE8更早才支持 背景透明度*/

学Java关注狂神说Java

猜你喜欢

转载自blog.csdn.net/qq_45304571/article/details/120820904
今日推荐
技术解析 GPT-4o：即时语音交互的突破与 GenAI 发展策略
开源大模型与闭源大模型
微信小程序授权登录获取用户的openid
亿级流量系统架构设计与实战
人工智能时代的程序设计教学与课程设计
纽交所技术问题致伯克希尔 (BRK.A) 显示跌近 100%
探索 api.maynor1024.live：一站式 AI 服务平台
AI一键去衣技术：窥见深度学习在图像处理领域的革命(最后有彩蛋)
艾体宝案例 | 使用Redis和Spring Ai构建rag应用程序
Apple M1 vs 高通8Gen2 vs Apple A12Z各方面比较
【升职加薪必备架构图】Springboot学习路线汇总_springboot四层架构流程图
与Apollo共创生态：Apollo7周年大会自动驾驶生态利剑出鞘
周排行
事务隔离级及脏读、幻读和不可重复读
rtos：zephyr同步信号量
把对象转换为JSON格式的数据
iOS Dev (56) iTunes Store 销售日报更新时间
Failed to start mongod.service: Unit not found;mongodb in unbuntu
Upgrading PHP on CentOS 6.5 (Final)
（四）王道机试指南___排版问题
TensorFlow之手写体识别
xcode xib报错 Safe Area Layout Guide Before IOS 9.0
【LeetCode】76. Minimum Window Substring（C++）
每日归档
更多
2024-06-05(0)
2024-06-04(10)
2024-06-03(52)
2024-06-02(4)
2024-06-01(60)
2024-05-31(47)
2024-05-30(4)
2024-05-29(65)
2024-05-28(2)
2024-05-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022