【无标题】

最新推荐文章于 2025-05-27 09:41:17 发布

原创最新推荐文章于 2025-05-27 09:41:17 发布 · 1.5k 阅读

46 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css

该博客围绕CSS展开，详细介绍了CSS的引入方式、选择器（如基础选择器、兄弟选择器等）及其优先级，还涉及字体、文本样式、背景设置、元素分类与显示模式等基础内容，同时讲解了过渡、动画、2D和3D转换、弹性布局等高级特性。

三.day03

（1）行内样式

内部样式：通过style标签实现 style标签要写在head标签中

<title>行内样式</title>
    <style>
        /*内部样式：通过style标签实现
        style标签要写在head标签中
        */
        /*语法：选择器:(样式设计)*/
        h1{
            color: yellow;
        }
    </style>
    <link rel="stylesheet" href="css/a.css">
</head>
<body>
    <h1>css样式表的三种用法</h1>
    <p style="color: sienna;" >
        任何标签都有style属性，<br>
        可以通过style属性来实现样式的修改<br>
        属性：值<br>
        不推荐使用
    </p>
    <p>
        项目中使用外部样式：<br>
        1.创建外部css <br> 
        2.通过link标签引入外部样式
    </p>

（2）选择器优先级

<title>选择器优先级</title>
    <style>
        *{
            color: red;
        }
        P{
            color: yellow;
        }
        *{
            color: yellowgreen;
        }
        #{
            color: darkblue;
        }
    </style>
</head>
<body>
    <p class="a" id="b">
        优先级：
        通配符--标签---类--
    </p>

（3）兄弟选择器

相邻兄弟选择器，只选择紧跟的元素，只选择下边的第一个

<title>兄弟选择器</title>
    <style>
        /*相邻兄弟选择器，只选择紧跟的元素，只选择下边的第一个*/
        .li1+li{
            color: red;
        }
        /*通用兄弟选择器
        会选择所有后边的对应兄弟元素
        */
        
    </style>

(4)类选择器

<title>类选择器</title>
    <style>
        /*class使用.代表*/
        .p1{
            color: aquamarine;
        }
        .p2{
            color: chartreuse;
        }
        .red{
            /* 背景颜色*/
            background-color: red;
        }
    </style>
</head>
<body>
    <p class="p1 red">1</p>
    <p class="p2">2</p>
    <h2 class="p1">asas</h2>

（5）css的引入

1.行内样式：使用style属性设置样式，不推荐使用（项目维护非常麻烦）

2.内嵌式：使用style标签，style标签写在head标签中，练习时使用

3.外联式：使用外部的css文件，并通过link标签进行引入，推荐使用

优先级：就近原则，谁离元素近，谁生效

<title>css的引入</title>
    <link rel="stylesheet" href="css/css.css">
    <style>
        /* 选择器{属性：值} */
        h2{
            color: yellowgreen;
        }
    </style>
    
</head>

<body>
    <p style="color: red;">
        1.行内样式：使用style属性设置样式，不推荐使用（项目维护非常麻烦）
    </p>
    <h2>
        2.内嵌式：使用style标签，style标签写在head标签中，练习时使用
    </h2>
    <h2>
        3.外联式：使用外部的css文件，并通过link标签进行引入，推荐使用
    </h2>
    <p>
        优先级：就近原则，谁离元素近，谁生效
    </p>

(6)字体

1.字体大小：

粗细 100~900

400正常 normal

700 加粗 bold

2.字体样式：

是否倾斜

3.字体系列：

“华文彩云” “黑体” “宋体” “楷体” “仿宋”

<title>字体</title>
    <style>
        p {
            /*字体大小*/
            font-size: 30px;
            /*粗细 100~900   
            400正常  normal
            700 加粗 bold
            */
            font-weight: bold;
            /* 字体样式（是否倾斜）*/
            font-style: italic;
            /*字体系列*/
            font-family: "华文彩云", "黑体","宋体";


        }
        p1{
            /*复合属性（简写，连写)
            font:style weight size family;
            */
            font: italic bold 30px 华文彩云;
        }
    </style>

(7)id选择器

<title>id选择器</title>
    <style>
        #a{
            color: red;
        }
    </style>
</head>
<body>
    <p id="a">aa <span class="S1\">bb</span>aa</p>
    <p id="b">bbbbbb</p>

(8)结构伪类选择器

选择器匹配属于其父元素的特定类型的首个子元素的每个元素

 <title>结构伪类选择器</title>
    <style>
            /*选择器匹配属于其父元素的特定类型的首个子元素的每个元素*/
        .a>div:first-of-type{
            color:red
        }
        /*最后一个*/
        .a>div:last-of-type{
            color: rgb(63,172,16);
        }
        .a:nth-child(3){
            background-color: aqua;
        }
        .a:nth-last-child(3){
            background-color:rgb(63,172,16);
        }
        table tr:nth-child(odd){
            background-color: aqua;
        }
        table tr:nth-child(even){
            background-color: rgb(63,172,16);
        }
        .a2 p:nth-child(-n+2){
            font-size: 50px;
        }
        .a2 p:nth-child(n*3){
            color: red;
        }
    </style>

（8）基础选择器

1.标签选择器：找到所有的某一类型的标签

2.类选择：在标签上添加class属性，属性值就是类名

3.id选择器：一个标签只有一个id，一个id只能选中一个标签

优先级：id>class>标签

    <title>基础选择器</title>
    <style>
        p{
            color: aqua;
        }
        .p1{
            color: green;
        }
        .fs{
            font-size: 50px;
        }
        #p3{
            color: rgb(128, 64, 0);
        }
        *{
            /* 背景颜色 */
            background-color: tan;
        }
    </style>
