web前端基础笔记（五）

再卷还是菜

于 2024-09-03 18:07:01 发布

阅读量190

点赞数 7

文章标签：前端笔记

本文链接：https://blog.csdn.net/xiaolin_ss/article/details/141867969

版权

css的三种引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三种引入方式</title>
    <!-- 
    1.行内样式
      缺点：当多个标签一致时，只能给某个标签设置样式，单个标签考虑行内
    2.内联样式：
      缺点--分离
      css/html代码分离
      考虑外部样式，可以两种代码分离
    3.外部样式：
      代码分离，各写各的·
    4.三种方式优先级
      行内>内联=外部（谁在下覆盖谁）      
    -->
      <!-- 外部样式引入css文件两种方法 -->
       <!-- 1.用link标签 -->
        <link rel="stylesheet" href="./2.1.2三种引入方式.css">
        <!-- 2.用函数 --不建议使用，不支持js-->
         <!-- <style> -->
            <!-- /* @import url("2.1.2三种引入方式.css") */ -->

    <!-- 内联样式 -->
     <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blanchedalmond;
        }
     </style>
</head>
<body>
    <div style="width: 200px; height: 200px; background-color: bisque;"></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

选择器

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器</title>
    <!-- 
    选择器
    为谁添加样式---格式--不同类型选择器{}
    基本选择器：
      1.标签选择器
         格式：标签名称{}
      2.类选择器
         格式：.class属性的值{}
      3.id选择器
         格式：#id属性的值{}
      4.通配符（指所有）
             格式*{}         
    -->
             <style>
                div{
                    width: 200px; height: 200px; background-color: aqua;
                }
               .div3{
                background-color: blue;
               }
               #div1{
                background-color: brown;
               }
               *{
                border: 1px solid red;
               }
             </style>
</head>
<body>
    <div>1</div>
    <div id="div1">2</div>
    <div class="div3">3</div>
</body>
</html>

关系选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关系选择器</title>
    <!-- 
    1.父子选择器---一定时父子关系不能隔代
       格式:父 >子{} 渲染子
    2.后代选择器 ---祖先下的所有后代都渲染
       格式:祖先 后代{}
    3.相邻兄弟选择器 向下渲染 !!!如果向下相邻的弟不为目标标签则不渲染!!格式:兄 +弟{} 向下渲染弟
    4.兄弟选择器
     格式:兄 ~ 弟{} 向下渲染所有的弟
    -->
<style>
    /*1.父子选择器 */
    /* div下的具备父子关系的所有标签 */
   div > *{
   background-color:red;}
/* div下的具备父子关系的所有1i标签 */
   div >li{
   background-color:rgb(28，193，22);}
/*2.后代选择器 */
   body li{
   border:1px solid rgb(87，7，236);}
/*3.相邻兄弟选择器 */
   .li2 + li{
   color: brown;}/*字体颜色*/
   #li4 + li{
   color: blue;}
/*4.兄弟选择器 */
   .li6 ~ li{
   color:coral;}
   </style>
   </head>
   <body>
  <div>
  <li>li1</li>

   <li class="li2">li2</li>
   <span>span</span>
   <li>li3</li>
   <li id="li4">li4</li>
   <li>li5</li>
   <span>span</span>
   </div>
<li class="li6">li6</li>
<span>span</span>
<li>li7</li>
<li>li8</li>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <!-- 
    1.基本属性选择器
