狂神学java css学习笔记

已于 2022-06-24 21:14:05 修改
阅读量132 收藏
点赞数 1
文章标签： css 学习 css3
于 2022-06-09 00:05:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50669097/article/details/125195052
版权

1.什么是css

如何学习

  1. css是什么

  2. css怎么用（入门）

  3. css选择器（重点）

  4. 美化网页（文子，阴影，超链接，列表，渐变…）

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特效）

1.1什么是css

cassading style sheet 层叠级联样式表

css ：表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页互动

1.2发展史

css1.0

css2.0 DIV（块）＋CSS , HTML与CSS结构分离思想，网页变得简单 SEO

css2.1 浮动，定位

css3.0圆角，阴影. 动画… 浏览器兼容行…

练习模式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nZgcVpL1-1654704314462)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220607220804599.png)]

1.3，快速入门

style

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--规范
 <style>
 可以编写css的代码语法
选择器{
        声名1;
        声名2;
        声名3;
     }


 </style>

 -->
    <style>
        h1{
            color: brown;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

建议使用这种规范内连模式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xb3pI1mA-1654704314463)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220607223620819.png)]

css优势

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

1.4 css的导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--内部样式表    -->
    <style>
        h1{
            color: aliceblue;
        }
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级就近原则谁近谁生效-->
<!--行内样式；（不推荐）在标签元素中编写style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

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

连接式：

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

导入式

@import是css2.1 特有的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  导入式  -->
    <style>
        @import "css/style.css";
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

2.选择器

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

2.1基本选择器

  1. 标签选择器 :选择一类标签 标签{}

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

<!-- 标签选择器 ，会选到这个页面上所有这个标签的元素
background：背景颜色
border-radius：圆角
-->
    <style>
        p{
            color: green;
            font-size: 80px;

        }
        h1{
            color: #2aa541;
            background: brown;
            border-radius: 24px;
        }
    </style>


</head>
<body>
<h1>学java</h1>
<br/>
<p>听课</p>
</body>
</html>

  2. 类选择器 class 选择所有class属性一致的标签，跨标签 .类名{}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--类选择器的格式  .class
好处，可以多个标签归类 可以是同一个class  class可以复用
-->
    <style>

       .hlk{
           color: #2aa541;
       }
        .java{
            color: red;
        }
        .xuexi{
            color: #0e0a2b;
        }
    </style>
</head>
<body>
<h1 class="hlk">java</h1>
<h1 class="xuexi">java</h1>
<h1 class="java">java</h1>
<p class="java">  p标签</p>
</body>
</html>

  3. id 选择器 #id名{}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- id选择器 ：id必须保证全局唯一！
  #id名称
  不遵寻就近原则  固定
  id选择器>类选择器>标签选择器
  -->
    <style>
        #java{
            color: brown;
        }
        .hlk{
            color: green;
        }
        h1{
            color: yellow;
        }
    </style>
</head>
<body>
<h1 id="java">标题1</h1>
<h1 class="hlk">标题2</h1>
<h1 class="hlk">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

    优先级：id选择器>类选择器>标签选择器

2.2，层次选择器

  1. 后代选择器body p 在某个元素后面 祖爷爷 爷爷 爸爸

            /*后代选择器  所有后代*/
        body p{
            background: red;
        }

  2. 子选择器 一代body>p 儿子

    /*子选择器  只选择第一后代*/
        body>p{
            background: #2aa541;
        }

  3. 相邻相对选择器.active +p 兄弟选择器 只有一个兄弟（向下的兄弟）

    /*兄弟选择器 只有一个兄弟（向下的兄弟）*/
.active +p{
    background: #050bed;
}

  4. 通用选择器 通用选择器 .active~p 一样对下不对上但是可以选多个

            /*通用选择器  一样对下不对上但是可以选多个
        当前选中的元素向下所有的兄弟元素*/
        .active~p{
            background: green;
        }

2.3结构伪类选择器

伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个子元素*/
   ul li:first-child{
       background: #2aa541;
   }
        /*ul的最后一个元素*/
   ul li:last-child{
       background: red;
   }
   /*选中p1：定位到父元素，选择当前的第一个子元素
   选择当前p元素的父级元素，选中父级元素的第一个，并且当前元素才生效
   */
   p:nth-child(1){
       background: #b0ec0b;
   }
   /*选中父级元素下的第三个，类型*/
  p:nth-of-type(3){
      background: aqua;

  }
    </style>

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vORSqWBx-1654704314464)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608092916556.png)]

2.4属性选择器

属性名

​ = 属性值(正则)
​ =绝对等于
​ *=包含这个元素
​ ^=以这个元素开头
​ $=以这个元素结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性名
         标签[属性表达式]{
         样式
         }
         属性名 = 属性值(正则)
        =绝对等于
        *=包含这个元素
        ^=以这个元素开头
        $=以这个元素结尾
        */
        a[class*="a"]{
            background: #2aa541;
        }
        a[id=tow]{
            background: brown;
        }
        a[target]{
            background: aqua;
        }
        a[href^="a"]{
            background: #0e0a2b;
        }
        a[href$="kai"]{
            background: aliceblue;
        }

    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="a b c" id="one">1</a>
    <a href="http://www.baidu.com" >2</a>
    <a href=""id="tow">3</a>
    <a href="aa">4</a>
    <a href="huangliangkai" target="_blank">5</a>
    <a href="">6</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: #2aa541;
        }
        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
  2. 文本对齐方式 text-align = center
  3. 首行缩进 text-index：2em
  4. 行高 line-height：
  5. 装饰 text-decoration
  6. 文本图片对齐： vertical-align: middle;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  text-align: 排版
      text-indent: 段落首行缩进
        height：行高
        line-height:块高
        行高和块高高度一致就可以上下剧中
 -->
    <style>
        h1{
            color: brown;
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            color: #b0ec0b;
            height: 30px;
            line-height: 30px;


        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*水平对齐~参照物  a，b*/
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="l1">12345</p>
<p class="l2">12345</p>
<p class="l3">12345</p>
<p class="p1">来到元谋县金沙江乌东德水电站建设甘塘移民
    搬迁安置点指挥部工作半年了。在这半年中
    ，亲眼目睹一幢幢楼房拔地而起，亲眼目睹
    错落有致的楼房连片成为村庄，亲眼目睹宽阔的
    大道将一个个村庄连接起来，亲眼目睹贫瘠、荒芜
    的破山烂箐变为大片大片的土地，亲眼目睹一张张移民
    幸福的笑脸，心，充实，舒畅。</p>
<p class="p2">在充实和舒畅中，由然而生起对元谋县委
    政府的决策部署而敬佩之情；由然而生起对我的
    同事们在移民搬迁安置工作中所付出的一切而骄傲之
    意。是他们脚踏实地，俯首躬行，用最独有的坚韧，最独
    特的魅力，最丰富的色彩，最生动的形象，把身安在甘塘，把心
    铸在甘塘，把情洒在甘塘，才换来今天甘塘如此的日新月异，如此的
    令人瞩目，如此的具有活力，如此的充满希望。
</p>
<p>
    <img src="image/1.png" alt="">
    <span>123454678</span>
</p>

</body>
</html>

3.4阴影

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lyrivnx5-1654704314464)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608110628399.png)]

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

3.5超链接伪类

正常情况下 a a:hover

 /*默认颜色*/
        a{
            text-decoration: none;
            color: #000;
        }
        /*鼠标悬停*/
        a:hover{
            color: aqua;
            font-size: 50px;
        }
        /*鼠标点击情况下*/
        a:active{
            color: red;
        }

3.6列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qcRYI0Rj-1654704314465)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608113816387.png)]

3.7背景

背景颜色

背景图片

 <style>
        div{
            width: 10000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("image/1.png");
            /*默认全部铺满*/
        }
       div1{
            background-repeat: repeat-x;
        }
        div2{
            background-repeat: repeat-y;
        }
        div3{
            background-repeat: no-repeat;
        }
    </style>

4. 盒子模型

4.1什么是盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L65psxIA-1654704314465)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608124807296.png)]

margin：外边距

border：边框

padding：内边距

4.2边框

  1. 边框的粗细

  2. 边框的样式

  3. 边框的颜色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ctUNkBC0-1654704314465)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608125525895.png)]

4.3 内外边距

好处：外边距可以让内容居中

