狂神css视频笔记1-15课

最新推荐文章于 2022-05-24 15:42:59 发布
最新推荐文章于 2022-05-24 15:42:59 发布
阅读量245 收藏 1
点赞数
分类专栏： # 96_css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41748874/article/details/119699865
版权

文章目录

第一课

image-20210812094213620

image-20210812094342223

盒子模型、浮动跟定位。

image-20210812094642441

image-20210812094706126

  1. 现在这些动画效果一般是用一些第三方组件去做的，用原生代码的话，炫技是可以的，或者为了提高自己的底层功底。

  2. 前端和后台最大的差别就是CSS，即便你学完了CSS的全部知识点，依旧写不出来漂亮的网页，你会发现自己差一个美工，差大量的练习。他们每天都不停模仿网页。

第二课

1.1 什么是CSS

Cascading Style Sheet 层叠样式表。

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>Title</title>
    <!--规范，<style>可以编写css代码，每一个声明，最好以分号结尾。
        语法：
            选择器 {
                声明1;
                声明2;
                声明3;
            }
    -->
    <style>
        h1{
            color: #98e165;
        }
    </style>
</head>
<body>

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

image-20210812103844544

CSS的优势：

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

第四课

1.4、CSS的3种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: orange;
        }
    </style>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式-->
<h1 style="color: red"></h1>
</body>
</html>

拓展：CSS外部样式两种写法：

  • 链接式：link属于xhtml

    • <link rel="stylesheet" href="./css/style.css">

  • 导入式：@import属于CSS 2.1特有的

    • @import "css/style.css";        
@import url("css/style.css");

    • 这种写法的缺点，会导致网页打开，先展示结构，然后渲染。

第五课

2、选择器

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

整个HTML属于DOM树。

2.1、基本选择器

  1. 标签选择器：tag-name
  2. class选择器：.classname
  3. id选择器：#id-name，id必须保证全局唯一。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id必须保障，全局唯一 */
        #mahuidan {
            color: #823be1;
        }
        .pretty {
            color: orange;
        }
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1 id="mahuidan">马慧丹</h1>
    <h1 class="pretty">马慧丹</h1>
    <h1 class="pretty">马慧丹</h1>
    <h1>马慧丹</h1>
</body>
</html>

选择器的优先级：id选择器>class选择器>标签选择器

  • 标签选择器：选择一类标签

  • 类选择器：选择所有class属性一致的标签，跨标签

  • id选择器：全局唯一

第六课

2.2、层次选择器

这些选择器，只要会查就可以了，想要记住，也挺费劲的。

  • 后代选择器
  • 子选择器
  • 相邻兄弟选择器
  • 通用选择器

1、后代选择器：在某个元素的后面，祖爷爷，爷爷，爸爸，你。

        body p {
            background-color: #98e165;
        }

2、子选择器：一代，就是儿子

        body>p {
            background-color: olive;
        }

3、相邻兄弟选择器：哥哥姐姐，同辈的。对上不对下。向下的一个级别的选择器，只选择一个。

        .active + p{
            background-color: red;
        }

4、通用兄弟选择器：对上不对下，兄弟级别。当前选中元素，向下的所有的兄弟元素。

.active~p{
            background-color: aqua;
        }

image-20210813192236770

上面几种选择器，都是层次选择器。最牛逼的就是id选择器。

这几个选择器的场景，就是，id有时候要写很多个，麻烦。

这几个选择器就是相比id选择器，灵活一点，为了省事。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p {
            background-color: #98e165;
        }*/
        /* 后代选择器 */
        /*body p {
            background-color: #98e165;
        }*/
        /* 子选择器 */
        /*body>p {
            background-color: olive;
        }*/
        /*兄弟选择器*/
        /*.active + p{*/
        /*    background-color: red;*/
        /*}*/
        /* 通用选择器 */
        .active~p{
            background-color: aqua;
        }
    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>

第七课

2.3、结构伪类选择器

        /*这一节禁止使用id和class选择器暴力*/

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

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

        /*
          选中p1：定位到父元素，选择当前的第一个元素
          选择当前元素的父级元素，选中父级元素之后的第一个子元素，并且第一个子元素是当前元素才生效。
        */
        p:nth-child(2){
            background-color: #4285f4;
        }
        /*
            nth表示选中父元素，父元素下面第n个p元素
        */
        p:nth-of-type(1){
            background-color: red;
        }
		a:hover{
            background-color: orange;
        }

p:nth-chid是区分类型的，p:nth-of-type是不区分类型的。这两个在生活当中用的很少。