格式:[属性名]{}
2.属性=值
格式:[属性名=“属性值"]
3.以**开头
格式:[属性名 ^=“属性值"]
4.以**结尾
格式:[属性名 $=“属性值"]
5.包含**
格式:[属性名 *="属性值"]
    -->
<style>
    /* 基本属性 */
    [class]{
        background-color: yellow;
    }
    /* 2.属性=值 */
    [class="abc"]{
        background-color: violet;
    }
    /* 以什么开头 */
    [class ^="ab"]{
        background-color: white;
    }
    /* 以什么结尾 */
    [class $="d"]{
        background-color: aqua;
    }
    /* 包含 */
    [class *="abc"]{
        background-color: black;
    }
</style>

</head>
<body>
    <li class="a" id="">li1</li>
<li class="ab" id="">li2</li>
<li class="abc" id="">li3</li>
<li class="abcd" id="">li4</li>
<li title="123">li5</li>
</body>
</html>

复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器</title>
    <!-- 
    1.交集
      格式：选择器1选择器2选择器n----满足所有选择器目标
    2.并集
      格式：选择器1，选择器2，选择器n---所有
    -->
      <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid rebeccapurple;
        }

        /* 交集 */
        .div#div1{
            background-color: yellow;
        }
        /* 并集 */
        div,span{
            color: brown;
        }
      </style>
</head>
<body>
    <diy class="div" id="div1">div1</div>
        <div class="div">div2</div>
        <span>span</span>
</body>
</html>

伪类

超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接伪类</title>
    <style>
        /* 1.网址未访问时 */
        a:link{
            color: aqua;
        }
        /* 2.已访问后 */
        a:visited{
            color: aliceblue;
        }
        /* 3.鼠标悬停时 */
        a:hover{
            color: black;
        }
        /* 4.鼠标按压时 */
        a:active{
            color: brown;
        }
    </style>
</head>
<body>
    <a href="https://tianmao.com">测试内容</a>
</body>
</html>

表单伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单伪类</title>
    <style>
        /* 密码框获取焦点 */
          [type ^= "p"]:focus{
            width: 400px;
          }
        /* 必填项 */
          [type="text"]:read-only{
            width: 400px;
          }
        /* 只读 */
         [type="text"]:required{
            width: 600px;
         }
        /* 勾选 */
          [type="checkbox"]:checked{
            width: 200px;
          }
    </style>
</head>
<body>
    <form action="">
        账号：<input type="text" required><br>
        密码：<input type="password"><br>
        昵称：<input type="text" readonly><br>
        <button type="submit">submit</button>
    </form>
    <input type="checkbox">a 
    <input type="checkbox">b 
    <input type="checkbox">c 
</body>
</html>

结构伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类</title>
      <!-- 
    1.常用结构伪类
      first-child：找当前目标元素的父元素，父元素下的第一个元素为li时则渲染
      first-of-type：找当前目标元素的父元素
                     父元素下的第一个相同类型元素则渲染
      nth-child（索引）：找父元素，父元素下的子元素（所有子元素）
                        渲染索引指定目标
                        索引--n：具体索引值，从1开始   even：偶数  odd：奇数项
       nth-of-type：找父元素，父元素下的相同类型的子元素，渲染指定索引目标元素
       not（css选择器）：不包含css选择器的其他目标项
       2.伪类链式写法                                
      -->
       <style>
        /* 测试第一和最后 */
        li:first-child{
            background-color: yellow;
        }
        li:first-of-type{
            background-color: whitesmoke;
        }
        .box>li:nth-child(odd){
            background-color: aqua;
        }
        .box>li:nth-of-type(odd){
            color: aquamarine;
        }
        /* not用法 */
        li:not([class]){
            border: 1px solid blue;
        }
        /* 链式写法 */
        .box2>li:hover:nth-child(even){
            background-color: brown;
        }
       </style>
</head>
<body>
    <p>p</p>
    <li class="class">li1</li>
    <li class="class">li2</li>
    <li class="class">li3</li>
    <li class="class">li4</li>
    <li class="class">li5</li>
    <li class="class">li6</li>
    
    <div class="box">
        <p>p</p>
        <li>li7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </div>

    <div class="box2">
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </div>
</body>
</html>

伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素</title>
    <!-- 
    格式:
       ::
     常见伪元素
     自己总结
     !伪类具备链式写法,伪元素没有链式写法
     !伪类可以可伪元素混合，但伪元素放在选择器最后
     !尝试先去用，如果不生效，删减或调换伪类的位置即可!
    -->
    <style>
        /* 鼠标悬停时追加伪元素 */
         li:hover::after{
            content: "xiaolin";
            color: blue;
            font-size: large;
         }

        /* 被光标选取时 */
        p::selection{
            background-color: chartreuse;
        }

        /* 第一行 */
        p::first-line{
            background-color: aqua;
        }  
        /* 第一个字符 */
        p:hover::first-letter{
            color: brown;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <li>usernamel:</li>
    <li>username2:</li>
    <li>username3:</li>
<p>
共同发明了Web。1994年，web真正走出实验室。
[3]从HTML被发明开始，样式就以各种形式存在。
不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。
最初的HTMI随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱,1994年哈坤·利提出了css的最初建议。而当时伯特·波斯(Bert Bos)正在设计一个名为Argo的浏览器，于是他们决定一起设其实当时在互联网界已经有过一些统一样式表语言的建议了，但cSS是第一个含有“层叠”丰意的样式表语言。在cSs中，一个文哈坤于1994年在芝加哥的一次会议上第一次提出了css的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo汶
</p>
</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <!-- 
    1.伪类：
      渲染某一行为如鼠标悬停，点击·等
    -->
      <style>
          .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
          }
          .box:hover{
            background-color: black;
          }


      </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

css样式

背景样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景样式</title>
</head>
<body>
    <style>
        div{
        width: 300px;
        height: 300px;
        /*!!!background-color:aqua;*/
        background-color: aqua
        }
        body{
        /*1.背景图片 */
        /* background-image: url("    ");*/

        /*2.平铺方式 */
        /* background-repeat:no-repeat;*/

        /*3.滚动方式 sco11随鼠标滑动而滑动 fixed定点不动 */
        /* background-attachment:fixed;*/

        /*4.背景位置 像素/百分比/上top下bootom左left右right中center */
        /* background-position:center;*/

        /*5.尺寸 cover:铺满/像素宽高/宽高的百分比*/
        /* background-size:90% 68%;*/

        /*!!!6.复合写法:平铺/滚动/url/位置 */
        background:url("../../作业/屏幕截图\ 2024-07-06\ 082203.png") center no-repeat fixed;}
        </style>
</body>
</html>

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
        body>*{
            /* 字体颜色 */
            color: aqua;
            /* 字体大小 */
             font-size: 100px;
            /* 字体斜体  italic/normal */
            font-style: normal;
            /* 字体粗细  范围100~900  lighter  normal  blod */
            font-weight: 900;
            /* 字体格式 */
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            /* 行高  块级元素独有样式 */
            line-height: 1.5; 
            /* 划线样式  line-through删除线overline上划线underline下划线 */
             text-decoration: line-through;
            /* 首行缩进 lem缩进字符数/像素/百分比---块级 */
             text-indent: 10%;
            /* 对齐方式 */
             text-align: center;
            /* 大小写转换 */
             text-transform: uppercase;
            /* 字体阴影 */
            text-shadow: 10px 10px 10px gray;
        }
    </style>
</head>
<body>
    <div>divdiv</div>
    <div>divdiv</div>
    <span>spanspan</span><br>
    <span>spanspan</span>
</body>
</html>

列表样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表样式</title>
    <style>
        li{
            /* 1.列表图标样式 none取消样式 */
            list-style: none;
            /* 2.列表图标样式 */
            /* list-style-image: url(放入图标图片) */
            /* 列表图标位置  inside--紧贴文字  outsite：文字外部 */
             list-style-position: inside;      
        }
    </style>
</head>
<body>
    <ol>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
    </ol>
</body>
</html>

内外边距样式（布局）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内外边距布局</title>
    <!-- 
    1.通配符设置外边距
    2.外边距--margin
    3.内边距--padding

    元素所占用空间为  外边距+边框+内边距+元素本身大小
    margin：auto   自适应居中
    *{margin：0px} 取消元素和导航栏微小间距
    -->
    <style>
        *{
            margin: 0px;
        }
        .box {
     width: 600px;
     height:600px;
     background-color:aquamarine;
     border:1px solid red;
      /* margin-top: 100px;
      margin-left: 100px;
      margin-right:100px;
      margin-bottom:150px;*/
      /*!!!1:上下左右 2:上下/左右 3:上/左右/下 4:上右下左 */
       /* margin: 100px 200px 300px 400px;*/
      /*通常使用方式---自适应居中 */
      /* margin: auto;*/
      /*内边距 样式使用方式和外边距完全一致*/
      padding:100px;
    }
     .inner{
      width: 200px;
      height: 100px;
      background-color:red;
      margin-right:100px;
      margin-bottom:100px;
     }      
    </style>
</head>
<body>
    <div class="box">
        <div class="inner"></div>
        <div class="inner"></div>
        </div>
</body>
</html>

边框样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框样式</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* margin:auto; */
            /* 1.边框的粗细 */
            /* border-width: 10px; */
            /* 2.边框颜色 */
            /* border-color: aqua; */
            /* 3.边框样式 */
            /* border-style: double; */
            /* 4.复合写法 */
            border: 10px solid yellow;
            /* 5.边框边角弧度 */
            border-radius: 25%;
            /* 6.边框阴影 */
            box-shadow: 10px 10px 10px grey;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

元素属性变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素属性变化</title>
    <!-- 
    1.块级元素
       换行   独占一行  且且元素宽占整个屏幕高占元素本身大小
    2.行内元素
       不换行  占空间元素内容大小   
    -->
       <style>
        div,span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: aqua;
        }
        span{
            /* 将行内元素变为块级元素，并可以设置行内元素样式为块级样式 */
            display: block;
        }
        div{
            /* 将块级元素变为行内元素，块级样式失效 */
            display: inline;
            /* 将块级元素变为行内元素，保留块级样式 */
            display: inline-block;
        }
       </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <span>span1</span>
    <span>span2</span>
