0
点赞
收藏
分享

微信扫一扫

【狂神说Java】CSS笔记

精进的医生 2022-03-12 阅读 92
csshtml前端

1、什么是CSS

1.1、什么是CSS

  • Cascading Style Sheets ：层叠级联样式表

  • CSS：表现(美化网页：字体，颜色，边距，高度，宽度，背景图片，网页)

1.2、发展史

CSS1.0

CSS2.0 DIV(块) + CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画… 浏览器兼容性…

1.3、快速入门

  • 基本入门

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS入门</title>
    <!--规范  <style> 可以编写css代码，每一个声明最好用分号结尾
        语法：
        选择器{
               声明1;
               声明2;
               声明3;
              }
      -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

CSS的优势：

  • 内容和表现分离
  • 网页结构表现统一，可以实现复用
  • 样式丰富
  • 建议使用独立于html的css文件
  • 利用SEO，容易被搜索引擎收录

1.4、CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title> 
    
    <!--  内部样式  -->
    <style>
        h1{
            color: green;
        }
    </style> 
    
    <!--  外部样式  -->
    <link rel="stylesheet" href="css/style.css">   
</head>
    
<body>  
<!--优先级：就近原则-->
<!--行内样式： 在标签元素中，编写一个style属性，编写样式即可-->  
<h1 style="color: red;">我是标题</h1>  
</body>
</html>

拓展：外部样式两种写法

  • 链接式

    HTML

    <!--外部样式-->
<link rel="stylesheet" href="css/style.css">

  • 导入式

    @import是CSS2.1特有的

    <!--导入式-->
<style>
  @import url("css/style.css");
</style>

2、选择器

2.1、基本选择器

  • 标签选择器：会选择到页面上所有的这个标签的元素

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器会选择到页面上所有的这个标签的元素*/
        h1  {
           color: #a12d33;
            background: #3fdu52;
            border-radius: 10px;
        }
        p{
            font-size: 80px;
         }
    </style>
</head>
<body>
<h1>JavaScript</h1>
<h1>JavaScript</h1>
<p>Java</p>
</body>
</html>

  • class选择器：可以多个标签归类，是同一个class,可以复用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 类选择器的格式：.class的名称{}
            好处：可以多个标签归类，是同一个class,可以复用
        */
        .xl{
            color: #3628ff;
        }
        .xiang{
            color: #a542ff;
        }
    </style>

</head>
<body>
<h1 class="xl">标题一</h1>
<h1 class="xiang">标题二</h1>
<h1 class="xl">标题三</h1>
<p class="xl">p标签</p>
</body>
</html>

  • id选择器：id必须保证全局唯一

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*  id选择器 ：id必须保证全局唯一
          	语法： # id名称{}
            优先级：
            不遵循就近原则 ，是固定的
            id选择器>class选择器>标签选择器
        */
        #xiang{
            color: #ff008a;
        }
        .xl{
            color: #02ff00;
        }
        h1{
            color: #2dywh6;
        }
    </style>

</head>
<body>
<h1 class="xl" id="xiang">标题1</h1>
<h1 class="xl">标题2</h1>
<h1	class="xl">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

2.2、层次选择器

  • 后代选择器：在某个元素的后面

    body p{
    background:#3cbda5;
}

  • 子选择器：一代

    body>p{
    background:#3cbda5;
}

  • 相邻兄弟选择器：当前选中元素的下一个同辈

    .active + p{
    background:#3cbda5;
}

  • 通用选择器：当前选中元素的向下的所有同辈

    .active~p{
    background:#3cbda5;
}