带冒号的，都是伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*这一节禁止使用id和class选择器暴力*/

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

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

        /*
          选中p1：定位到父元素，选择当前的第一个元素
          选择当前元素的父级元素，选中父级元素之后的第一个子元素，并且第一个子元素是当前元素才生效。
        */
        h1:nth-child(1){
            background-color: #4285f4;
        }
        /*
            nth表示选中父元素，父元素下面第n个p元素
        */
        p:nth-of-type(1){
            background-color: #34a853;
        }
        a:hover{
            background-color: orange;
        }
    </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="www.baidu.com">百度一下</a>
</body>
</html>

image-20210813204540374

第八课

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: #4285f4;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }

        /*
            存在id属性的元素
            a[属性名 or 属性名=属性值（这里可以用正则）]{}
        */
        /*a[id]{
            background: #fbbc05;
        }*/
        /*a[id=first]{
            background: #98e165;
        }*/
        /***********************************/
        /*class当中有links的元素*/
        /*
          = 等于号，这个是精确匹配
          *= 包含这个元素
          ^= 以XXX开头
          $= 以XXX结尾
        */
        /*a[class*="links"]{
            background: #fb6cb2;
        }*/
        /**********************************/
        /*
            选择href当中以http开头的元素
        */
        /*a[href^=http]{*/
        /*    background: #fbd8d5;*/
        /*}*/
        a[href$=pdf]{
            background: #76fbb9;
        }
        a[href$=jpg]{
            background: #74d1fb;
        }
        a[href$=doc]{
            background: #d781fb;
        }

    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://blog.kuangstudy.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">10</a>
</p>
</body>
</html>

image-20210813211529013

= 是绝对等于
*= 包含
^= 以XXX开头
$= 以XXX结尾

选择器在CSS、JS、JQuery、Vue都要用。选择器是前端当中最重要的东西。

最重要就是把基本选择器和属性选择器搞定。

第九课

3、美化网页元素

3.1、为什么要美化网页

  1. css的意义在于有效地传递页面信息
  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>

image-20210813212410042