</body>
</html>

定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <!-- 
    !!!定位会脱离文档流，主要用来做布局
    1.固定定位--屏幕的固定位置
         position:fixed；
    2.相对定位--难--按照原来位置定位的
         relative：position；
    3.绝对定位--按照父级元素定位的
         position: absolute; 
         >.如果父级元素没有定位，则脱离文档流，按照body定位
         >.如果父级元素有定位，则按照父级元素定位
    4.静态定位-没有定位
          position: static;
    5.文档流:按照代码的编写顺序，元素会依次自上而下自左而右的排烈
    6.定位位置方式
        定位之后设置位置 top/bottom/left/right
    -->
    <style>
        div{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            background-color: aqua;
        }
        .box3{
            /* 1.标注是什么固定定位 */
            position: fixed;
            /* 2.定位之后设置位置  top/bottom/left/right */
            bottom: 50px;
            right: 50px;
        }
        .box1{
            width: 200px;
            height: 200px;
            margin: auto;
            /* 相对定位 */
            position: relative;
            top: 100px;
            left: 100px;
        }
        .box2{
            width: 200px;
            height: 200px;
            /* static静态定位不算定位 */
            /* 父级元素定位方式：可为fixed    relative    absolute */
            position: absolute;
        }
        .box21{
            width: 100px;
            height: 100px;
            background-color: aliceblue;
            /* 测试绝对定位 */
            position: absolute;
            top: 20px;
            left: 50px;
        }
            
        
    </style>