2.3、结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*选择ul中的第一个子元素*/
        ul li:first-child{
            background: red;
        }
        /*选择ul中的最后一个子元素*/
        ul li:last-child{
            background: blue;
        }

        /* 选中p1 ：定位到父元素，选择当前的第一个元素
            选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效，顺序
        */
        p:nth-child(1){
            background: yellow;
        }

        /*选中父类元素下的p元素的第二个，类型*/
        p:nth-of-type(2){
            background: green;
        }
		
		/*鼠标移上去变色*/
        a:hover{
            background:#000b3e;
        }
    </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>
    <a href="">12345</a>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oHkTYmiQ-1647009846082)(…/AppData/Roaming/Typora/typora-user-images/1646298511578.png)]

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: 20px;
            background: blue;
            text-align: center;  /*对齐方式*/
            color : #dfdedb;
            text-decoration: none; /*去下划线*/
            margin-right: 5px;	/*边距*/
            font:bold 20px/50px Arial;	 /*粗体 字体大小/行高 字体格式*/
        }

        /* 属性名 . 属性名  =  属性值（正则）
        =  绝对等于
        *=  包含这个元素
        ^=  以这个开头
        $=  以这个结尾
        */
        /*存在id属性的元素 a[] {}*/
        /*a[id]{
            background: yellow;
        }*/
        
        /* id=first的元素*/
        /*a[id=first]{
            background: yellow;
        }*/

        /*class中有links的元素 */
        /*a[class*=links]{
            background: yellow;
        }*/

        /*选中href中以http开头的元素*/
        /*a[href^=http]{
            background: yellow;
        }*/

        /*选中herf中以pdf结尾的元素*/
        a[href$=pdf]{
            background: yellow;
        }
    </style>
</head>
<body>
<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://blog.kuangshen.com" 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="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last" last>10</a>
</p>
</body>
</html>

=  绝对等于
*=  包含这个元素
^=  以这个开头
$=  以这个结尾

3、美化网页元素

3.1、为什么要美化网页

  • 有效的传递页面信息
  • 美化网页，页面漂亮，才能吸引用户
  • 凸显页面的主题
  • 提高用户的体验

​ 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>

    <style>
        /*
        font-family :字体
         font-size ：字体大小
         font-weight ：字体粗细
         color:  字体颜色
        */
        body {
            font-family: "Arial Black" , 楷体;
            color:#a13d30;
        }

        h1 {
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>

</head>
<body>
<h1>故事介绍</h1>

<p class="p1">
    这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>

<p>
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>


<p>Baby I'm Sorry - 마이네임 (MYNAME)
내가 맘에 들지 않아
我不满意
내곁을 떠나간너
从我身边离开的你
해준것도 없는데
也没什么能给你  
왜 내걱정을 하는지
为什么要担心我
하지만 니 맘다 알아
但是你的心意我全都知道
그래서 그게 싫어
所以好讨厌
걱정은 버리고 떠나가
不要担心了走吧
자꾸만 짜증나게
</p>

</body>
</html>

3.3、文本样式

  • 颜色 RGB RGBA
  • 文本对齐方式 text-align = center
  • 首行缩进 text-indent:2em
  • 行高 line-height:单行文字上下居中 line-height = height
  • 装饰 text-decoration
  • 文本图片水平对齐 vertical-align:middle
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*颜色:
            单词：RGB  0~F
            RGBA：A 0~1
            text-align: center;  排版居中
            text-indent: 2em; 段落首行缩进
            height: 300px;  
            line-height: 300px;
            行高 和块 的高度一致时，就可以上下居中
            */
            h1{
                /*color: #0000ff;*/
                color :rgba(0,255,255,0.9);
                text-align: center;
            }
            .p1{
                text-indent: 2em;
            }
            .p3 {
                background: #2700ff;
                height: 300px;
                line-height: 300px;
            }

            /*下划线*/
            .l1{
                text-decoration: underline;
            }

            /*中划线*/
            .l2{
                text-decoration: line-through;
            }

            /*上划线*/
            .l3{
                text-decoration: overline;
            }

            /*超链接去下划线*/
            a{
                text-decoration: none;
            }

            /*水平对齐：参照物  a  b*/
            img,span{
                vertical-align: middle;
            }
        </style>

    </head>
    <body>
        <a href="">123</a>

        <p class="l1">123456</p>
        <p class="l2">123456</p>
        <p class="l3">123456</p>

        <h1>故事介绍</h1>

        <p class="p1">
            这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
        </p>

        <p>
            在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
        </p>

        <p class="p3">Baby I'm Sorry - 마이네임 (MYNAME)
            내가 맘에 들지 않아
            我不满意
            내곁을 떠나간너
            从我身边离开的你
            해준것도 없는데
            也没什么能给你  
            왜 내걱정을 하는지
            为什么要担心我
            하지만 니 맘다 알아
            但是你的心意我全都知道
            그래서 그게 싫어
            所以好讨厌
            걱정은 버리고 떠나가
            不要担心了走吧
            자꾸만 짜증나게
        </p>
        <p>
            <img src="images/a.png" alt="">
            <span> asjhl jldlasdhlkjklj</span>
        </p>

    </body>
</html>

3.4、阴影

/*text-shadow:阴影颜色  水平偏移(左正右负) 垂直偏移(下正上负)  阴影半径 */
#price{
    text-shadow: #3cc7f5 10px -10px 2px;
}