</head>
<body>
    <p>1.标签选择器：找到所有的某一类型的标签</p>
    <p>例如：p{}  ---  所有的p标签</p>
    <p class="p1 fs">
        2.类选择：在标签上添加class属性，属性值就是类名
    </p>
    <p class="p1">
        类名可以重复，一个标签可以有多个类名
    </p>
    <p id="p3">
        3.id选择器：一个标签只有一个id，一个id只能选中一个标签
    </p>
    <h2>优先级：id>class>标签</h2>

(9)样式的优先级

优先级：就近原则

谁离标签进，谁生效

<title>样式的优先级</title>
    <style>
        p{
            color: yellowgreen;
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p style="color: red;">这是pl</p>
    <p>这是p2</p>
    <p>
        优先级：就近原则<br>
        谁离标签进，谁生效 
    </p>

(10)文本

首行缩进

文本的对齐方式

行高

文本装饰

<title>文本</title>
    <style>
        /*首行缩进*/
        p{
            text-indent: 2em;
            /*文本的对齐方式*/
            text-align: center;
            /*行高*/
            line-height-step: 40px;
        }
        a{
            /*文本装饰：去除下划线*/
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p>
     <a href="#">亚斯娜还要把好吧好吧</a> 储备库活动日唬唬人的季节
    吉安府成绩年年去机场接你进行电脑检测
    而安抚今年房价男女阿尔军舰日女均衡基尔湾和发你骄傲而未能发挥据
    你房间哇唔发努瓦夫环保餐具就妇女九年成本为何被废除哇
    那附近嗯啊符合不符合好吧哈子北京飞机妇女节结合帮我发货
    给你居住不会被发布后就会功夫不负奶茶均方差
    产能吧就很烦并不符合九年降为均拒绝封测别人家除非你觉悟你方便纠缠你你
    放技能就未必符合并不会成为不好办呀重复包含文本范围和一百何必当初为何不惧报复不会发恶霸发表回复
    <img src="img/微信图片_20230808170909.jpg" alt="">
</p>

（11）文本样式

文本方向

首行缩进

控制字母capitalize 首字母大写 lowercase全小写 uppercase全大写

空白处理 nowrap不允许换行

单词距离

行高

水平对齐方式

字符间距

文本装饰

去除下划线

图片水平居中

 <title>文本样式</title>
    <style>
        p{
            color: red;
        }
        .p{
            /* 文本方向 */
            /* direction: rtl; */
            /* 首行缩进 */
            text-indent: 2em;
            /* 控制字母capitalize 首字母大写 lowercase全小写 uppercase全大写 */
            text-transform: uppercase;
            /* 空白处理  nowrap不允许换行*/
            white-space: nowrap;
            /* 单词距离 */
            word-spacing: 50px;

        }
        .p1{
            height: 100px;
            background-color: aqua;
            /* 行高:把高度设置成父元素的高度，可以实现单行文本垂直居中 */
            line-height: 100px;
            /* 水平对齐方式 */
            text-align: center;
            /* 字符间距 */
            letter-spacing: 10px;
            /* 文本装饰 */
            text-decoration: underline;
        }
        a{
            text-decoration: none; /* 去除下划线 */
        }
        .p2{
            text-align: center;/* 图片也可以水平居中 */
        }
    </style>
</head>
<body>
    <a href="#">这是a标签</a>
    <p class="p">边框CH二姑父H不会v不i方法JNC就SBV二u我补偿你心目中v好的v额为负</p>
    <p class="p1">
        还不吃饭WGYR下班后我参考BU的国有企业从v高蛋白
    </p>
    <p class="p2">
        <img src="img/微信图片_20230808170909.jpg" alt="">
    </p>

（12）通配符

<title>通配符</title>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
    <h1>asasasa</h1>
    <h2>asdasdasd</h2>
    <p>asdasdasd</p>
    <b>asdasdasd</b>
    <i>asdasdsad</i>

四.day04

（1）并集

<title>并集</title>
    <style>
        .p1{
            color: red;
        }
        .a1{
            color: red;
        }
        .p1,.a1{
            color: red;
        }
    </style>
</head>
<body>
    <p class="p1">这是p1</p>
    <a href="#" class="a1">这是a1</a>
    <p class="p3">这是p3</p>

（2）并集，交集

 <title>并集，交集</title>
    <style>
        /* 男 88 */
        .s1,
        .s8{
            background-color: aqua;
        }
        /* 男胖子88 */
        .s1.s3.s8{
            color: yellow;
        }
        /* 龙：女胖子88 */
        .s2.s3.s8{
            color: green;
        }
        /* 李：男，88都可以 */
        .s1,.s8{
            font-size: 100px;
        }
    </style>
</head>
<body>
    <p>
        1.男 s1  2.女 s2 
        3.胖子 s3  4.瘦子 s4
        5.富婆 s5  6.穷鬼 s6
        7.18 s7  8.88 s8
    </p>
    <span class="s1 s3 s8">男，胖子，88</span>
    <span class="s2 s3 s8">女，胖子，88</span>
    <span class="s1 s3 s7">男，胖子，18</span>
    <span class="s2 s4 s5 s7">女，瘦子，富婆，18</span>

（3）背景

1.背景图

2.背景平铺

① repeat:默认值，水平垂直都重复

② no-repeat：不重复

③ repeat-x：水平重复

④repeat-y：垂直平铺

3.背景尺寸

①contain:吧把图像图像扩展至最大尺寸，高度最大化

②cover：把背景图像扩展到足够大，宽度最大化

③px：宽高

<title>背景</title>
    <style>
        .p1{
            /*背景颜色*/
            background-color: #e71515;
        }
        body{
            /*背景图像*/
            background-image: url(img/微信图片_20230808170909.jpgSS);
            /*背景平铺
            repeat:默认值，水平垂直都重复
            no-repeat：不重复
            repeat-x：水平重复
            repeat-y：垂直平铺
            */
            background-repeat: no-repeat;
            /*背景尺寸
             contain:吧 把图像图像扩展至最大尺寸，高度最大化
             cover：把背景图像扩展到足够大，宽度最大化
             px：宽 高
             */
             background-size: 500px 500px;
             /*背景位置，定位：左 上*/
             background-position: 500px 500px;
             /*背景简写
             推荐顺序：background：color image repeat position
             */
             background: yellowgreen url(img/微信图片_20230808170909.jpg)no-repet 600px 100px；
             
        }
    </style>
</head>
<body>
    <p class="p1">背景颜色</p>

（4）元素的分类

块级元素：div，p，h，table，form，ul，li，dd，dl…

1.独占一行。

（一行当中不能同时存在两个元素，p和h1不能在同一行）

2.可以设置高和宽

行内元素：a,b,s,u,i,ins,del,span…

1.t同一行可以设置多个不会独占一行

2.没法设置高和宽，高和宽默认是内容的高宽

<title>元素的分类</title>
</head>
<body>
    <div class="d">
        块级元素：div，p，h，table，form，ul，li，dd，dl.... <br>
        1.独占一行。
        （一行当中不能同时存在两个元素，p和h1不能在同一行）<br>
        2.可以设置高和宽
    </div>
    <div class="d1">
        div就是一个最典型的块，
        div就是一个盒子，用来装其他盒子/其他元素<br>
        div，块高和宽可以设置，宽默认100%高，默认是内容元素的高度
    </div>
    <div class="d2">
        行内元素：a,b,s,u,i,ins,del,span..... <br>
        1.t同一行可以设置多个不会独占一行<br>
        2.没法设置高和宽，高和宽默认是内容的高宽<br>
        <a href="#">aaa</a>
        <a href="#">bbb</a>
    </div>
    <div class="d3">
        img属于什么元素？行内块<br>
        可以设置高和宽，一行可以有多个ZXZ
    </div>

（5）元素的显示模式

<title>元素的显示模式</title>
    <style>
        a{
            display: block;
            height: 300px;
            width: 300px;
            background-color: red;
        }
        p{
            background-color: aliceblue;
            display: inline;
        }
        .a1{
            display: inline-block;
            height: 100px;
            width: 100px;
            background-color: aqua;
            text-align: center;
            line-height: 100px;
        }
        .a1:hover{
            background-color: green;
        }
        .b{
            /* 隐藏 */
            display: none;
        }
    </style>

（6）div标签

1.div是一个块元素

2.默认没有高度

3.默认宽是父元素的100%

4.div的作用：通常和css一起使用，div+css实现页面的布局

<title>div标签</title>
    <style>
        .a{
            background-color: rebeccapurple;
            height: 400px;
            width: 400px;
        }
    </style>
</head>
<body>
    <div class="a">
        1.div是一个块元素
        2.默认没有高度
        3.默认宽是父元素的100%
        4.div的作用：通常和css一起使用，div+css实现页面的布局
    </div>
    <div class="b"></div>

（7）hover伪类选择器

鼠标悬停

未访问的链接

激活之后（点击之后）

已访问的链接

<title>hover伪类选择器</title>
    <style>
        /*鼠标悬停*/
        h1:hover{
            color: red;
            background-color: aqua;
            text-decoration: underline;
        }
        /*未访问的链接*/
        .a2:link{
            color: red;
        }
        /*激活之后（点击之后）*/
        .a1:active{
            text-decoration: none;
        }
        /*已访问的链接*/
        .a3:visited{
            color: gray;
        }

    </style>
</head>
<body>
    <h1>这是h1,移入变色</h1>
    <a href="and.html" class="a1">百度</a><br>
    <a href="jiaoji.html" class="a2">交集</a>
    <a href="son.html" class="a3">子代</a>
    <a href="chriden.html" class="a4">后代</a>

（8）高级选择器

 <title>高级选择器</title>
    <style>
        /* 后代选择器 */
        /* li标签中所有的span标签 */
        li span{
            color: red;
        }
        li>span{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <p>你好
                <span>世界</span>
            </p>
            <span>王饼饼是好人</span>
        </li>
        <li>
            <p>你好<span>世界</span></p>
            <span>王饼饼是好人</span>
        </li>
        <li>
            <p>你好<span>世界</span></p>
            <span>王饼饼是好人</span>
        </li>
    </ul>

（9）子代选择器

<title>子代选择器</title>
    <style>
        /*把p中span中的文字改成30px*/
        p span{
            font-size: 30px;
        }
        /*把sa改成红色*/
        /*子选择器*/
        p>span{
            color: red;
        }    
      
    </style>
</head>
<body>
    <p>
        <span>sa</span>asdasd斯蒂芬斯蒂芬
        <b>嗖嗖嗖 <span>但是是</span>阿萨德</b>
    </p>
    <span>asss</span>

五.day05

1.边框

边框颜色

<title>边框</title>
    <style>
        .d {
            height: 300px;
            width: 300px;
            background-color: beige;
            /*边框的颜色*/
            border-color: rgb(9, 126, 229);
            border-left-color: red;
            border-top-color: yellow;
            border-right-color: green;
            border-bottom-color: yellowgreen;
            /*上右下左*/
            border-color: black red yellow green;
            /*上 左右 下*/
            border-color: black red green;
            /*上下 左右*/
            border-color: red green;
            /*边框的宽度*/
            border-width: 10px;
            /*边框的样式:实线,虚线等...*/
            border-style: solid;
            /*简写:宽度 样式 颜色*/
            border: 2px solid red;
            border-left: 4px double hotpink;
        }
        .d1{
            height: 200px;
            width: 200px;
            background-color: blueviolet;
            /*上下左右*/
            border-radius: 10px;
            /*左上右下  右上左下*/
            border-radius: 10px 20px;
            /*左上  左下右上 右下*/
            border-radius: 10px 20px 40px;
            /*左上 右上 右下 左下*/
            border-radius: 10px 20px 40px 80px;
            /*变成圆*/
            border-radius: 50%;
        }
        .d2{
            /*左半圆*/
            height: 400px;
            width: 200px;
            background-color: aqua;
            border-radius: 200px 0px 0px 200px;
        }
    </style>
</head>

<body>
    <div class="d">
        这就是一个盒子
    </div>
    <div class="d1"> 
        圆角边框
    </div>
    <div>

    </div>

（2）盒子模型

边框宽度

颜色

边框样式

单独设置

圆角边框

50%会变成圆

<title>盒子模型</title>
    <style>
        .a{
            height: 300px;
            width: 500px;
            background-color: aqua;
            /* 边框宽度 */
            border-width: 10px;
            /* 颜色 */
            border-color: cadetblue;
            /* 边框样式 */
            border-style: solid;
            /* 单独设置 */
            border-left-width: 20px;
            border-top-style: double;
            border-bottom-color: red;
            /* 上下，左右 */
            border-color: red yellow;
            /* 上，左右，下 */
            border-color: red yellow green;
            /* 上右下左 */
            border-color: red yellow green yellowgreen;
            border-width: 5px 10px 20px 40px;
            /* 简写 */
            border: 1px solid red;
            border-top: 2px dotted yellow;
        }
        .b{
            height: 300px;
            width: 300px;
            background-color: blue;
            /* 圆角边框 */
            border-radius: 10px 20px 40px 80px;
            /* 50%会变成圆 */
            border-radius: 150px;
        }
        .c{
            width: 150px;
            height: 300px;
            background-color: green;
            border-radius: 150px 0 0 150px;
        }
        
        .d{
            width: 300px;
            height: 150px;
            background-color: blueviolet;
            border-radius: 0px 0px 150px 150px;
        }
        .e{
            height: 300px;
            width: 500px;
            border: 1px solid red;
            /* 内边距（填充） 内容和盒子边框的距离*/
            padding: 10px;
            padding-left: 30px;
            /* 水平居中 */
            margin: 0 auto;
        }
        .e img{
            height: 300px;
            width: 500px;
        }
        .f{
            height: 250px;
            width: 400px;
            background-color: brown;
            margin: 0 auto;
        }
        .g{
            height: 250px;
            width: 400px;
            background-color: rgb(30, 255, 0);
            /* 外边框 */
            margin: 100px;
            /* 单独 */
            margin-left: 0px;
        }
        p span{
            margin: 0 100px;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e">
        <img src="img/微信图片_20230808170909.jpg" alt="">
    </div>
    <div class="f"></div>
    <div class="g"></div>
    <p>
        农村JBW而伏虎JB
        <span>饼饼饼</span>
        比较BuGB就变成W5
    </p>

（3）margin外边距

<title>margin外边距</title>
    <style>
        .d1,.d2{
            height: 60px;
            width: 300px;
            background-color: aqua;
        }
        .d2{
            background-color: aquamarine;
        }
        .d1{
            padding-left: 50px;
        }
        .d2{
            margin-left: 50px;
        }
        a{
            display: inline-block;
            height: 50px;
            width: 70px;
            background-color: bisque;
            /*调节盒子的距离*/
            margin-left: 20px;
        }
        .d3,.d4{
            height: 400px;
            width: 200px;
            background-color: aqua;
        }
        .d3{
            border-radius: 200px 0px 0px 200px;
            margin-top: 100px;
        }
        .d4{
            background-color: blue;
            border-radius: 0px 200px 200px 0px;
            margin-left: 200px;
            margin-top: -400px;
        }
        .d5{
            height: 400px;
            width: 800px;
            background-color: aquamarine;
            /*margin-left：400px；*/
            /*自动水平居中，必须有宽度*/
        }
    </style>
</head>
<body>
    <div class="d1">
        <p>asassa</p>
    </div>
    <div class="d2">
        <p>sasass</p>
        <a href="#">1</a>
        <a href="#">1</a>
        <a href="#">1</a>
        <a href="#">1</a>
        <a href="#">1</a>
    </div>
    <div class="d3"></div>
    <div class="d4"></div>

（4）内边距/填充

<title>内边距/填充</title>
    <style>
        img，
        .d{
            height: 300px;
            width: 300px;
        }
        .d{
            background-color: blue;
            border: 1px solid rge(85,9,207);
            /*内边距/填充*/
            padding: 10px;
        }
        .d1{
            height: 20px;
            width: 323.2px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="d">
        <img src="img/微信图片_20230808170909.jpg">
    </div>

六.day06

（1）伪元素

content：添加的内容

<title>伪元素</title>
    <style>
        .a::after{
            /* content: 添加的内容 */
            content: "添加的新文字";
        }
        /* .b::before{
            content: url(img/微信图片_20230808170909.jpg);
            display: block;
            height: 300px;
            width: 300px;
        } */
        div{
            height: 300px;
        }
        .c::after{
            content: "";
            display: block;
            height: 300px;
            width: 300px;
            background-image: url(img/微信图片_20230808170909.jpg);
            background-size: 300px 300px;
        }
    </style>
</head>
<body>
    <div class="a">aaaa</div>
    <div class="b">bbbbb</div>
    <div class="c">cccccc</div>

（2）清除浮动

<title>清除浮动</title>
    <style>
        .a{
            border: 1px solid red;
                height: 300px;
            /* 超出隐藏 */
            overflow: hidden;
        }
        /* 伪元素清除法 */
        /* .a::after{
            content: ;
            display: block;
            clear: both;
        } */
        .b{
            height: 300px;
            width: 300px;
            background-color: rgb(103, 164, 217);
            float: left;
        }
        .c{
            height: 300px;
            width: 300px;
            background-color: aquamarine;
            float: left;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b"></div>
        <div class="c"></div>
    </div>

（3）nav导航

1.去除内边框和外边距

2.去除样式

3.横过来

4.调整距离

5.垂直居中

<title>nav导航</title>
    <style>
        .nav{
            height: 50px;
            background-color: pink;
        }
        ul{
            height: 50px;
            width: 800px;
            /* 1.去除内边距和外边距 */
            padding: 0;
            margin: 0 auto;
            /* 2.去除样式 */
            list-style: none;
        }
        li{
            /* 3.横过来 */
            float: left;
            /* 调整距离 */
            padding: 0 35px;
            /* 垂直居中 */
            line-height: 50px;
            font-size: 16px;
        }
        a{
            color: azure;
            text-decoration: none;
        }
        li:hover{
            background-color: #080;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
         <li><a href="">链接1</a></li>
         <li><a href="">链接2</a></li>
         <li><a href="">链接3</a></li>
         <li><a href="">链接4</a></li>
         <li><a href="">链接5</a></li>
         <li><a href="">链接6</a></li>
        </ul>
    </div>

（4）结构伪类选择器

<title>结构伪类选择器</title>
    <style>
        /* ul中的li标签的第一个 */
        ul li:first-child{
            background-color: #cc1e1e;
        }
        /* ul中的li标签的第一个 */
        ul li:last-child{
            background-color: #1ecc3e;
        }
        /* ul中的li标签的第二个 */
        ul li:nth-child(2){
            background-color: #6c1ecc;
        }
        /* ul中的li标签的倒数第二个 */
        ul li:nth-last-child(2){
            background-color: #1e9ecc;
        }
        /* 隔行变色 */
        /* 偶数：2n even */
        .a p:nth-child(2n){
            background-color: cadetblue;
        }
        /* 奇数：2n+1 2n-1  odd */
        .a p:nth-child(odd){
            background-color: aqua;
        }
        /* 前2个 */
        .a p:nth-child(-n+2){
            color: #1ecc3e;
        }
        /* 后2个 */
        .a p:nth-last-child(-n+2){
            color: deeppink;
        }
        /* 从第2个开始 */
        .a p:nth-child(n+2){
            font-size: 30px;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="a">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>

七.day08

（1）表单

form:所有需要提交的数据都需要放在form标签中

action:把数据提交给哪一个服务器

method:提交方式

get：url可见，不安全，有的小限制

post：url不可见，安全，没有大小限制

name：提交数据的名字，所有的表单元素都需要有

value：默认值

placeholder：输入提示

<title>表单</title>
</head>
<body>
    <!-- form:所有需要提交的数据都需要放在form标签中
        action:把数据提交给哪一个服务器
        method:提交方式
        get：url可见，不安全，有的小限制
        post：url不可见，安全，没有大小限制
    -->     
    <form action="#" method="get" enctype="multipart/form-data">
        <!-- 
            name：提交数据的名字，所有的表单元素都需要有
            value：默认值
            placeholder：输入提示
         -->
        文本框：<input type="text" name="user"><br>                                                           
        密码框：<input type="password" name="pwd" placeholder="请输入密码"><br>
        <!-- 两个/多个input，name值必须一致
            checked：默认选中
         -->
        单选：<input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女">女<br>
        多选：
        <input type="checkbox" name="game" value="永劫无间爱你" checked>永劫无间爱你
        <input type="checkbox" name="game" value="元神">元神
        <input type="checkbox" name="game" value="蛋仔">蛋仔
        <input type="checkbox" name="game" value="节奏大师">节奏大师<br>
        <!-- 文件提交必须使用post，
            需要在form标签中添加属性 enctype="multipart/form-data"
            multiple 可以同时选择多个文件
        -->
        文件：<input type="file" name="files" multiple><br>
        邮箱：<input type="email" name="email"><br>
        电话：<input type="tel" name="tel"><br>
        url：<input type="url" name="url"><br>
        日期：<br>
        年月日<input type="date" name="date"><br>
        年月日时分秒utc时间<input type="datetime" name="dt"><br>
        年月日时分秒：本地时间<input type="datetime-local" name="dtl"><br>
        时分秒<input type="time" name="time"><br>
        一年的第几周<input type="week" name="week"><br>            
        月<input type="month" name="mouth"><br>

        <!-- max最大值  min最小值 step：步长 -->
        数字：<input type="number" name="shuzi"
        max="100" min="0" step="0.5"><br>

        滑块：<input type="range" name="rang" max="42" min="30" step="0.1"><br>

        颜色：<input type="color" name="color"><br>






        <input type="button" value="普通按钮">
        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">
        <!-- 图片按钮 -->
        <input type="image" src="img/47140f55290e224b.jpg">


    </form>

（2）其他表单

下拉列表

带输入框的下拉

分组下拉

<title>其他表单</title>
</head>
<body>
    <form action="#" method="get">
        <!-- value可以省略，省略后默认值为option中间的值
        默认选中第一个
        selected默认选中
        -->
        下拉列表：
        <select name="s">
            <option value="北京">北京</option>
            <option>南京</option>
            <option>东京</option>
            <option selected>西天</option>
        </select><br>
        <!-- 
            input中需要list属性，值和datalist中的id值一致
         -->
        带输入框的下拉：
        <input type="text" name="a" list="sr">
        <datalist id="sr">
            <option>中国</option>
            <option>小日本</option>
            <option>小西八</option>
            <option>小猴子</option>
        </datalist><br>
        分组下拉：
        <!-- 每一个optgroup都是一个分组
        label是分组提示
        -->
        <select name="b">
            <optgroup label="菠萝">
                <option>情歌</option>
                <option>波波</option>
            </optgroup>
            <optgroup label="苹果">
                <option>小辣椒</option>
                <option>黑苹果</option>
            </optgroup>
        </select> <br>
        <!-- cols：每行显示多少字
        rows：多少行
        多行文本域可以自由调整大小
        -->
        多行文本域：
        <textarea name="s" cols="30" rows="10"></textarea>
        <hr>
        性别：
        <label>
            男<input type="radio" name="sex" value="男">
        </label>
        <label>
            女<input type="radio" name="sex" value="女">
        </label><br>
        <label for="aaa">姓名：</label>
        <input type="text" name="name" id="aaa">
        <br>
        <button>提交按钮</button>
        <button type="button">普通按钮</button>
        <button type="reset">重置按钮</button>
        <button type="submit">提交按钮</button>
        <!-- 图片按钮 -->
        <button><img src="img/47140f55290e224b.jpg"></button>
    </form>

八.day09

（1）transition过渡

<title>transition过渡</title>
    <style>
        .a{
            height: 300px;
            border: 1px solid red;
        }
        .a1{
            height: 300px;
            width: 300px;
            background-color: green;
            position: absolute;
            left: 0px;
            /* 过渡属性要写在没有改变之前的样式中 */
            transition: all 20s ease-out;
        }
        .a:hover .a1{
            left: 1200px;
            background-color: pink;
            /* height: 0px;
            width: 0px; */
            background-image: url(../day09/img/logo.png);
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="a1"></div>
    </div>

九.day11

（1）animation

<title>animation</title>
    <style>
        .a{
            height: 300px;
            border: 1px solid red;
            position: relative;
        }
        .a1{
            height: 300px;
            width: 300px;
            background-color: aqua;
            position: absolute;
            left: 0;
            top: 0;
            /* 名称 运行时间 速度 延迟执行时间 播放次数 反向播放*/
            animation: a 3s linear 1s infinite alternate;
        }
        .a:hover .a1{
            /* 暂停 */
            animation-play-state: paused;
        }
        @keyframes b {
            50%{
                left: 1200px;
                background-color: chartreuse;
                height: 0;
                width: 0;
                top: 300px;
            }
            100%{
                left: 0;
                height: 300px;
                width: 300px;
                background-color: aqua;
            }
        }
        @keyframes a {
            form{
                left: 0;
            }
            to{
                left: 1200px;
                background-color: chartreuse;
                height: 0;
                width: 0;
                top: 300px;
            }
            
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="a1"></div>
    </div>

（2）颜色渐变

<title>颜色渐变</title>
    <style>
        .a{
            height: 300px;
            background-image: linear-gradient(yellow,green,yellowgreen);
        }
    </style>
</head>
<body>
    <div class="a"></div>

（3）旋转

<title>旋转</title>
    <style>
        body{
            height: 400px;
            border: 1px solid red;
        }
        .a1{
            height: 200px;
            width: 200px;
            background-color: aqua;
            transform-origin: right bottom;
            transition: all 3s;
        }
        .a:hover .a1{
            transform: rotate(3600deg);
        }
        .b{
            height: 200px;
            border-bottom: 1px solid black;
        }
        .b img{
            height: 200px;
            width: 200px;
            border-radius: 50%;
            transform: all 3s inherit;
        }
        .b:hover img{

            transform: translateX(1200px) rotate(3600deg) inherit;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="a1">王饼饼</div>
    </div>
    <div class="b">
        <img src="img/tyre.png" alt="">
    </div>

（4）缩放

<title>缩放</title>
    <style>
        .a{
            height: 800px;
            width: 500px;
            border: 1px black solid;
            margin: 0 auto;
            overflow: hidden;
        }
        .a img{
            height: 800px;
            width: 500px;
            transition: all 1s;
        }
        .a:hover img{
            transform: scale(0.8);
        }
    </style>
</head>
<body>
    <div class="a">
        <img src="img/zhangshunag.jpg">
    </div>

（5）2D转换

<title>2D转换</title>
    <style>
        .a{
            height: 800px;
            border: 1px solid red;
            position: relative;
        }
        .a1{
            height: 300px;
            width: 300px;
            background-color: aqua;
            position: absolute;
            
            left: 50%;
            top: 50%;
            /* -50%元素自身的-50% */
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="a1"></div>
    </div>

十.day12

（1）3D转换

<title>3D转换</title>
    <style>
        .a{
            height: 800px;
            border: 1px solid red;
            perspective: 1200px;
        }
        .a1{
            height: 300px;
            width: 300px;
            background-color: yellow;
            margin-bottom: 20px;
            transition: all 2s;
        }
        .a:hover .a1{
            transform: rotateX(30deg) ;
        }
        .a2{
            height: 300px;
            width: 300px;
            margin: 0 auto;
            background-color: rgb(0, 255, 64);
            transform: translateX(100px) translateY(100px) translateZ(300px);
            transform: translate3d(100px,100px,-300px);
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="a1">
            就产生变化一会把数据重复维护保持FUI我<br>
            变成摄入我不会不都是覅清华附近<br>
            济南警方抓捕绝对是<br> 
            不出事的话发布完成<br>
             喝茶吧YG u切不可H还不得不在看
        </div>
        <div class="a2"></div>
    </div>

<title>3d2.0</title>
    <style>
        .a{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /* 让子元素处于3d空间 */
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(45deg);
            margin: 100px auto;
            position: relative;
            animation: a 15s linear infinite;
        }
        .a div{
            height: 200px;
            width: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .a1{
            background-image: url(../day12/img/微信图片_20231212165346.jpg);
            /* background-color: blue; */
            transform: rotateX(90deg) translateZ(200px);
        }
        .a2{
            background-image: url(../day12/img/微信图片_20231212165354.jpg);
            /* background-color: blueviolet; */
            transform: rotateX(-90deg) translateZ(200px);
        }
        .a3{
            background-image: url(../day12/img/微信图片_20231212165401.jpg);
            /* background-color: rgb(194,9,33); */
            transform: rotateY(-90deg) translateZ(200px);
        }
        .a4{
            background-image: url(../day12/img/微信图片_20231212165408.jpg);
            /* background-color: cadetblue; */
            transform: rotateY(90deg) translateZ(200px);
        }
        .a5{
            background-image: url(../day12/img/微信图片_20231212165415.jpg);
            /* background-color: rgb(214, 29, 202); */
            transform: rotateY(360deg) translateZ(200px);
        }
        .a6{
            background-image: url(../day12/img/微信图片_20231212165422.jpg);
            /* background-color: rgb(109, 160, 95); */
            transform: rotateY(180deg) translateZ(200px);
        }
        /* .a:hover{
            transform: rotateY(-3600deg) translateZ(4500deg);
        } */
        @keyframes a{
            100%{
                transform: rotateX(-3600deg) rotateY(4500deg);
            }
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="a1"></div>
        <div class="a2"></div>
        <div class="a3"></div>
        <div class="a4"></div>
        <div class="a5"></div>
        <div class="a6"></div>
    </div>

（2）动画

动画名称执行时间延迟时间动画执行完毕时状态执行曲线

<title>动画</title>
    <style>
        .a{
            height: 600px;
            border: 1px solid red;
            position: relative;
        }
        .a1{
            height: 100px;
            width: 100px;
            background-color: aqua;
            position: absolute;
            left: 0;
            top: 0;
            /* 动画名称 执行时间 延迟时间 动画执行完毕时状态 执行曲线 */
            animation: a1 10s linear infinite alternate;
        }
        .a2{
            height: 100px;
            width: 100px;
            background-color: rgb(0, 255, 153);
            position: absolute;
            left: 0;
            bottom: 0;
            animation: a2 10s linear infinite alternate;
        }
        @keyframes a1 {
            0%{
                left: 0;
                top: 0;
                background-color: aqua;
            }
            25%{
                left: 325px;
                top: 500px;
                background-color: rgb(208, 255, 0);
            }
            50%{
                left: 650px;
                top: 0;
                background-color: darkorange;
            }
            75%{
                left: 950px;
                top: 500px;
                background-color: magenta;
            }
            100%{
                left: 1400px;
                top: 0;
                background-color: royalblue;
            }
        }
        @keyframes a2 {
            0%{
                left: 0;
                bottom: 0;
                background-color: aqua;
            }
            25%{
                left: 325px;
                bottom: 500px;
                background-color: rgb(208, 255, 0);
            }
            50%{
                left: 650px;
                bottom: 0;
                background-color: darkorange;
            }
            75%{
                left: 950px;
                bottom: 500px;
                background-color: magenta;
            }
            100%{
                left: 1400px;
                bottom: 0;
                background-color: royalblue;
            }
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="a1"></div>
        <div class="a2"></div>
    </div>

（3）3d导航

    <title>3d导航</title>
    <style>
        ul{
            list-style: none;
            padding: 0;
            margin: 50px auto;
        }
        li{
            float: left;
            height: 40px;
            width: 80px;
            text-align: center;
            transform-style: preserve-3d;
        }
        a{
            text-decoration: none;
            display: block;
            height: 40px;
            line-height: 40px;
            width: 80px;
            position: absolute;
        }
        li a:first-child{
            background-color: aqua;
            transform: rotateX(0deg) translateZ(20px);
            transition:  all 1s linear;
        }
        li a:last-child{
            background-color: antiquewhite;
            transform: rotateX(-90deg) translateZ(0px);
            transition: all 1s linear;
        }
        li:hover a:first-child{
            transform: rotateX(90deg) translateZ(20px);
        }
        li:hover a:last-child{
            transform: rotateX(0deg) translateZ(20px);
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">首页</a>
            <a href="#">index</a>
        </li>
        <li>
            <a href="#">首页</a>
            <a href="#">index</a>
        </li>
        <li>
            <a href="#">首页</a>
            <a href="#">index</a>
        </li>
        <li>
            <a href="#">首页</a>
            <a href="#">index</a>
        </li>
        <li>
            <a href="#">首页</a>
            <a href="#">index</a>
        </li>
        <li>
            <a href="#">首页</a>
            <a href="#">index</a>
        </li>
    </ul>

（4）翻转

<title>翻转</title>
    <style>
        .a{
            background-color: aqua;
            height: 300px;
            width: 300px;
            transition: all 1s;
        }
        .a:hover{
            transform: skew(30deg,45deg);
        }
    </style>
</head>
<body>
    <div class="a">
        变成蝙蝠白血病都不会玩<br>
        核算成本和费用七二九<br>
    </div>

十一.day13

（1）百分比，流式布局

 <title>百分比，流式布局</title>
    <style>
        ul{
            list-style: none;
            position: fixed;
            bottom: 0;
            left: 0;
            padding: 0;
            margin: 0;
        }
        ul li{
            float: left;
            height: 100px;
            width: 20%;
            text-align: center;
        }
        ul li img{
            height: 60px;
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="img/car.png" alt=""></li>
        <li><img src="img/classify.png" alt=""></li>
        <li><img src="img/index.png" alt=""></li>
        <li><img src="img/jd.png" alt=""></li>
        <li><img src="img/login.png" alt=""></li>
    </ul>

（2）flex布局

给父元素加上弹性布局：

把父元素变成了弹性容器

父元素的直接子元素会变成弹性盒子

弹性盒子默认按照主轴方向排列相当于添加了一个浮动

主轴居中

空白间距均分在弹性盒子两侧

空白间距均分在相邻盒子之间

弹性盒子与容器之间间距相等

<title>flex布局</title>
    <style>
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
            /* 给父元素加上弹性布局：
            把父元素变成了弹性容器 
            父元素的直接子元素会变成弹性盒子
            弹性盒子默认按照主轴方向排列相当于添加了一个浮动
            */
            display: flex;
            /* 从终点开始排列 */
            justify-content: flex-end;
            /* 主轴居中 */
            justify-content: center;
            /* 空白间距均分在弹性盒子两侧 */
            justify-content: space-around;
            /* 空白间距均分在相邻盒子之间 */
            justify-content: space-between;
            /* 弹性盒子与容器之间间距相等 */
            justify-content: space-evenly;

        }
        img{
            height: 40px;
        }
    </style>

（3）订单

<title>订单</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="css/base1.css">
    <link rel="stylesheet" href="css/xtx.css">
</head>
<body>
    <div class="top">
        <i class="iconfont"></i>
        <p>填写订单</p>
    </div>
    <div class="shdz box">
        <i class="iconfont icon-location"></i>
        <div>
            <p><span>林立</span> <b>12345678901</b></p>
            <p>
                <span>北京市</span>  <span>海淀区</span> 
                <span>中关村软件园</span> <span>信息科技大厦1号楼410#</span>   
            </p>
        </div>
        <b class="iconfont icon-more"></b>
    </div>
    <div class="psfs box">
        <div>
            <p>配送方式</p>
            <p>顺丰快递</p>
        </div>
        <div>
            <p>配送方式</p>
            <p>希望尽快发货</p>
        </div>
        <div>
            <p>支付方式</p>
            <p>顺丰快递</p>
            <i class="iconfont icon-more"></i>
        </div>
    </div>

十二.day14

（1）垂直布局

<title>垂直布局</title>
    <style>
        .a{
            display: flex;
            border-bottom: 2px solid black;
            /* 改变主轴方向:垂直 */
            flex-direction: column;
            /* 侧轴居中 */
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="a">
        <img src="img/media.png" alt="">
        <p>媒体</p>
    </div>

（2）waper

<title>waper</title>
    <style>
        ul{
            list-style: none;
            /* width: 100%; */
            padding: 0;
            margin: 0;
            display: flex;
            text-align: center;
            /* 允许弹性盒子换行 */
            flex-wrap: wrap;
            /* 主轴对齐 */
            /* justify-content: space-evenly; */
            /* 行的对齐 */
            align-content: space-around;
        }
        li{
            padding: 5px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="img/media.png" alt="">
            <p>sdaa</p>
        </li>
        <li>
            <img src="img/media.png" alt="">
            <p>sdaa</p>
        </li>
        <li>
            <img src="img/media.png" alt="">
            <p>sdaa</p>
        </li>
        <li>
            <img src="img/media.png" alt="">
            <p>sdaa</p>
        </li>
        <li>
            <img src="img/media.png" alt="">
            <p>sdaa</p>
        </li>
        <li>
            <img src="img/media.png" alt="">
            <p>sdaa</p>
        </li>
        <li>
            <img src="img/media.png" alt="">
            <p>sdaa</p>
        </li>
        <li>
            <img src="img/media.png" alt="">
            <p>sdaa</p>
        </li>
    </ul>

十三.day15

（1）rem单位

<title>rem单位</title>
    <style>
        /* 1rem=1html-font-size */
        html{
            font-size: 16px;
        }
        .a{
            height: 10rem;
            width: 20rem;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="a"></div>

（2）rem用法

<title>rem用法</title>
    <style>
        /* rem的宽度是视口宽度的1/10 */
        @media(width:375px){
            html{
                font-size: 37.5px;
            }
        }
        @media(width:1024px){
            html{
                font-size: 102.4px;
            }
        }
        @media(width:414px){
            html{
                font-size: 41.4px;
            }
        }
        .a{
            height: 10rem;
            width: 20rem;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="a">
        王饼饼
    </div>