</head>
<body>
    <div class="box3"></div>
    <!-- 测试固定定位 -->

    <!-- 测试相对定位 -->
     <div class="box1">div1</div>

     <!-- 测试绝对定位 -->
      <div class="box2">
        <div class="box21">div21</div>
      </div>
</body>
</html>

浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <!-- 
    1.浮动会脱离文档流
        早期文档主要用来环绕文字
    2.浮动主要用来布局
        结合div+css浮动布局网页
    3.浮动
       float:left--高频使用
       fioat:right        
    -->
       <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid yellow;
            background-color: aqua;
            /* 将两元素放一行 */
            /* display: inline-block; */
            float: left;
        }
       </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

布局

div两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两栏布局</title>
    <!-- 
    学习目标及学习技巧
   掌握各种布局思路及布局的代码方式---硬功夫
    1.布局
      网页的整体排版
    2.布局常见形状:
       工字型/两栏/王字型/国字型
    3.布局方式:
      >.表格布局
      >.div+浮动>.弹性盒子
      >.栅格布局
     !!!垂直排版用块级水平排版用浮动
    -->
     <style>
        div{
            height: 650px;
            float: left;
        }
        .left{
            width: 20%;
            background-color: aqua;
        }
        .right{
            width: 75%;
            margin-left: 50px;
            background-color: yellowgreen;
        }
     </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

