CSS05

最新推荐文章于 2024-07-26 08:00:00 发布
最新推荐文章于 2024-07-26 08:00:00 发布
阅读量112 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45842339/article/details/115463081
版权

文章目录

学习目标
  • 知道为什么要用定位
  • 知道定位的四种分类
  • 知道四种定位的特点
  • 知道为什么用子绝父相布局
  • 写出轮播图布局
  • 知道显示隐藏的两种方式和区别
定位
  • 使用场景
    • 某个元素可以自由的在一个盒子内移动位置，并且需要压住其他盒子
    • 滚动窗口，盒子不跟随滚动
  • 定义：将盒子定在某一个位置，所以定位也是用来布局，用来摆放盒子的
  • 组成：定位模式 + 边偏移
    • 定位模式：指定一个元素在文档中的定位方式
    • 边偏移：指定该元素的最终位置
边偏移
  • 定位的盒子需要移动到的位置
  • 属性以及描述
边偏移属性示例描述
toptop: 80px顶端偏移量，定义元素相对于其父元素上边线的距离
bottombottom: 80px底部偏移量，定义元素相对于其父元素下边线的距离
leftleft: 80px左侧偏移量，定义元素相对于其父元素左边线的距离
rightright: 80px右端偏移量，定义元素相对于其父元素右边线的距离
定位模式
  • position属性 来决定元素的定位方式
  • 分类：
值语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位
静态定位 static
  • 元素的默认定位方式，就是没得定位的意思
  • 特点
    • 静态定位按照标准流的特性摆放位置，没有偏移量
    • 很少使用
  • 语法
选择器 {
    position: static;
}
相对定位 relative
  • 元素在移动位置的时候，是相对于其原本的位置而言的
  • 特点
    • 移动位置的时候是参照其原位置
    • 使用后，盒子虽然动了，但是它原本所占的位置还在，其他盒子不能直接占有，即没有脱标（一般给绝对定位当爹）
  • 语法
选择器 {
    position：relative;
}
  • 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
  • 效果图

在这里插入图片描述

绝对定位

  • 元素在移动位置的时候，相对于其祖先元素来移动的

  • 特点

    • 如果没有祖先元素or祖先元素没有定位，则以浏览器界面为准定位
    • 如果祖先元素有定位（相对、绝对和固定三种），则以最近一级有定位祖先元素为参考点移动位置（给相对定位当儿）
    • 使用绝对定位后不再占有原位置（脱标了）

  • 案例1：祖先元素没有定位


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位：祖先元素没有定位</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            bottom: 100px;
            right: 100px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

在这里插入图片描述

  • 案例2：祖先元素有定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位：祖先元素有定位</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            bottom: 100px;
            right: 100px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>
  • 效果图

在这里插入图片描述

  • 案例3：父亲不定位，爷爷定位了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位：父亲不定位，爷爷定位了</title>
    <style>
        .grandfather {
            position: relative;
            width: 1000px;
            height: 1000px;
            background-color: red;
        }
        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            bottom: 100px;
            right: 100px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>
  • 效果图

在这里插入图片描述

子绝父相

  • 见名知意：子级是绝对定位的话，父级要用相对定位

  • 原因

    • 子级使用绝对定位，是脱标的，不占位置，所以可以放在父盒子里面的任何地方，且不影响其他兄弟盒子
    • 父盒子为了限制子盒子只能在其体内显示，所以需要加定位
    • 因为布局的时候，父盒子是需要占有位置的，所以三种定位中就相对定位最合适

  • 总结：父级需要占位子，所以使用相对定位，子盒子不需要占位置但是得在父盒子里面，所以使用绝对定位

  • 案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子绝父相</title>
    <style>
        .zzd {
            position: relative;
            width: 500px;
            height: 250px;
            margin: 0 auto;
            border: 1px solid black;
        }
        .hot {
            position: absolute;
            right: -6px;
            top: -5px;
        }
    </style>
</head>
<body>
    <div class="zzd">
        <img src="../../../PYOH/images/爪子刀.png" alt="">
        <div class="hot"><img src="../../../Review/CSS/CSS04/学成在线/images/hot.png" alt=""></div>
    </div>
