css学习day07

于 2024-06-24 18:51:45 发布
阅读量885 收藏 25
点赞数 17
文章标签： 学习 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75646248/article/details/139933116
版权

一.元素的显示和隐藏

        1.隐藏后不再保留位置

display:none;

隐藏后想要显示使用display:block;

        2.隐藏后保留位置

visibibility:hidden;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid red;
        }
        
        .father div {
            width: 100px;
            height: 100px;
        }
        /* display: none;隐藏  display: block;显示*/
        
        .son {
            /* 元素的系那是和隐藏  隐藏之后不再保留位置(使用较多)*/
            display: none;
            background-color: blue;
            /* 隐藏之后保留位置 */
            /* visibility: hidden; */
        }
        
        .father:hover>.son {
            display: block;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son1</div>

    </div>
</body>

</html>

二.结构性伪类选择器

        1.对指定序号的元素设置样式

nth-child(n);参数可以是数字(1、2、3)

        2.对基数或偶数

基数:odd

偶数:even

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1.:nth-child(n) 对指定序号的子元素设置样式(从前往后),参数可以是数字(1、2、3) */
        /* li:nth-child(3) {
            color: red;
        } */
        /* 2.odd 基数 even 偶数 */
        
        .nav li:nth-child(odd) {
            color: blue;
        }
        
        .nav li:nth-child(even) {
            color: yellow;
        }
        /* 3.2n+1 2n 4n 4n+1 n从0开始 */
        
        .main p:nth-child(4) {
            color: brown;
        }
        /* :nth-of-type() 匹配指定序号的同一类型的子元素 */
        
        .main p:nth-of-type(4) {
            color: coral;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>li元素1</li>
        <li>li元素2</li>
        <li>li元素3</li>
        <li>li元素4</li>
        <li>li元素5</li>
        <li>li元素6</li>
        <li>li元素7</li>
        <li>li元素8</li>
    </ul>
    <div class="main">
        <span>你好呀</span>
        <p>p元素1</p>
        <p>p元素2</p>
        <p>p元素3</p>
        <p>p元素4</p>
        <p>p元素5</p>
    </div>
</body>

</html>

        3.跳跃式

2n+1 2n 4n 4n+1 n从0开始

        4.匹配指定序号的同一类型的子元素

:nth-of-type()

三.过渡(transition )

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

属性描述CSS
transition简写属性，用于在一个属性中设置四个过渡属性。3
transition-property规定应用过渡的 CSS 属性的名称。3
transition-duration定义过渡效果花费的时间。默认是 0。3
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3
transition-delay规定过渡效果何时开始。默认是 0。3

如果想要所有的属性都变化过渡， 写一个all 就可以

transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒

运动曲线 默认是 ease

何时开始 默认是 0s 立马开始

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 过渡 */
            /* 要过度的属性 花费时间 运动曲线(默认 ease缓慢动画)  何时开始*/
            /* 运动曲线 linear(匀速) ease(逐渐慢下来) ease-in(加速)  */
            /* transition: width 1s linear, height 1s; */
            transition: all 2s ease-in;
        }
        
        .box:hover {
            width: 1000px;
            height: 500px;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

 四.2D变形

        1.移动(translate(x, y) )

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 过渡 */
            transition: all 2s;
            margin: 100px auto;
        }
        
        .box:hover {
            /* transform: translate(50px, 50px); */
            transform: translateY(-10px);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

2.缩放

注意: scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而 任何大于1的值，作用是让元素放大。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 过渡 */
            transition: all 2s;
            margin: 500px auto;
        }
        
        .box:hover {
            /* 缩小[0,1) 1大小不变 变大 大于一 */
            transform: scale(0.5, -1);
            /* 若果书写一个字值,那么x和y方向都是这个值 */
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

        3.旋转(rotate)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 过渡 */
            transition: all 1s;
            margin: 100px auto;
        }
        
        .box:hover {
            /* 可以使元素旋转,正直顺时针西旋转 */
            transform: rotate(-60deg);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

五.动画

        1.定义动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 元素移动 */
        /* 1.transform :translatex()
        2.margin-left
        3.定位 */
        
        @keyframes move {
            /* 开始 */
            from {
                /* transform: translateX(0) */
                left: 100px;
            }
            /* 结束 */
            to {
                /* transform: translateX(600px) */
                left: 800px;
            }
        }
        
        .car {
            /* animation : 动画名称 运动时间 运动曲线 循环次数 */
            /* infinite 无限 */
            animation: move 1.5s linear infinite;
            /* 规定运动之前的状态 */
            /* 运动之后停留的位置 */
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="car"><img src="img/zx.jpg" alt="" width="100px"></div>
</body>

</html>

        2.调用动画

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 元素移动 */
        /* 1.transform :translatex()
        2.margin-left
        3.定位 */
        
        @keyframes move {
            0% {}
            49% {
                transform: translateX(1000px);
            }
            50% {
                transform: translateX(1000px) rotateY(180deg);
            }
            99% {
                transform: translateX(0px) rotateY(180deg);
            }
            100% {
                transform: rotateY(0deg);
            }
        }
        
        .car {
            /* animation : 动画名称 运动时间 运动曲线 循环次数 */
            /* infinite 无限 */
            animation: move 5s linear infinite;
            /* 规定运动之前的状态 */
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="car"><img src="img/1.png" alt="" width="100px"></div>
</body>

</html>

六.传统布局和flex布局对比

      1. 传统布局

  • 兼容性好

  • 布局繁琐

  • 局限性，不能在移动端很好的布局

        2.flex

  • 操作方便，布局极其简单，移动端使用比较广泛

  • pc端浏览器支持情况比较差

  • IE11或更低版本不支持flex或仅支持部分

        3.弹性布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 600px;
            height: 200px;
            border: 1px solid;
            margin: 0 auto;
            /* 使wrap元素父元素成为弹性盒子  */
            /* 如果子元素宽度不够,将自动进行缩小
            如果空间有剩余,不会自动变大,按自身大小进行显示 */
            display: flex;
        }
        
        .wrap span {
            width: 500px;
            height: 150px;
            background-color: pink;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!-- 对于子元素来说,什么样的子标签都是一样的 -->
        <!-- <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div> -->
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <span>span5</span>
    </div>
</body>

</html>

        4.弹性盒子的方向

flex-direction属性决定主轴的方向（即项目的排列方向）。

它可能取有4个值：

  • row（默认值）：主轴为水平方向，起点在左端。

  • row-reverse：主轴为水平方向，起点在右端。

  • column：主轴为垂直方向，起点在上沿。

  • column-reverse：主轴为垂直方向，起点在下沿。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 700px;
            height: 500px;
            border: 1px solid;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            /* 主轴的方向 row水平 column垂直*/
            flex-direction: column;
        }
        
        .wrap span {
            width: 200px;
            height: 150px;
            background-color: pink;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <span>span5</span>
        <span>span5</span>
        <span>span5</span>
        <span>span5</span>
    </div>
</body>

</html>

         5.换行(flex-wrap属性 )

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 700px;
            height: 500px;
            border: 1px solid;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            /* 主轴的方向 row水平 column垂直*/
            flex-direction: flex;
            flex-wrap: wrap;
        }
        
        .wrap span {
            width: 200px;
            height: 150px;
            background-color: pink;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <span>span5</span>
        <span>span5</span>
        <span>span5</span>
        <span>span5</span>
        <span>span5</span>
        <span>span5</span>
    </div>
</body>

</html>

        6.主轴上的对齐方式

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

  • flex-start（默认值）：左对齐

  • flex-end：右对齐

  • center： 居中

  • space-between：两端对齐，项目之间的间隔都相等。

  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 800px;
            height: 200px;
            border: 1px solid;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            /* 主轴上的对齐方式 */
            /* 默认:左对齐 */
            justify-content: flex-start;
            /* 右对齐 */
            justify-content: flex-end;
            /* 居中 */
            justify-content: center;
            /* 两端对齐 */
            justify-content: space-between;
            /* 两端相等对其 */
            justify-content: space-around;
        }
        
        .wrap div {
            width: 180px;
            height: 200px;
            background-color: pink;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>

    </div>
</body>

</html>

        7.交叉轴上的对齐方式

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

  • flex-start：交叉轴的起点对齐。

  • flex-end：交叉轴的终点对齐。

  • center：交叉轴的中点对齐。

  • baseline: 项目的第一行文字的基线对齐。

  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度，元素被拉伸以适应容器。。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 800px;
            height: 300px;
            border: 1px solid;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            justify-content: space-between;
            /* 交叉轴的对齐方式 */
            /* 居中  */
            align-items: center;
        }
        
        .wrap div {
            width: 180px;
            height: 200px;
            background-color: pink;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>

    </div>
</body>

</html>

        8.嵌套元素水平居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 800px;
            height: 300px;
            border: 1px solid;
            margin: 100px auto;
            /* 设置父元素为弹性盒子 */
            display: flex;
            justify-content: center;
            /* 交叉轴的对齐方式 */
            /* 居中  */
            align-items: center;
        }
        
        .wrap div {
            width: 180px;
            height: 200px;
            background-color: pink;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="item">item1</div>


    </div>
</body>

</html>

sep.17
关注
  • 17
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序全局/页面配置
weixin_30607029的博客
08-28 515
flex布局 父元素 display:flex; flex-direction: row; justify-content:space-between 补充 flex-direction属性决定主轴的方向（即项目的排列方向）。 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 colu...
微信小程序--页面全局配置
tyy152934036的博客
02-23 723
微信小程序----页面全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，通过在app.json的pages对象添加数据，保存后可以使得小程序自动生成需要的页面并包含4个文件，快捷方便。window代表着全局配置，如果页面配置中包含相同属性，那么页面配置的属性值会替换掉window对象相同的属性值，tabBar中的list数组中包含的每一个对象为一个底部tab应用，最少...
小程序的全局配置和页面配置
yizhiyang
03-21 540
小程序的全局配置和页面配置
微信小程序自定义单页面、全局导航栏
web前端开发
04-14 1万+
作者 | 小白来源|https://segmentfault.com/a/1190000018512099需求产品说小程序返回到首页不太方便，想添加返回首页按钮，UI...
微信小程序ui布局常用技巧
H5爱好者
11-12 3万+
微信小程序ui设计规范汇总： 　　微信小程序是一种全新的应用形态，微信小程序平台不需要下载安装即可使用应用的平台，微信小程序实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。 【更多原创微信小程序技术文章分享平台：扫码关注微信订阅号 H5开发者社区】 　　也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安
day3_php审计学习day1_
10-01
PHP支持多种数据库系统，如MySQL、PostgreSQL等，与其他Web技术（如JavaScript、HTML、CSS）结合使用，可以创建交互性强、功能丰富的Web应用。 二、PHP语法基础 1. 注释：PHP支持单行注释（//）和多行注释（/*...*/...
day07（CSS05-定位+装饰）.rar
12-01
"day07（CSS05-定位+装饰）.rar"这个压缩包包含了关于这一主题的学习资料，包括讲义、大纲和代码示例，为深入理解CSS定位和装饰提供了丰富的资源。 首先，让我们从CSS定位开始。定位在网页布局中扮演着核心角色，它...
CSS-day05.pptx
01-25
CSS-day05.pptx 本资源是关于CSS定位的知识点总结，涵盖了定位的概念、边偏移、定位模式、静态定位、相对定位、绝对定位、固定定位、堆叠顺序等方面的内容。 一、定位的概念 定位是CSS布局中的一种机制，允许元素...
CSS-day02.pptx
01-25
学习CSS复合选择器的目的是为了可以选择更准确、更精细的目标元素标签。 后代选择器 后代选择器又称为包含选择器。作用：用来选择元素或元素组的子孙后代。其写法就是把外层标签写在前面，内层标签写在后面，中间...
CSS-day03.pdf
最新发布
01-25
CSS 盒子模型、浮动、定位 在 CSS 中，盒子模型是网页布局的基础，浮动和定位是实现网页布局的重要技术。下面我们将详细介绍盒子模型、浮动和定位的知识点。...掌握盒子模型、浮动和定位的知识点是学习 CSS 的基础。
微信小程序自定义组件-loading.rar
01-03
直接解压到自己的项目中即可，需要注意图片路径,在页面中使用this.selectComponent("#loading").show(); this.selectComponent("#loading").hide(); 控制显示隐藏
微信小程序学习笔记（3）-全局的样式（app.wxss）与通用布局
从零出发
08-28 1万+
全局的样式（app.wxss）与通用布局 在小程序开发的时候，大多时候，页面的布局都是基本相同的。因此，页面布局也就形成了固定的套路。常见的布局及全局样式如下： index.wxml文件 &lt;view class='container'&gt; &lt;scroll-view scroll-y="true" class='page-body' bindscrolltolower="...
微信小程序中的全局配置和页面配置
m0_57712926的博客
10-17 2040
文章目录前言一、全局配置1. app.json配置文件2. pages数组二、修改配置文件1. 设置导航栏标题文字内容2. 设置导航栏背景色3. 设置导航栏标题颜色4. 全局开启下拉刷新功能5. 设置下拉刷新窗口的背景色6. 设置下拉loading的样式7. 设置上拉触底的距离三、tabBar1. 概念2. 组成部分3. tabBar节点的配置项四、页面配置总结 前言 今天一起看一下微信小程序中的全局配置和页面配置，页面配置和全局配置同时存在，哪一个会生效呢？一起来研究一下吧~ 一、全局配置 1. a
微信小程序，全局样式（总的样式）和局部样式（页面样式）的用法和区别。
qq_40936013的博客
11-10 1万+
首先，全局样式写在app.wxss里面, 当然，页面样式当然写在各个页面的样式里，   第二 ，调用全局样式需要在你写的类后面或前面加上你全局样式定义的类，（样式的类越排后面，优先级越高！） 比如： 这是我定义的全局样式 然后我要在局部样式里调用他   另外，备注一点， 需要样式里面的属性位于最高级，需要再属性后加  !important； 例如： ...
微信小程序开发(四) - 全局外边框配置 - json 文件
lendq的Blog
03-06 3420
注 :注释只能在wxml , js 文件中使用(&lt;!-- --&gt; , // ) 其余`json , wxss`文件都不能使用注释 JSON 文件 的作用 app.json 本质上只会更改外边框(除了网络超时) pages.json除了以上作用以外,还可以用来添加自定义wxml组件,后面会补充 项目配置文件 project.config.json 该...
微信小程序 | 全局配置和页面配置
算法与编程之美
06-15 851
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。问题描述如何在全局配置中在底部插入各种图标及文字？如何在...
微信小程序统一设置所有页面背景色
奋斗的小绿萝
07-30 2万+
app.wxss中的样式属于全局样式，可以在app.wxss中添加如下代码来统一设置所有page的样式。 page { background-color: rgba(250,250,250,0.90); }
微信小程序之设置所有页面背景颜色
热门推荐
Iterator_1993的博客
01-13 4万+
在app.wxss中使用 page{ background-color:#fff; height:100%; } 这里需要注意的是，page前面没有点。
小程序初始页面地址修改
小鱼尔呀
03-05 3146
通过修改app.json 文件的pages的顺序，更改默认地址： { "pages": [ "pages/shop/shop", "pages/index/index", "pages/logs/logs" ] }
day06（CSS04-浮动）v1.0.pdf
02-17
"day06（CSS04-浮动）v1.0.pdf" 这篇资料主要介绍了CSS布局中的几个核心概念，包括结构伪类选择器、伪元素、标准流、浮动以及清除浮动。以下是这些概念的详细说明： 1. 结构伪类选择器: 结构伪类选择器允许开发者...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值