外边距

margin: 0;
margin: 0 auto;
margin: 0 1px 2px 3px; 
   /*一个参数代表上下左右  
        两个参数代表上下，左右
        四个参数代表上，右，下，左  顺时针旋转
        */

内边距

padding: 0;
padding: 0 auto;
padding: 0 1px 2px 3px; 
   /*一个参数代表上下左右  
        两个参数代表上下，左右
        四个参数代表上，右，下，左  顺时针旋转
        */

盒子模型计算方式：这个元素多大

margin + border + padding +内容宽度

4.4 圆角边框

<!-- border-radius:
一个值
四个角

两个值
  左上 右上 ：  右下 左下
  四个值：顺时针
 -->
<!--  圆圈： 圆角等于半径
  -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 100px;
        }
    </style>

4.5 阴影

5浮动

5.1标准文档流

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xavjvlbs-1654704314466)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608142204129.png)]

块级元素 独占一行

h1 ~ h6 p div 列表…

行内元素 不独占一行

span a img strong …

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

​

5.2 display

<!-- display:
   block 块元素
   inline 行内块元素
   inline-block 是块元素，但是可以内联，在一行！
   none ：消失

   -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;

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

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

5.3 float

1左右浮动 float

float ：right 左

float ：left 右

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ngikiilv-1654704314466)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608145003612.png)]

5.4父级边框塌陷的问题

clear

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

解决方案

  1. 增加父级元素的高度

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-txJ2sBA5-1654704314467)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608200158849.png)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PzCMqhDC-1654704314468)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608200654837.png)]

3，overflow

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

4.父类增加一个伪类

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

小结

  1. 浮动元素后面增加空div 简单，代码中尽量避免空div

  2. 设置父元素的高度 简单，元素假设没有固定的高度，就会被限制

  3. overflow 简单 下拉的场景避免使用

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

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

5.5对比

display 方向不可以控制

float

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

6定位

6.1 相对定位

相对定位：position：relative

相对于原来的位置，进行指定的偏移。相对定位的话，它任然在标准的表尊文档流中！

top：向上偏移 离上更远

left：向左偏移 离左更远

bottom：向下偏移 离下更远

right：向右偏移 离右更远

6.2绝对定位

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

  1. 没有父级元素定位的前提下，相对于浏览器定位
  2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移
  3. 在父级元素范围内移动
  4. 相对于父级或者浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档中，原来的位置不会被保留。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9C8ZHsDi-1654704314469)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608204309010.png)]

6.3固定定位

相对于浏览器的定位移动浏览器位置会改变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UlUnLDCM-1654704314469)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608204541602.png)]

6.4 z-index

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lcRwuN1K-1654704314469)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608204811502.png)]

图层

z-index 默认是0,最高无限-999 opacity ：透明度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QE8SCPb3-1654704314470)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608211029791.png)]

总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r8GdlsZ8-1654704314470)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608212402814.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wUBwWLGP-1654704314471)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608212537322.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-70pedtPv-1654704314471)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608212647642.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lDUPm6ie-1654704314471)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608212749051.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XqM5QpZT-1654704314472)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\image-20220608212919197.png)]