工字布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工字布局</title>
    <style>
        div{
            height: 150px;
        }
        .div1{
            background-color: aqua;
        }
        .div2{
            height: 300px;
            width: 70%;
            margin: auto;
        }
        .div3{
            height: 200px;

        }
        .div21,.div22{
            width: 49%;
            height: 300px;
            float: left;
            margin: 2px;
            background-color: aqua;
        }
        .div31,.div32{
          float: left;
          height: 196px;
          margin: 3px;
          background-color: aquamarine;
        }
        .div31{
            width: 30%;
        }
        .div32{
            width: 68%;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
<div class="div2">
<div class="div21"></div>
<div class="div22"></div>
</div>
<div class="div3">
    <div class="div31">
</div><div class="div32">

</div>
</div>
</body>
</html>

国字布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>国字布局</title>
    <style>
        div{
            border: 1px solid red;
        }
        .div1{
            height: 140px;
        }
        .div2{
            height: 200px;
            margin-top: 20px;
           
        }
        .div3{
            height: 250px;
            margin-top: 20px;
        }
        .div4{
            height: 70px;
           margin-top: 20px;
        }
        .div11{
            height: 140px;
            width: 25%;
            float:left;
        }
        .div12{
            height: 140px;
            width: 65%;
            margin-left: 139px;
            float: left;
        }
        .div21,.div22{
            float: left;
        }
        .div21{
            height: 50%;
            width: 12%;
        }
        .div22{
            height: 50%;
            width: 12%;
           margin-top: 100px;
        }
        .div23{
            width: 25%;
            height: 200px;
            margin-left: 150px;
            float: left;
        }
        .div24{
            width: 20%;
            height: 200px;
            margin-left: 10px;
            float: left;
        }
        .div25{
            width: 15%;
            height: 80px;
            margin-top: 9px;
            margin-left: 20px;
            float: left;
        }
        .div26{
            width: 15%;
            height: 80px;
            margin-top: 15px;
            margin-left: 20px;
            float: left;
        }
            
        
    </style>
</head>
<body>
    <div class="div1">
        <div class="div11"></div>
        <div class="div12"></div>
    </div>
    <div class="div2">
        <div class="div21"></div>
        <div class="div22"></div>
        <div class="div23"></div>
        <div class="div24"></div>
        <div class="div25"></div>
        <div class="div26"></div>
    </div>
    <div class="div3"></div>
    <div class="div4"></div>
</body>
</html>

弹性盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子</title>
    <!-- 
    弹性盒子:在一行或者一列上布局
    定义方式:
     display:flex
     2.弹性盒子组成:
     flex-container:弹性盒子
     flex-items:弹性子项目
    3.弹性盒子主要名词
    x轴:水平方向
    y轴:垂直方向
     主轴:设定的轴 x轴或者y轴
     交叉轴:如果主轴为x，则交叉轴为y，如果主轴为y，则交叉轴为x4.学习目标-弾性盒子(flex-container)及弹性子项目(flex-item)的主要属性
     1>.flex-container常用属性
     2>.flex-item的常用属性
    -->
     <style>
        .flex-container{
            /* width: 800px; */
            height: 600px;
            background-color: aliceblue;
            border: 2px solid red;
            margin: auto;
            /*1.定义当前布局方式为flex */
            display: flex;
            /*2.定义主轴 x轴:row/row-reverse y轴:column/column-reverse */
            /* flex-direction:row; */
            /*3.定义换行 */
            /* flex-wrap: wrap;*/
            /*4.主轴和换行的复合写法 */
            flex-flow: row wrap;
            /*5.主轴上的对齐方式 起点:flex-start,终点:flex-end,居中:center
                 平均分布两端留白space-around 
                 平均分布两端不留白space-betweer*/
             justify-content: space-around;
             /*6.交叉轴对齐方式 (同上)stretch在交叉轴填充高度/宽度，注意使用时子项目不能加固定高度*/
             align-items: flex-end;
             /*7.多行和多列在交叉轴上的对齐方式 */
             align-content:space-around;
        }
        .flex-container>div{
            width: 100px;
            height: 100px;
            border: 1px solid rebeccapurple;
            background-color: aqua;
        }
        .flex-item3{
            /* font-size: 30px; */
            /* 1.放大比例-比例不是倍数，是可能性更高，默认是自适应 */
            /* flex-grow: 3; */
            /* 2.压缩比例 */
            /* flex-shrink: 3; */
            /* 3.没有多余空间时的固定大小 */
            /* flex-basis: 400px; */
            /* 4.复合写法 */
            flex: 0 3 400px;
            /* 5.某个子项目在交叉轴的对齐方式 */
            align-self: flex-start;
        }
        .flex-item2{
            /* flex: grow 2; */
            flex-shrink: 1;
        }
        .flex-item1{
            flex-shrink: 1;
        }
     </style>
</head>
<body>
    <!--1.弹性盒子 -->
    <div class="flex-container">
        <!--2.弹性子项目 -->
        <div class="flex-item1">flex-item1</div>
        <div class="flex-item2">flex-item2</div>
        <div class="flex-item3">flex-item3</div>
        <!-- <div class="flex-item4">flex-item4</div>
        <div class="flex-item5">flex-item5</div>
        <div class="flex-item6">flex-item6</div>
        <div class="flex-item7">flex-item7</div>
        <div class="flex-item8">flex-item8</div>
        <div class="flex-item9">flex-item9</div>
        <div class="flex-item10">flex-item10</div> -->
        </div>
</body>
</html>

栅格布局、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>栅格布局</title>
    <!-- 
    1.设置栅格布局的方式
     display:grid
    注意在使用时高度需要先设置，不然垂直方向没有高度
    2.设置模板行和列
      grid-template-columns:repeat(6,1fr);行模板设置前需要设置高度(height)
      grid-template-rows:repeat(5,1fr);
    3.跨行和跨列索引从1-n
      如果跨3列grid-column:1/4(前包后不包)
      如果跨3行grid-row:1/4(前包后不包)
    -->
      <style>
        .box{
            /* 设置布局方式 */
            display: grid;
            /* 设置行和列 */
            /* 5列 */
            /* grid-template-columns: 100px 100px 100px 100px ;
            grid-template-rows: 25% 25% 25% 25% ;
             */
             grid-template-columns: repeat(6,1fr);
             /* 5行 */
             height: 600px;
             grid-template-rows: repeat(5,1fr);
             /* 设置栅格距离 */
             grid-gap: 3px;
             
        }
        .box>*{
            border: 1px solid red;
        }
        .box>div:nth-child(1){
            grid-column: 1/7;
            background-color: aqua;
        }
        .box>div:nth-child(4){
            background-color: beige;
            /* grid-column: 3/5;
            grid-row: 2/5; */
            /* 复合写法 */
            grid-area: 2/3/5/5;
        }
        .box>div:nth-child(15){
            background-color: beige;
            grid-column: 1/7;
        }
      </style>


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

模板布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板布局</title>
    <!-- 
    1.自定义标签
    2.分析网页的语义性
    -->
    <style>
    .box{
        display: grid;
        grid-template-columns: 50% 50%;
        height: 650px;
        grid-template-rows: repeat(6,1fr);
        gap: 10px;
        /* 模板布局地图 */
        grid-template-areas: 
                          "H H"
                          "I M"
                          "N M"
                          "S S"
                          "S S"
                          "F F"           
        ;
    }
    /* 使用模板 */
     H{grid-area: H;}
     I{grid-area: I;}
     N{grid-area: N;}
     M{grid-area: M;}
     S{grid-area: S;}
     F{grid-area: F;}

     .box>*{
        background-color: aqua;
     }
</style>
</head>
<body>
    <div class="box">
       <H>H</H>
       <N>N</N>
       <M>M</M>
       <I>I</I>
       <S>S</S>
       <F>F</F>


    </div>
</body>
</html>

css动画

media查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>media查询</title>
    <!-- 
    根据设备不同显示不同样式
        print打印机
         screen屏幕
        tv电视-弃用
     2.根据屏幕尺寸不同显示不同样式
     3.格式:
      @media{}
    -->
      <style>
        /* 屏幕 */
        @media screen {
            .div1{font-size: 20px;color: rgb(34, 245, 107);}
        }
        /* 打印机 */
        @media print {
            .div1{font-size: 200px ; color: aqua;}
        }
        /* 多个设备 */
         @media screen,print {
            .div1{text-shadow: 10px 10px 10px grey;}
         }
        /* 所有设备   打印机没有背景 */
         @media all {
            .div{background-color: beige;}
         }
        /* 屏幕大小范围变色 */
        @media only screen and (min-width:900px){
            body{background-color: rgb(244, 42, 42);}
        }
        @media only screen and (min-width:400px) and (max-width:900px){
            body{background-color: rgb(121, 31, 223);}
        }
        @media only screen and (max-width:400px){
            body{background-color: rgb(244, 240, 236);} 
        }   
      </style>
</head>
<body>
    <div class="div1"> 测试内容</div>
</body>
</html>

自定义字体

<!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>
        @font-face {
            /* 自定义字体名字 */
            font-family: myfont;
            /* 加载本地字体包 */
            src: url(./ZiHun17Hao-MengQuGuoDongTi/ZiHun17Hao-MengQuGuoDongTi-2.ttf);
        }
        span{
            font-family: myfont;
            font-size: 80px;
            color: aqua;
        }

    </style>
</head>
<body>
    <span>我喜欢你   I LOVE YOU</span>
</body>
</html>

过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
    1.触发条件
    2.改变的属性
    3.过渡时间
    -->
    <Style>
        .box:hover{
            width: 400px;
            height: 400px;
        }
     .box{
        width: 200px;
        height: 200px;
        background-color: aqua;
        border: 1px solid red;
        margin-top: 100px;
        margin-left: 100px;
        /* 1复合写法 */
        /* 只给时间其他默认 */
         /* transition: 2s; */
        /* 属性加过渡时间 */
         /* transition: width 1s,height 2s; */
        /* 全复合 */
         transition: all 1s linear 1s;
        /* 2.过渡时间 */
          /* transition-duration: 3s; */
        /* 3.过渡属性  直接写属性名称，多个属性用空格隔开。所有属性用all */
          /* transition-property: width height; */
        /* 4.过渡时间曲线  linear均匀  ease：（默认）先慢再快再慢  ease-in缓慢开始  ease-out缓慢结束 */
           /* transition-timing-function: ease-in; */
        /* 5.延时 */
        /* transition-delay: 3s; */

     }   
    </Style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

变换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变换</title>
    <!-- 
    1.平移
     transform:translate(x坐标增量(像素),y坐标增量(像素));
    2.旋转
    transform：rotate（180deg）
    3.缩放
     transform：scale（3）
    4.倾斜
    transform：skew（90deg）
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: rgb(13, 117, 208);
            text-align: center;
            margin-left: 200px;
            transition: all 1s linear;
        }
        .b:hover{
            transform:translate(300px,100px) ;
        }
        .c:hover{
            transform: rotate(180deg);
        }
        .d:hover{
            transform: scale(3);
        }
        .e:hover{
            transform: skew(90deg);
        }
    </style>
