搜索到
47
篇与
的结果
-
50、响应式布局 1、媒体查询—媒体类型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h1{ width: 600px; height: 400px; line-height: 400px; background-image: linear-gradient(30deg,red,yellow,green); margin: 0 auto; text-align: center; font-size: 100px; color: white; text-shadow: 0 0 10px black; } /* 只有打印机或打印预览才应用的样式 */ @media print{ h1{ background: transparent; } } /* 只有在屏幕上才应用的样式 */ @media screen{ h1{ font-family: "翩翩体-简"; } } /* 一直应用的样式 */ @media all{ h1{ color: red; } } </style> </head> <body> <h1>新年快乐</h1> </body> </html>2、媒体特征 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } h1{ height: 200px; background-color: gray; line-height: 200px; text-align: center; font-size: 100px; } /* 等于 */ @media(width:800px){ h1{ background-color: antiquewhite; } } /* 小于等于700px时 */ @media (max-width:700px){ h1{background-color: green;} } /* 大于等于900 */ @media(min-width:900px){ h1{ background-color: orange; } } /* 根据屏幕大小 */ /* @media(device-width){ } */ </style> </head> <body> <h1>你好啊</h1> </body> </html>3、运算符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } h1{ height: 200px; background-color: gray; line-height: 200px; text-align: center; font-size: 100px; } /* 且运算符 */ /* @media(min-wdith:700px) and (max-width:800px){ h1{ background-color: orange; } } */ /* 或运算符 */ @media screen and (min-width:700px) and (max-width:800px){ h1{ background-color: orange; } } /* 否定运算符 */ @media not screen{ h1{ background-color: orange; } } /* 肯定运算符 */ @media only screen{ h1{ background-color: orange; } } </style> </head> <body> <h1>你好啊</h1> </body> </html> -
49、伸缩盒模型 1、伸缩容器-伸缩项目 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1、伸缩容器-伸缩项目</title> <style> .outer{ width: 1000px; height: 600px; background-color: #888; /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; } .inner{ width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner3{ display: flex; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner inner3"> <div>a</div> <div>b</div> <div>c</div> </div> </div> </body> </html>2、主轴方向<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>2、主轴方向</title> <style> .outer{ width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向 水平从左到右 默认 */ flex-direction: row; /* 调整主轴方向 水平从右侧到左，默认 */ /* flex-direction: row-reverse; */ /* 调整主轴方向，垂直从上到下 */ /* flex-direction: column; */ /* 调整主轴方向，垂直从下到上 */ flex-direction: column-reverse; } .inner{ width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> </div> </body> </html3、主轴换行方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3、主轴换行方式</title> <style> .outer{ width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向 水平从左到右 默认 */ flex-direction: row; /* 主轴换行方式,不换行，默认值 */ /* flex-wrap: nowrap; */ /* 主轴换行方式，换行 */ flex-wrap: wrap; /* 主轴换行方式，反向换行 */ /* flex-wrap: wrap-reverse; */ } .inner{ width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> </body> </html>4、flex-flow <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>4、flex-flow</title> <style> .outer{ width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向 水平从左到右 默认 */ /* flex-direction: row; */ /* 主轴换行方式，换行 */ /* flex-wrap: wrap; */ flex-flow: row wrap; } .inner{ width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> </body> </html>5、主轴对齐方式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>5、主轴对齐方式</title> <style> .outer{ width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向 水平从左到右 默认 */ flex-direction: row; /* 主轴换行方式，换行 */ flex-wrap: wrap; /* 主轴的对齐方式,主轴的起始位置 */ /* justify-content: flex-start; */ /* 主轴的对齐方式,主轴的结束位置 */ /* justify-content: flex-end; */ /* 主轴的对齐方式,主轴的中间位置 */ /* justify-content: center; */ /* 主轴的对齐方式：项目均匀的分布在一行中，项目与项目的距离是项目距离边缘的二倍 */ /* justify-content: space-around; */ /* 主轴的对齐方式：项目均匀的分布在一行中，项目与项目的距离是相等的，项目距离边缘没有距离 */ /* justify-content: space-between; */ /* 主轴的对齐方式，项目均匀分布在一行 */ /* justify-content: space-evenly; */ } .inner{ width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> </body> </html>6、侧轴对齐 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>6、侧轴对齐</title> <style> .outer{ width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向 水平从左到右 默认 */ flex-direction: row; /* 主轴换行方式，换行 */ flex-wrap: wrap; /* 主轴的对齐方式,主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式 侧轴的起始位置对齐*/ /* align-items: flex-start; */ /* 侧轴的对齐方式 侧轴的结束位置对齐*/ /* align-items: flex-end; */ /* 侧轴的对齐方式 侧轴的中间位置对齐*/ /* align-items: center; */ /* 侧轴的对齐方式 侧轴的中间位置对齐(字体基线对齐)*/ /* align-items: baseline; */ /* 侧轴的对齐方式，拉伸到父容器（前提：伸缩项目不能给高度），默认*/ align-items: stretch; } .inner{ width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner2{ height: 300px; } .inner3{ height: 100px; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> </body> </html>7、侧轴对齐方式-多行<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>7、侧轴对齐方式-多行</title> <style> .outer{ width: 1000px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向 水平从左到右 默认 */ flex-direction: row; /* 主轴换行方式，换行 */ flex-wrap: wrap; /* 主轴的对齐方式,主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式（多行）侧轴的起始位置对齐 */ /* align-content: flex-start; */ /* 侧轴的对齐方式（多行）侧轴的结束位置对齐 */ /* align-content: flex-end; */ /* 侧轴的对齐方式（多行） 侧轴中间位置*/ /* align-content: center; */ /* 侧轴的对齐方式（多行） 伸缩项目之间的距离是相等的，且是边缘距离的2倍*/ /* align-content: space-around; */ /* 侧轴的对齐方式（多行） 伸缩项目之间的距离是相等的，且边缘没有距离*/ /* align-content: space-between; */ /* 侧轴的对齐方式（多行） 伸缩项目之间的距离是相等的*/ /* align-content: space-evenly; */ /* 侧轴的对齐方式（多行）拉伸（别给高）默认 */ /* align-content: stretch; */ } .inner{ width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner2{ height: 300px; } .inner3{ height: 100px; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> <div class="inner">11</div> </body> </html>
-
48、多列布局 1、多列布局案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>1、多列布局案例</title> <style> .outer{ width: 1000px; margin: 0 auto; /* 直接指定列数 */ column-count: 5; /* 指定每一列的宽度来计算 */ /* column-width: 250px; */ /* 调整列间距 */ /* column-gap: 50px; */ /* 每一列边框的风格虚线 */ column-rule-style: dashed; /* 每一列的边框颜色*/ column-rule-color: red; /* 边框相关复合属性 */ column-rule:1 ; } h1{ column-span: all; text-align: center; font-size: 50px; } </style> </head> <body> <div class="outer"> <h1>《震惊！坤哥来学前端了！》</h1> <p>...</p> </div> </body> </html>
-
47、动画 1、基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基本使用</title> <style> .outer{ width: 1000px; height: 100px; border: 1px solid black; } /* 定义一个动画（定义一组关键帧）--第一种方式 */ @keyframes wangyoudong { /* 第一帧 */ from{ } /* 最后一针 */ to{ transform: translate(900px); background-color: red; } } /* 定义一个动画（定义一组关键帧）--第二种方式 */ @keyframes wangyoudong2{ /* 第一帧 */ 0%{ } /* 29%{ background-color: red; } 48%{ background-color: orange; } 88%{ background-color: yellow; } */ /* 最后一帧 */ 100%{ transform: translate(900px) rotate(360deg); background-color: purple; border-radius: 50%; } } .inner{ width: 100px; height: 100px; background-color: deepskyblue; /* 应用动画到元素 */ animation-name: wangyoudong2; /* 动画持续的时间 */ animation-duration: 3s; /* 动画的延迟时间 */ animation-delay: 0.2s; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>2、其他属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>其他属性</title> <style> .outer{ width: 200px; height: 1000px; } /* 定义一个动画（定义一组关键帧）--第一种方式 */ @keyframes wangyoudong2 { /* 第一帧 */ from{ } /* 最后一针 */ to{ transform: translateY(900px) rotate(360deg); background-color: purple; border-radius: 50%; } } .inner{ width: 200px; height: 200px; /* 应用动画到元素 */ animation-name: wangyoudong2; /* 动画持续的时间 */ animation-duration: 4s; /* 动画的延迟时间 */ animation-delay: 0.2s; /* ****其他属性--start***** */ /* 设置动画的方式 */ animation-timing-function: linear; /* 动画播放的次数 */ animation-iteration-count: infinite; /* 动画的方向 */ animation-direction: alternate; /* 动画以外的状态（不发生动画的时候在哪里） */ /* animation-fill-mode: forwards; */ /* 动画的播放状态 */ } .outer:hover .inner{ animation-play-state: paused; } </style> </head> <body> <div class="outer"> <img src="/周渝皓的个人网站/tp/love.png" class="inner"> </div> </body> </html>3、动画的复合属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画复合属性</title> <style> .outer{ width: 1000px; height: 100px; border: 1px solid black; } /* 定义一个动画（定义一组关键帧）--第一种方式 */ @keyframes wangyoudong2 { /* 第一帧 */ from{ } /* 最后一针 */ to{ transform: translate(900px) rotate(360deg); background-color: purple; border-radius: 50%; } } .inner{ width: 100px; height: 100px; background-color: deepskyblue; animation: wangyoudong2 3s 0.5s linear 2 alternate-reverse forwards; } .outer:hover .inner{ /* 暂停单独用 */ animation-play-state: paused; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>动画与过渡的区别 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画与过渡的区别</title> <style> .outer{ width: 1000px; height: 200px; border: 1px solid black; } .inner{ width: 100px; height: 100px; } /* 用过度实现inner1跑到右边去 */ .inner1{ background-color: orange; transition: 3s linear; } .outer:hover .inner1{ transform: translate(900px); } /* 用动画实现inner2跑到右边去 */ @keyframes atzhou{ 0%{ } 100%{ transform: translate(900px); } } .inner2{ background-color: green; animation:atzhou 3s linear forwards; } </style> </head> <body> <div class="outer"> <div class="inner inner1">过渡</div> <div class="inner inner2">动画</div> </div> </body> </html>
-
46、过渡 1、基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>过渡基本使用</title> <style> .box1{ width: 200px; height: 200px; background-color: orange; opacity: 0.5; /* 设置哪个属性需要过渡效果 */ transition-property: height,width; /* 让所有能过渡的属性过渡 */ /* 设置过渡的时间 */ /* 分别设置 */ /* transition-duration: 1s,5s; */ /* 一个 */ transition-duration: 1s; } .box1:hover{ height: 400px; width: 400px; background-color: green; transform: rotate(45deg); box-shadow: 0px 0px 20px black; opacity: 1; } </style> </head> <body> <div class="box1"></div> </body> </html>2、高级使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>过渡高级使用</title> <style> .outer{ width: 1300px; height: 900px; border: 1px solid black; } .outer:hover .box{ width: 1300px; } .box{ width: 200px; height: 100px; /* 让所有能过渡的属性，都过渡 */ /* 设置哪个属性需要过渡效果 */ transition-duration: all; /* 设置一个时间，所有人都用 */ /* 一个 */ transition-duration: 5s; /* 过渡延迟 */ /* transition-delay: 2s; */ } .box1 { background-color: skyblue; /*平滑过渡 transition-timing-function: ease; */ } .box2 { background-color: orange; transition-timing-function: linear; } .box3 { background-color: gray; transition-timing-function: ease-in; } .box4 { background-color: tomato; transition-timing-function: ease-out; } .box5 { background-color: green; transition-timing-function: ease-in-out; } .box6 { background-color: purple; transition-timing-function: step-start; } .box7 { background-color: chocolate; transition-timing-function: step-end; } .box8 { background-color: skyblue; transition-timing-function: steps(20,end); } .box9 { background-color: black; transition-timing-function: cubic-bezier(.88,1.03,.78,1.24); color: white; } </style> </head> <body> <div class="outer"> <div class="box box1">ease(慢，块，慢)</div> <div class="box box2">linear(匀速)</div> <div class="box box3">ease-in(先慢后快)</div> <div class="box box4">ease-out(块，慢)</div> <div class="box box5">ease-in-out(慢，块，慢)</div> <div class="box box6">step-start(不考虑过渡时间，直接终点)</div> <div class="box box7">step-end(考虑过渡时间，无过渡效果，过渡时间到了以后，瞬间到达)</div> <div class="box box8">steps()(分布过渡)end慢一下，start快一下</div> <div class="box box9">cubic-bezier.com贝塞尔曲线</div> </div> </body> </html>3、过渡的复合属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复合属性</title> <style> .outer{ width: 1000px; height: 100px; border: 1px solid black; } .inner{ width: 100px; height: 100px; background-color: orange; transition: 3s all linear; } .outer:hover .inner{ width: 1000px; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>4、案列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .outer{ width: 400px; height: 225px; position: relative; overflow: hidden; } .mask{ width: 400px; height: 225px; background-color: black; color: white; position: absolute; top: 0; left: 0; text-align: center; line-height: 225px; font-size: 100px; opacity: 0; transition: 1s linear all; } .outer:hover .mask{ opacity: 0.5; } .outer:hover img{ transform: scale(1.6) rotate(20deg); } img{ transition: 0.5s linear; } </style> </head> <body> <div class="outer"> <img src="./tp/djsy2.jpg" alt=""> <div class="mask">桐人</div> </div> </body> </html>