学无止境，Java
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS基础
Forgetxb的博客
02-20 205
CSS基础知识总结
狂神说Java学习笔记
05-19
Note1~16
狂神说视频-CSS笔记.pdf
11-12
主要根据狂神说的视频整理CSS
【狂神说】CSS学习笔记
pan_h1995的博客
05-07 8254
参考B站狂神说视频教程
狂神-CSS
weixin_47770259的博客
12-03 325
狂神CSS
【狂神学习笔记】CSS
weixin_45500506的博客
08-02 515
文章目录什么是CSScss导入方式选择器（重点）基本选择器标签选择器（重点，必会）类选择器id选择器层次选择器后代选择器子选择器相邻弟弟选择器通用弟弟选择器结构伪类选择器属性选择器（常用）盒子模型居中display浮动清除浮动父级框塌陷display和浮动定位相对定位绝对定位固定定位css导入方式选择器（重点）基本选择器标签选择器（重点，必会）类选择器id选择器层次选择器后代选择器子选择器相邻弟弟选择器通用弟弟选择器结构伪类选择器属性选择器（常用）盒子模型居中display浮动清除浮动父级框塌陷displa
【狂神说JAVA】CSS详细笔记(全)
Martin-share的博客
01-18 1001
【狂神说JAVA】CSS笔记（全）
【狂神】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、...
狂神说各种学习视频配套笔记
05-30
包括Java、html、CSS、JavaScript、Mysql、JavaWeb、Mybatis、SpringMVC、Linux、Redis、SpringCloud等
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
此资源为我跟着B站up主【遇见狂神说】java系列视频中前端入门部分学习过程中所写 大部分和视频保持一致，有一些自己的理解和一些扩展的部分
狂神说Java-SpringMVC学习笔记
05-17
狂神说Java——SpringMVC学习笔记 内容概要： 1、了解什么是SpringMVC 2、RestFul和控制器 3、转发和重定向 4、数据处理 5、JSON 6、SSM项目整合 7、Ajax 8、拦截器+文件上传下载 能学到什么：详细了解SpringMVC基础...
狂神说Java-Spring学习笔记
05-17
狂神说Java——Spring学习笔记 内容概要： 1、了解什么是Spring 2、IOC 3、Spring配置 4、依赖注入 5、Bean的自动装配 6、注解开发 7、代理模式 8、AOP 能学到什么：详细了解Spring基础以及使用 阅读建议： 建议配合...
狂神Java学习笔记————CSS3（一）————CSS导入方式，选择器，伪类和字体文本样式
hyx的博客
06-09 474
cascading style sheet 层叠级联样式表 CSS：表现层（美化网页） 字体，颜色，边距，高宽，背景图片，网页定位，网页浮动。。。 第一段css：该段选择h1标签，将颜色指定为红色 h1{ color: red; } CSS的导入方式 行内样式 内部样式 外部样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&.
解决IE11通过主机名访问和IP地址访问，CSS渲染效果不一致问题
shenweihong的博客
05-23 258
这个问题在Microsoft Edge，谷歌都不存在，只在老的IE版本(如IE11)才有。IP地址访问才是我想要的效果，主机访问菜单半透明向下箭头不见了，背景图片分了好几部分。spingboot:版本2.6.13。
css卡片横线100%宽度
m0_46554818的博客
05-22 247
【代码】css卡片横线100%宽度。
前端已死? Bootstrap--CSS&组件
金灰的博客
05-14 1400
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多。通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。(这里的屏幕大小 是为了在前端显示的时候更好看,显示的更全.)用的时候href引用一下就行(link标签)( - 后面可加数字,总共12份就行.)--分的份数加起来是12就行了.v5--里面的图标更多.
Day06：Flex 布局
最新发布
EmulateStep的博客
05-23 1209
本文学习Flex布局，首先讲解了什么是标准流（文档流），接着将了浮动（float）布局，浮动布局为什么会脱标以及如何解决脱标的情况。接下来讲解了本文学习的重点，flex 弹性布局，关于 flex 弹性布局主要讲解了 flex 的组成、主轴对齐方式、侧轴对齐方式、如何修改主轴方向、弹性伸缩比、弹性盒子换行以及行内对齐方式，并通过多个例子详细讲解了弹性盒子的布局方式和常用属性，希望对大家有帮助！
vue-cli2项目中使用scss
Hi_MrXiao的博客
05-21 470
首先要搞清楚Sass和Scss的区别：实际上Sass和Scss是同一种东西，Scss是 Sass3 引入新的语法，它们都是css预处理器。：Sass 默认使用“.sass”作为文件扩展名，而 Scss 使用“.scss”作为扩展名。：Sass 最初是以严格的缩进式语法规则来书写，不带大括号和分号，这种方式使得代码更加简洁，但在某些情况下可能不如Scss直观易读；相比之下，Scss的语法允许使用大括号和分号，与常规的 css语法相似，这使得 Scss更容易被 css开发者接受和使用。
狂神说java多线程笔记
10-11
狂神在他的Java多线程笔记中，详细介绍了Java多线程的相关知识，包括线程的创建、启动、停止、等待、唤醒等操作，以及线程安全、锁、同步等概念和技术。 在Java多线程中，线程的创建有两种方式：继承Thread类和实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值