3.5、超链接伪类

正常情况下：a:hover

/*默认的颜色*/
a{
    text-decoration:none;
    color:#000;
}
/*鼠标悬浮的状态(只需要记住：hover)*/
a:hover{
    color:orange;
    font-size:50px;
}

3.6、列表

list-style：

  • none 去掉圆点
  • circle 空心圆
  • decimal 有序数字
  • square 正方形
ul li{
    height:30px;
    list-style:none;
    text-indent:1em;
}

3.7、背景

  • 背景颜色
  • 背景图片
<style>
div{
    width: 1000px;
    height: 700px;
    border: 1px solid red;    /* 边框的粗细 实线  颜色*/
    background-image: url("images/1.png");
    /* 默认是全部平铺的 repeat*/
}

.div1{
    background-repeat: repeat-x;
}

.div2{
    background-repeat: repeat-y;
}

.div3{
    background-repeat: no-repeat;
}
</style>

3.8、渐变

  • 网站：Grabient

4、盒子模型

4.1、什么是盒子模型

  • margin：外边距
  • padding：内边距
  • border：边框

4.2、边框

<style>
    /* body总有一个默认的外边距margin:0, 常用操作
		h1,ul,a,body{
        margin: 0;
        padding: 0;
        text-display: none;
    	}
		border：粗细，样式，颜色*/
    #box{
        width: 300px;
        border: 1px solid red;
    }

    h2{
        font-size: 16px;
        background: #3cbda6;
        line-height: 30px;
		color:red;
    }
    form{
        background: #3cbda6;
    }

    div:nth-of-type(1) input{
        border: 2px solid black;
    }
    div:nth-of-type(2) input{
        border: 2px dashed green;
    }
    div:nth-of-type(3) input{
        border: 3px dashed blue;
    }	
</style>

4.3、内外边距

  • margin:0 auto 元素居中
  • margin(padding):0 0 0 0 顺时针(上右下左)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #box{
            width: 300px;
            border: 1px solid red;    
            margin: 0 auto;
        }

        h2{
            font-size: 16px;
            background: red;
            line-height: 30px;
            text-align: center;            
            margin:0 1px 2px 3px;
        }
        form{
            background: blue;
        }
        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>

盒子的计算方式：元素大小=内容宽度+margin+border+padding

4.4、圆角边框

  • border-radios:0 0 0 0 顺时针(左上 右上 右下 左下)
<style>
    div{
        width: 50px;
        height: 50px;
        background: red;
        margin: 100px;
        border:10px solid red;
        border-radius: 50px 0px 0px 0px;
    }
</style>

4.5、阴影

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            div{
                width: 1000px;
                margin: 0 auto;
            }
            img{
                border-radius: 50px;
                box-shadow: 10px 10px 100px yellow;
            }
        </style>

    </head>
    <body>
        <div style="width:500px;text-align:center">
            <img src="images/1.png" alt="">
        </div>

    </body>
</html>

5、浮动

5.1、标椎文档流

  • 块级元素：独占一行

    h1-h6 p div 列表...

  • 行内元素：不独占一行

    span a img strong...

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

5.2、display

  • 这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float

    <style>
    /*display:
    block  块元素
    inline  行内元素
    inline-block  是块元素，但是可以内联在一行
    none 
    */
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: none;
    }

    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display:inline-block;
    }
</style>

5.3、float

  • float：左右浮动

  • 选择器{float:属性值;}

    属性值描述
    left元素向左浮动
    right元素向右浮动
    none元素不浮动(默认值)
    div{
    margin: 10px;
    padding: 5px;
}