</body>
</html>
  • 效果图

在这里插入图片描述

固定定位 fixed
  • 将盒子固定在浏览器可视区域中
  • 特点
    • 将浏览器的可视窗口为参照点移动盒子
      • 和父元素没有关系
      • 不随滚动条滚动
    • 脱标
  • 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style>
        body {
            height: 2000px;
        }
        .zzd {
            position: fixed;
            top: 100px;
            right: 40px;
        }
    </style>
</head>
<body>
    <div class="zzd"><img src="../../../PYOH/images/爪子刀.png" alt=""></div>
</body>
</html>
  • 效果图

在这里插入图片描述

  • 常用情况：固定定位到版心右侧
  • 固定步骤
    1. 让固定定位的盒子 left: 50% 移动到浏览器可视区（or版心）的一半位置
    2. 再让固定定位的盒子 margin-left: 浏览器（or版心）宽度距离的一半，就可以使固定定位的盒子贴着版心右侧对齐了
  • 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位到版心右侧</title>
    <style>
        .w {
            width: 800px;
            height: 3000px;
            background-color: skyblue;
            margin: 0 auto;
        }
        .fixed {
            position: fixed;
            left: 50%;
            margin-left: 400px;
            width: 50px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="fixed"></div>
    <div class="w">版心盒子</div>
</body>
</html>
  • 效果图

在这里插入图片描述

粘性定位 sticky
  • 类似于相对定位和固定定位的混合体
  • 特点
    • 以浏览器的可视窗口为参照点移动元素（固定定位特点）
    • 粘性定位不脱标
    • 必须添加top、left、right、bottom中一个属性才有效
    • 兼容性较差
  • 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性定位</title>
    <style>
        body {
            height: 3000px;
        }
        .nav {
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: skyblue;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="nav">导航栏</div>
</body>
</html>
  • 效果图

在这里插入图片描述

总结
定位模式是否脱标移动位置是否常用
static 静态定位否不能用边偏移很少
relative 相对定位是（占有位置）相对于自身位置移动常用
absolute 绝对定位是（不占有位置）带有定位的父级or浏览器常用
fixed 固定定位是（不占有位置）浏览器可视区常用
sticky 粘性定位否（占有位置）浏览器可视区常用
  • 要记住是否脱标和以谁为参照物
  • 子绝父相很重要
定位叠放次序 z-index
  • 使用背景：在使用定位布局的时候，可能会出现盒子重叠的情况，这种时候就可以使用z-index 来控制盒子的前后顺序（z轴）
  • 语法
选择器 {
    z-index：1；
}

  • 注意事项

    • 数值可以是正整数、负数或0，默认是auto，数值越大，盒子越靠上
    • 如果属性值相同，则按照书写顺序，后来居上
    • 数字后面是没有单位的
    • 只有定位了的盒子才有z-index属性

  • 案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位叠放次序：z-index</title>
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .box1 {
            background-color: skyblue;
            z-index: 1;
        }
        .box2 {
            background-color: yellow;
            left: 50px;
            top: 50px;
            z-index: 2;
        }
        .box3 {
            background-color: green;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
</body>
</html>
  • 效果图

在这里插入图片描述

定位拓展
绝对定位的盒子居中

  • 使用背景：加了绝对定位的盒子不能通过margin：0 auto 进行水平居中

  • 解决方法及其步骤

    1. left：50%；：让盒子左侧移动到父级元素的水平中心位置
    2. margin-left：-自身宽度一半；：让盒子向左移动自身宽度的一半

  • 案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位的盒子居中</title>
    <style>
        .box {
            position: absolute;
            left: 50%;
            /* 盒子宽度的一半 */
            margin-left: -100px;
            top: 50%;
            /* 盒子高度的一半 */
            margin-top: -50px;
            width: 200px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
  • 效果图

在这里插入图片描述

定位的特殊特性
  • 绝对定位和固定定位也有某些浮动的特性
    • 行内元素添加绝对or固定定位，可以直接设置高度和宽度
    • 块级元素添加绝对or固定定位，如果没有给宽度或者高度，默认大小就是内容的大小
  • 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位特殊特性</title>
    <style>
        span {
            position: absolute;
            margin-top: 300px;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        div {
            position: absolute;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <span>123</span>
    <div>abc</div>
</body>
</html>
  • 效果图

在这里插入图片描述

脱标的盒子没有外边距塌陷
  • 浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题
    • 因为脱标了
  • 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>脱标的盒子没有外边距塌陷</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }
        .box1 {
            position: absolute;
            margin-bottom: 100px;
            background-color: skyblue;
        }
        .box2 {
            position: absolute;
            margin-top: 50px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>
  • 效果图

在这里插入图片描述

绝对(固定)定位会完全压住盒子
  • 浮动元素会压住其下面标准流的盒子，但是不会压住下面标准流盒子内的文字or图片
  • 绝对(固定)定位会压住其下面标准流所有的内容
  • 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对(固定)定位会完全压住盒子</title>
    <style>
        .box {
            float: left;
            /* position: absolute; */
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <p>说好带你流浪</p>
    <p>而我却半路返航</p>
    <p>坠落自责的海洋</p>
    <p>发现离不开你</p>
    <p>我开始决定回去</p>
    <p>你已不在原地</p>
</body>
</html>
  • 效果图

在这里插入图片描述

网页布局总结
  • 盒子模型：大部分HTML标签是一个盒子
  • 浮动、定位：将盒子排列成网页
  1. 标准流：可以将盒子上下or左右排列，垂直的块级盒子显示就使用标准流布局
  2. 浮动：可以将多个块级元素一行显示or左右对齐盒子，多个块级盒子水平显示就使用浮动布局
  3. 定位：定位最大的特点是有层叠的概念，即可以让多个盒子前后层叠显示，某个元素需要自动在另外一个盒子内移动就使用定位
元素的隐藏与显示
  1. display：显示隐藏元素，但不保留位置
  2. visibility：显示隐藏元素，但保留原位置
  3. overflow：溢出显示隐藏，但是仅对溢出部分进行处理
display 属性
  • display：none；：隐藏对象
  • display：block；：转换为块级元素and显示元素
  • 使用display隐藏后，不在占有原位置
  • 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display属性</title>
    <style>
        .box1,
        .box2 {
            width: 200px;
            height: 200px;
        }
        .box1 {
            /* display: none; */
            display: block;
            background-color: skyblue;
        }
        .box2 {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
  • 效果图

在这里插入图片描述

visibility属性
  • visibility属性用于指定一个元素应可见or隐藏
    • visibility：visible；：元素可见
    • visibility：hidden；：元素隐藏
  • visibility 隐藏元素后，将会继续占有原位置
  • 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>visibility属性</title>
    <style> 
        .box {
            width: 200px;
            height: 200px;
        }
        .box1 {
            visibility: hidden;
            /* 隐藏元素后不想要原来的位置，添加display：none属性 */
            /* display: none; */
            background-color: skyblue;
        }
        .box2 {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>
  • 效果图

在这里插入图片描述

overflow属性
  • overflow属性指定了内容溢出一个盒子的时候，会发生什么
  • 属性及其相关描述
属性值描述
visible不剪切内容也不添加滚动条
hidden不显示超过盒子的内容，超出部分直接隐藏
scroll不管内容是否超出，总是显示滚动条
auto超出部分自动显示滚动条，不超出则不显示滚动条
  • 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>overflow属性</title>
    <style>
        .word1 {
            float: left;
            overflow: visible;
            width: 200px;
            height: 200px;
            border: 2px solid skyblue;
            margin: 100px 50px;
        }
        .word2 {
            float: left;
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 2px solid skyblue;
            margin: 100px 50px;
        }
        .word3 {
            float: left;
            overflow: scroll;
            width: 200px;
            height: 200px;
            border: 2px solid skyblue;
            margin: 100px 50px;
        }
        .word4 {
            float: left;
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 2px solid skyblue;
            margin: 100px 50px;
        }
        .word5 {
            float: left;
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 2px solid skyblue;
            margin: 100px 50px;
        }
    </style>
</head>
<body>
    <div class="word1">
        <p>
            说好带你流浪
            而我却半路返航
            坠落自责的海洋
            发现离不开你
            我开始决定回去
            你已不在原地
            我可以接受你的所有
            所有小脾气
            我可以带你去吃很多
            很多好东西
            我可以偶尔给你带来
            带来小甜蜜
            就像前几年那样
            每天都会给你制造很多惊喜
            你的心 伤我能治愈
            我的快乐也只有你能给予
            我们就别再分离
            可不可以 和你在一起
            我们之间有太多回忆
        </p>
    </div>
    <div class="word2">
        <p>
            说好带你流浪
            而我却半路返航
            坠落自责的海洋
            发现离不开你
            我开始决定回去
            你已不在原地
            我可以接受你的所有
            所有小脾气
            我可以带你去吃很多
            很多好东西
            我可以偶尔给你带来
            带来小甜蜜
            就像前几年那样
            每天都会给你制造很多惊喜
            你的心 伤我能治愈
            我的快乐也只有你能给予
            我们就别再分离
            可不可以 和你在一起
            我们之间有太多回忆
        </p>
    </div>
    <div class="word3">
        <p>
            说好带你流浪
            而我却半路返航
            坠落自责的海洋
            发现离不开你
            我开始决定回去
            你已不在原地
            我可以接受你的所有
            所有小脾气
            我可以带你去吃很多
            很多好东西
            我可以偶尔给你带来
            带来小甜蜜
            就像前几年那样
            每天都会给你制造很多惊喜
            你的心 伤我能治愈
            我的快乐也只有你能给予
            我们就别再分离
            可不可以 和你在一起
            我们之间有太多回忆
        </p>
    </div>
    <div class="word4">
        <p>
            说好带你流浪
            而我却半路返航
            坠落自责的海洋
            发现离不开你
        </p>
    </div>
    <div class="word5">
        <p>
            说好带你流浪
            而我却半路返航
            坠落自责的海洋
            发现离不开你
            我开始决定回去
            你已不在原地
            我可以接受你的所有
            所有小脾气
            我可以带你去吃很多
            很多好东西
            我可以偶尔给你带来
            带来小甜蜜
            就像前几年那样
            每天都会给你制造很多惊喜
            你的心 伤我能治愈
            我的快乐也只有你能给予
            我们就别再分离
            可不可以 和你在一起
            我们之间有太多回忆
        </p>
    </div>
</body>
</html>
  • 效果图

在这里插入图片描述

苏豆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS06
weixin_45842339的博客
04-08 123
文章目录学习目标精灵图字体图标字体图标的下载字体图标的引入CSS三角CSS用户界面样式更改鼠标样式轮廓线防止拖曳文本域vertical-align 属性应用解决图片底部默认空白缝隙溢出的文本省略号显示多行文本溢出部分使用省略号代替常见布局技巧margin负值的运用文字围绕浮动元素行内块巧妙运用CSS三角强化 学习目标 能够使用精灵图 能使用字体图标 能写出CSS三角 能写出常见CSS用户界面样式 知道常见布局技巧 精灵图 目的：有效减少服务器接收和发送请求次数，提高页面的加载速度 方式：将网页中的一些
css-day05
xiaoruia的博客
06-24 132
第五天，关于盒子边框和浮动
DAY05 CSS
adminstate的博客
07-20 1078
CSS样式
05.CSS前言
weixin_43891622的博客
12-14 937
CSS 的全称为：层叠样式表 ( Cascading Style Sheets )CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等写在标签的 style 属性中，（又称：内联样式）写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在写在单独的 .css 文件中，随后在 HTML 文件中引入使用选择器：找到要添加样式的元素声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为： 属性名: 属性值。
CSS05：结构伪类选择器
搬运工
02-10 808
伪类用于定义元素的特殊状态。 如，它可以用于： 设置鼠标悬停在元素上时的样式 为已访问和未访问链接设置不同的样式 设置元素获得焦点时的样式 本文只列举了一部分应用，其他的可以看CSS 伪类 (w3school.com.cn) 元素:first-child 选择作为其父的首个为当前元素的子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
day07（CSS05-定位+装饰）.rar
12-01
"day07（CSS05-定位+装饰）.rar"这个压缩包包含了关于这一主题的学习资料，包括讲义、大纲和代码示例，为深入理解CSS定位和装饰提供了丰富的资源。 首先，让我们从CSS定位开始。定位在网页布局中扮演着核心角色，它...
Day05-CSS布局-盒子模型
07-06
总的来说，“Day05-CSS布局-盒子模型”涵盖了网页设计中布局的基本概念，掌握了这些知识，开发者就能够更好地控制元素的外观和位置，从而创建出美观且功能完善的网页。通过实践和不断学习，开发者可以进一步掌握更...
CSS 一些使用用法
09-27
/* Modify this at 08/05/06 AM9:58 */ ``` 这段注释记录了某个样式或规则的修改时间，便于后期追踪代码的修改历史。在实际开发中，应包含更详细的信息，如修改原因、作者和预期效果等。 三、处理文本换行 在CSS...
PostCSS技术概述
04-22
讲解分为8章： 01 PostCSS简介 02 PostCSS的安装与使用 03 PostCSS的核心概念 04 插件与使用方式 05 自动添加前缀 06 代码压缩与优化 07 兼容性和社区支持 08 实际应用场景
day05_html_js_css_
09-29
在"day05_html_js_css_"这个主题中，我们主要关注如何利用这些技术实现动态和富有吸引力的动画效果，并将这些效果应用于实际生活中的各种场景。 HTML（HyperText Markup Language）是网页的基础，它定义了网页的...
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1263
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
CSS学习笔记
ngczx的博客
07-23 638
CSS学习笔记
qt练习控件label控件-lineEdit控件样例代码
07-30
qt练习控件label控件-lineEdit控件样例代码
【JCR一区级】麻雀搜索算法SSA-CNN-LSTM-Attention故障诊断分类预测【含源码 5689期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
详解MATLAB Simulink通信系统建模与仿真
07-30
第1 章 MATLAB 基础与通信系统仿真 1.1 MATLAB 简介 1.2 MATLAB 程序设计 1.3 通信系统仿真 第2 章 Simulink 仿真基础 2.1 Simulink 简介 2.2 Simulink 工作环境 2.3 Simulink 仿真的基本方法 2.4 创建自己的模块库 2.5 S-函数的编写 第3 章 通信信号与系统分析 3.1 离散信号和系统 3.2 Fourier 分析 3.3 带通信号的低通等效 3.4 随机信号分析 第4 章 信道 4.1 加性高斯白噪声信道 4.2 多径衰落信道 第5 章 模拟调制 5.1 幅度调制 5.2 角度调制 第6 章 数字基带传输 6.1 概述 6.2 二进制基带信号传输 6.3 基带PAM 信号传输 6.4 带限信道的信号传输 第7 章 数字信号载波传输 7.1 概述 7.2 载波幅度调制（PAM） 7.3 载波相位调制（PSK） 7.4 正交幅度调制（QAM） 7.5 载波频率调制（FSK） 第8 章 信道编码和交织 8.1 概述 8.2 线性分组码
SCI一区】淘金算法GRO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5642.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
2020年首届“洪泽湖杯”中国人工智能掼蛋算法大赛第8名我就是掼蛋.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听
最新发布
07-30
网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听 效果截图https://www.diyiyuanma.cn/3444.html 多站合一音乐搜索解决方案，数据调用的是各网站的API接口， 有的接口并不是开放的，随时可能失效，本项目相关代码仅供参考。 网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听
这是一个旨在简化合约部署、验证、交互等操作用于生成区块链智能合约Foundry框架指令的 Web3.0开发者工具
07-30
这是一个旨在简化合约部署、验证、交互等操作用于生成区块链智能合约Foundry框架指令的 Web3.0开发者工具。
用css代码美化一下
05-30
好的，下面是一个简单的美化样式： ``` .register-top-grid { margin: 20px auto; max-width: 500px; background-color: #f6f6f6; border-radius: 5px;...这个样式主要是调整了表单项的布局、添加了一些边框、圆角...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值