</head>
<body>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
    <div class="e">e</div>
</body>
</html>

动画

<!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>
        div{
    margin: auto;
    /*2.使用动画名称 */
    animation-name:myframe;
    /*3.时间 */
    animation-duration:1s;
    /* 4.时间曲线 */
     animation-timing-function: linear;
    /*5.延时 */
    animation-delay:1s;
    /*6.播放次数 次数/infinite永久播放 */
    animation-iteration-count:6;
   /*7.方向 reverse反向/alternate正向往返/alternate-reverse反向往返*/
    animation-direction:alternate-reverse;
    /*8.复合写法 */
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        }

     body{
        animation: backgroundchange 2s linear  infinite  alternate;
     }



        /* 自定义动画 */
        @keyframes myframe {
            /*从0-1 */
     from{
     background-color:aqua;
     transform: translate(300px,0px) rotate(3600deg);
     width: 0px;
     height: 0px;
    }

     to{
     background-color:rgb(24, 225, 44)
      width： 200px;
      height: 200px;
        }
    }
    @keyframes backgroundchange {
     /*可以通过百分比设置多个样式变化 */
        0% {background-color:bisque;}
        25%{background-color:aqua;}
        50% {background-color:blue;}
        100% {background-color:blueviolet;}
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景渐变</title>
    <style>
       div{
        height: 600px;
        border: 1px solid red;
        /* 1基础渐变 */
        background-image: linear-gradient(red,yellow,blue);
        /* 2.带方向的渐变 */
        background-image: linear-gradient(to right,red,blue,yellow);
        background-image: linear-gradient(to right bottom,red,blue,yellow);
        /* 3.多颜色渐变 */
        background-image: linear-gradient(to right bottom,red,blue,yellow,green,pink);
        /* 4.带有角度 */
        background-image: linear-gradient(70deg,red,blue,yellow);
        /* 5.带有透明度 */
        background-image: linear-gradient(to right,rgba(0,0,40,0.5),rgba(255,100,80,0.5));
        /* 6.重复的线性渐变 */
        background-image: repeating-linear-gradient(to right,yellow,red 7%,pink 7%);
        /* 7.镜像渐变 */
        background-image: radial-gradient(red,green,yellow);
    }






    </style>
</head>
<body>
    <div></div>
</body>
</html>