#father{
    border: 1px solid red;
}
.layer01{
    border: 1px solid black;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px solid #41e5e5;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px solid yellow;
    display: inline-block;
    float: left;
}
.layer04{
    border: 1px solid green;
    font-size:12px;
    display: inline-block;
    float:left;
    clear: both;
}

5.4、父级边框塌陷的问题

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

解决方案：

1、增加父级元素的高度

.father{
    border: 1px red solid;
    height：  800px;
}

2、增加一个空的div标签，清除浮动

<div class="clear"></div>

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

3、overflow

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

4、父类添加一个伪类：after

#father:after{
	content:'';
	dispaly:block;
	clear:both;
}

小结：

1.浮动元素后面增加空div

​ 简单，代码中尽量避免空div

2.设置父元素的高度

​ 简单，元素假设有了固定的高度，就会被限制

3.overflow

​ 简单，下拉的一些场景避免使用

4.父类添加一个伪类：after(推荐)

​ 写法稍微复杂一些，但是没有副作用，推荐使用

5.5、对比

  • display

    方向不可以控制

  • float

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

6、定位

6.1、相对定位

相对定位：position：relative；

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                padding:20px;
            }
            div{
                padding: 10px;
                margin: 5px;
                font-size: 12px;
                line-height: 25px;
            }
            #father{
                border: 1px solid #666;
                padding:0;
            }
            #first{
                background: red;
                border: 1px dashed #25aa44;
                position: relative;/*相对定位*/
                top: -10px;
                left: 5px;

            }
            #second{
                background: blue;
                border: 1px dashed #3561d9;
            }
            #third{
                background: yellow;
                border: 1px dashed #1c5a68;
            }
        </style>

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

6.2、绝对定位

绝对定位：position: absolute; 基于xxx进行定位，上下左右

1.没有父级元素的前提下，会相对于浏览器定位

2.假设父级元素存在定位，我们通常会***相对于父级元素进行偏移***

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

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

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <style>

           div{
               padding: 10px;
               margin: 5px;
               line-height: 25px;
               font-size: 12px;
           }
           #father{
               border: 1px solid #666;
               position: relative;
           }
           #first{
               background: #35d8a2;
               border: 1px dashed #36ae44; 
           }
           #second{
               background: #6372d3;
               border: 1px dashed #25ae19;
               position: absolute;
               left: 100px;
           }
           #third{
               background: #a261ad;
               border: 1px dashed #c26678;
           }
       </style>

   </head>
   <body>

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

   </body>
</html>

6.3、固定定位

固定定位：position: 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: 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>div1</div>
        <div>div2</div>
    </body>
</html>

6.4、z-index

  • 图层：z-index默认是0，最高无限
<!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/bg.jpg" alt=""></li>
                <li class="tipText">一枕黄粱梦</li>
                <li class="tipBg"></li>
                <li>时间：2022-03-11</li>
                <li>地点：湖北</li>
            </ul>
        </div>

    </body>
</html>
  • 背景透明度：opacity: 0.5;
#content{
width: 380px;
padding: 0;
margin: 0;
overflow: hidden;
line-height: 25px;
font-size: 12px;
border: 1px solid black;
}
ul,li{
list-style: none;
padding: 0;
margin: 0;
}
/*父类元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
width: 380px;
height: 25px;
position: absolute;
top: 216px;
}
#tipText{
color: white;
/*z-index: 0;*/
}
#tipBg{
background: black;
opacity: 0.5;/*背景透明度*/
filter:Alpha(opacity=50);/*IE8及其更早版本*/
}

7、动画

  • https://www.html5tricks.com
  • https://cybermap.kaspersky.com/cn

8、总结

请添加图片描述

举报

相关推荐

狂神说Java Mybatis笔记

sqljavaxml编程语言

【狂神说Java】JUC笔记

java后端并发编程juc面试

狂神说 Java

构造方法封装面向对象Java编程语言yyds干货盘点

狂神说Mybatis笔记

java

狂神说 Nginx 笔记

nginx服务器运维

狂神说 SpringBoot笔记

java后端

狂神说 Redis 笔记

redisnosql缓存

听《狂神说java》的课堂笔记

java超链接分割线代码人生

【狂神说Java】SpringMVC详细笔记(全)

javaservletspring

线程---【狂神说Java】

java
0 条评论