3.2、字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        font-family:字体
        font-size:字体大小
        font-weight:字体的粗细
    -->
    <style>
        body {
            font-family: "Arial Black","YaHei Consolas Hybrid";
            color: #4e4831;
        }
        h1 {
            font-size: 50px;
        }
        .p1 {
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p>
    Since there’s no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love’s latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p>
</body>
</html>

一般都是写到一起的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        font-family:字体
        font-size:字体大小
        font-weight:字体的粗细
    -->
    <style>
        p{
            font: oblique bolder 12px "楷体";
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
</body>
</html>

第十课

3.3、文本样式

1、颜色：color rgb rgba

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

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

4、行高：line-height

5、装饰：text-decoration

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        颜色：单词
        颜色：rgb
        red、green、blue
        颜色：rgba，a是透明度，是0到1。
        text-align：排版
        text-indent: 段落首行缩进
        line-height: 行高和块的高度一致，就可以上下居中
    -->
    <style>
        h1 {
            color: rgba(234,67,53,0.7);
            text-align: center;
        }
        .p1 {
            text-indent: 2em; /*首行缩进*/
        }
        .p3 {
            background: #81cafb;
            height: 300px;
            line-height: 20px;
        }
        /* 上划线、中划线、下划线*/
        .l1 {
            text-decoration: underline;
        }
        .l2 {
            text-decoration: line-through;
        }
        .l3 {
            text-decoration: overline;
        }
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>
<h1>故事介绍</h1>
<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p class="p3">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>
    <img src="./images/xuqing.png" alt="">
    <span>这个娘们就是许晴。</span>
</p>
</body>
</html>

第十一课

3.4、文本阴影和超链接伪类

image-20210814111409479

3.5、超链接伪类

正常情况下，a和a:hover就够用了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的状态*/
        /*只需要记住这个东西*/
        a:hover{
            color: #fbbc05;
            font-size: 50px;
        }
        /*鼠标按住没有释放的状态*/
        a:active{
            color: #98e165;
        }
        /*未访问的链接*/
        a:link{
            color: #81cafb;
        }
        /*已访问的链接*/
        a:visited{
            color: #ea4335;
        }
        /*水平、垂直、阴影半径*/
        #price{
            text-shadow: 5px 5px 5px #98b4fb;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="./images/java.jpg" 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>
    <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></li>
    </ul>
</div>
</body>
</html>

body,html{
    background: 0 36px repeat-y url("../images/background.png");
    background-size: cover;
}

#nav{
    width: 300px;
    background-color: #fbd8d5;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background-color: #fb647a;
}
/*ul li*/
/*
list-style:
- none 去掉圆点，去掉有序列表的数字
- circle 空心圆
- decimal 数字
- square 正方形
*/
ul{
    background-color: #fbd8d5;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a {
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}
a:hover{
    color: #fbbc05;
    text-decoration: underline;
}

第十三课

3.7、背景图像应用及渐变

  • 背景颜色
  • 背景图片
<style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            /*默认是全部平铺的*/
            background-image: url("./images/porn.jpg");
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>

image-20210814120945165

3.8、渐变

css的渐变，有一个很好的博客，是这个：https://blog.csdn.net/HU_YEWEN/article/details/90604792

渐变，给大家找了一个网站：https://www.grabient.com。

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

渐变分为：径向渐变，圆形渐变。

image-20210814122015200

第14课

4、盒子模型

4.1、什么是盒子

在QQ群里面，发了一个京东登录页面：

image-20210814122157312

这个页面应该是狂神，直接保存的京东的页面，看下面的图：

image-20210814122903462

image-20210814122340879

这个盒子模型，学习的时候，可以，直接在浏览器当中，修改，来体验效果。

image-20210814122612983

margin：外边距

padding：内边距

border：边框

4.2、边框

image-20210814122714980

现在养成一个习惯，所有东西，都套上一个div

下面开始演示，盒子模型：

image-20210814123111346

写完了之后，是长这个样子，太丑了：

image-20210814123135142

image-20210814123401194

左边这个有个边，要把这个边，干掉。

然后就写了下面的代码：

image-20210814123510679

image-20210814123535114

首先会发现，上面的图，不是顶着左上角的。

image-20210814123613056

默认存在一个外边距。

我们把margin设置为0之后的效果，是下面的效果：

image-20210814123747851

body总有一个默认的外边距。一般要设置margin为0。

一般在写css的时候，会有一系列的初始化的动作：

image-20210814123909368

这就是编程当中，常见的事情，这些都在《码出高效》这些书里面，都有的。

测试一下边框的其他属性：

给form设置背景色：

image-20210814124019682

定位到输入框，加一点边框：

image-20210814124211084

我们上面，是使用了结构伪类选择器

image-20210814124713029

image-20210814125254868

h2默认，也是有外边距的。

常规情况下，我们进来，也都是要初始化一样。

包括像是ul-li一般我们都会把text-decoration放置为none。

我们为什么写不好，我们的审美不行。

image-20210814125653670

边框的内容，就是这些。

第15课

内外边距及div居中

外边距是margin，都是上下左右：

image-20210814125902285

padding内边距的样式，也都是上下左右的：

image-20210814125940863

第二点

外边距的妙用，就是居中。

比方，现在是这个鬼样子：

image-20210814130139774

我们可以设置外边距，上下为0，左右自动对齐。

image-20210814130315167

image-20210814130242051

第三点

外边距的上下左右，去浏览器里面调试一下，就好了，不详细讲了。

image-20210814130523363

margin:0 上下左右
margin:0 1px 上下，左右
margin:0 0 0 0 上左下右，顺时针旋转。
第四点 padding的上下左右

跟margin一模一样的，讲一遍，大量去测试就好了。

第五点 内外边距的计算方式

盒子的计算方式是怎么样的。

你这个元素到底有多大？

你要给美工对接。图都p图p好了。像素点都列好了。

元素最终的大小：margin+border+padding+内容宽度

image-20210814130958109

codelyq
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
狂神笔记，b站狂神说课程笔记大全
09-19
b站狂神说课程笔记大全，每个部分都有
狂神说全部笔记内容.zip
02-24
2020年7月份PDF笔记，从Java基础内容到微服务，分布式相关笔记，docker相关笔记；
【狂神说】CSS学习笔记
pan_h1995的博客
05-07 8262
参考B站狂神说视频教程
狂神说——CSS3最新教程快速入门通俗易懂
淡水瑜的博客
05-24 838
参考资料 文章目录1.CSS的简单介绍2.什么是CSS和发展史3.CSS的快速入门及优势4.四种css导入方式5.三种基本选择器（重要）6.层次选择器7.结构伪类选择器8.属性选择器（常用重要）9.CSS的作用及字体样式10.文本样式11.文本阴影和超链接伪类12.列表样式练习13.背景图像应用及渐变14.盒子模型及边框使用（重要）15.内外边距及div居中16.圆角边框及阴影和经验分享17.display（重要）和浮动18.overflow及父级边框塌陷问题19. 相对定位的使用及练习20.方块定位练习讲
CSS入门（狂神学习笔记）
weixin_42248256的博客
03-10 147
CSS 1.CSS是什么 Cascading Style Sheet 层叠级联样式表 1.1发展史 CSS1.0 CSS2.0 DIV(块) + CSS，HTML与CSS结构相分离的思想 CSS2.1 浮动，定位 CSS3.0 圆角边框，阴影，动画 1.2快速入门 html和css不分离 <style> h1{ color:red; } </style> <h1>标题</h1> <!-- 也可以
狂神说视频-CSS笔记.pdf
11-12
主要根据狂神说的视频整理CSS
狂神说各种学习视频配套笔记
05-30
包括Java、html、CSS、JavaScript、Mysql、JavaWeb、Mybatis、SpringMVC、Linux、Redis、SpringCloud等
狂神笔记，b站狂神说课程笔记大全(最新)
09-19
b站狂神说课程笔记大全，每个部分都有 狂神说java系列笔记（java基础+javaweb+ssm+微服务）全套 狂神说上课笔记未删减 Java基础到技术升级 1、JavaSE：Java入门 2、JavaSE：基础语法 3、JavaSE：流程控制 4、JavaSE...
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
此资源为我跟着B站up主【遇见狂神说】java系列视频中前端入门部分学习过程中所写 大部分和视频保持一致，有一些自己的理解和一些扩展的部分
狂神说系列 JavaScript笔记
06-15
狂神说系列 JavaScript笔记
狂神JUC并发笔记大全+Linux等资料
08-07
狂神JUC并发笔记大全+Linux等资料
Javaweb--狂神版
12-26
来自狂神JavaWeb项目
狂神笔记md文件.zip
05-25
狂神说myBatis，Spring,SpringMVC配套makedown笔记，值得拥有嗷！
【狂神】JAVA学习全套笔记（完整版）
03-12
内容包含： 1、JAVA SE 2、MySQL + JDBC 3、JAVA WEB 4、Mybatis 5、SSM 6、大前端 7、Vue 8、SpringBoot 9、Spring Security 10、Shiro 11、Spring Cloud 12、JVM 13、JUC 14、Git 15、Linux 16、Redis 17、ElasticSearch 18、Docker
狂神 Spring5课堂笔记
12-23
Java，Spring笔记
【狂神学习笔记】CSS
weixin_45500506的博客
08-02 517
文章目录什么是CSScss导入方式选择器（重点）基本选择器标签选择器（重点，必会）类选择器id选择器层次选择器后代选择器子选择器相邻弟弟选择器通用弟弟选择器结构伪类选择器属性选择器（常用）盒子模型居中display浮动清除浮动父级框塌陷display和浮动定位相对定位绝对定位固定定位css导入方式选择器（重点）基本选择器标签选择器（重点，必会）类选择器id选择器层次选择器后代选择器子选择器相邻弟弟选择器通用弟弟选择器结构伪类选择器属性选择器（常用）盒子模型居中display浮动清除浮动父级框塌陷displa
GUI编程学习（观看狂神说java视频学习笔记）
u011412779的博客
06-08 2442
GUI编程 GUI：图形用户界面编程 GUI编程学习路线 GUI是什么 GUI怎么写 GUI使用场景 组件 监听 弹窗 面板 鼠标 键盘 按钮 1.简介 GUI核心技术：Swing AWT 缺点： 不美观 需要jre环境 为什么要学习 可以写出一些自己用的小工具 可能会涉及到swing的维护工作 -> 破解 了解MVC架构，了解监听 2.AWT 2.1.AWT介绍 AWT：抽象的窗口工具，包含了很多的类和接口 元素：窗口、按钮、文本框 java.awt包下 [外链图片转
狂神多线程
qq_40826814的博客
04-19 257
学习视频参考链接：https://www.bilibili.com/video/BV1V4411p7EF?p=27 线程简介 线程的实现（重点） 线程状态 线程同步（重点） 线程通信问题 高级主题（重点） 文章目录 1、线程简介 2、线程实现 2.1 继承 Thread 类，重写 run 方法 2.2 继承 Runnable 接口，创建 Tread 对象 2.3 实现 Callable 接口（了解） 2.4 Lamda 表达式 2.5 静态代理模式 3、线程的 5 种状态 .
Java狂神说基础1-30课
weixin_42022326的博客
07-06 86
1Hello World javac与java区别 编译型：整体翻译 C/C++ 操作系统 ​ 解释型:实时的，如果新加东西要倒回去看 Java Python ​ java先编译，把Java文件变成字节码文件，然后再解释给JVM Java区分大小写，是敏感的 2float 和 long类型末尾加F L 10.1F 30L 用F L写，尤其是L，小写l很容易看成1，养成良好习惯。 string 是类，不是关键字 int对应的类是integer 3float double的隐藏的致命错误 浮
狂神mybatis课堂笔记
最新发布
08-24
你可以在以下两个资源中找到关于狂神Mybatis课堂笔记的信息： 1. 狂神自己整理的Mybatis学习笔记，你可以在这个链接中找到详细的内容：。 2. Mybatis官方文档也是一个非常好的学习资源，你可以在这里找到更多关于Mybatis的详细信息：。 这些资源将为你提供全面的关于狂神Mybatis课堂笔记的内容。祝你学习顺利！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [狂神说Mybatis笔记（全网最全）](https://blog.csdn.net/qq_45515766/article/details/126794957)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [狂神说Mybatis最全课堂笔记](https://blog.csdn.net/m0_60811835/article/details/128590873)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值