bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
历届学生/熊坤/2019-01-21/index.html Normal file
View File

@@ -0,0 +1,10 @@
<a href="笔记.zip"> 笔记.zip </a>
<a href="https://www.baidu.com/" target="" title="我是title属性，哈哈"> 我是a标签，其实就是一个超链接2 </a>
<img src="test.jpg" alt="抱歉，图片无法加载">
<input type="text" placeholder="请输入账号">
<button>登录</button>

BIN
历届学生/熊坤/2019-01-21/test.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 249 KiB

10
历届学生/熊坤/2019-01-21/笔记.txt Normal file
View File

@@ -0,0 +1,10 @@
<具体的标签> 要显示在浏览器上给用户看的字 </具体的标签>
1：a 标签：超链接
href : a标签想要跳转的网址
target : 告诉浏览器是否在新标签卡打开 href的地址
title : 当鼠标悬浮在a标签上的时候显示一个提示文字

60
历届学生/熊坤/2019-02-01/index.html Normal file
View File

@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html第二课</title>
</head>
<body>
<a href="https://www.baidu.com/" target="_blank">我是百度</a>
<img src="https://cn.vuejs.org/images/logo.png" alt="抱歉，图片无法加载"/>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<p>我是文章的<br>正文内容！！！</p>
<button type="submit">登录</button>
<br/>
<input type="text" placeholder="请输入用户名" value="编码猿"/>
<br/>
<input type="password" placeholder="请输入密码"/>
<br/>
<input type="date" >
<br/>
<input type="datetime-local">
<br/>
<input type="file" >
<br/>
<input type="color" disabled>
<br/>
<input type="number" readonly placeholder="请输入手机号" autofocus>
<br/><br/>
<h2>1. (单选题) 请问1+1等于几？</h2>
<input type="radio" name="aw"> A: 1 <br/>
<input type="radio" name="aw"> B: 2 <br/>
<input type="radio" name="aw"> C: 3 <br/>
<input type="radio" name="aw"> D: 4 <br/>
<br/>
<h2>2. (多选题) 你为什么想要学习编程？</h2>
<input type="checkbox" name="aw"> A: 因为我闲着蛋疼 <br/>
<input type="checkbox" name="aw"> B: 感觉这个行业很酷 <br/>
<input type="checkbox" name="aw"> C: 啊？我不知道啊，随便选的 <br/>
<input type="checkbox" name="aw"> D: 我喜欢编程，对他很感兴趣 <br/>
<input type="hidden" value="喜欢">
</body>
</html>

47
历届学生/熊坤/2019-02-01/任务.txt Normal file
View File

@@ -0,0 +1,47 @@
1: 认识html的基本结构
1：html 标签，网站最外层的父级标签，其他所有标签都必须包含在这里面
2：head 标签，网站头部标签，head里面的代码不会被用户看见，是给浏览看的
3：body 标签，网站的主体内容标签，这里面的代码会被用户看到。
2：html的常用标签及其作用和功能
学习参考地址：http://www.runoob.com/tags/html-reference.html
meta：元数据标签，它类似一个工具箱，里面有很多能实现不同功能的代码，具体不需要强制记忆，直接百度即可
参考地址：https://blog.csdn.net/weixin_39717076/article/details/80332134
<meta charset="UTF-8"> 设置中文编码，防止浏览器中文乱码
title：设置网站标签卡的标题
题外话：前端开发最讨厌IE浏览器(6,7,8,9)，因为前端的很多新特效或者说是js代码，老旧的IE浏览器都不支持
img: 显示图片用的
a: 显示一个超链接，可以从一个地方跳转到另外一个地方
h1 ~ h6：标题标签，用于设置文章标题，规律是数字越小显示效果越大！
一般用于，网站文章中来设置标题，具体使用哪一个根据你的实际需求决定！！！
p：在文章中显示一个段落(文章的正文)
特点：
1：自带上下的文章边距
2：它是一个 块级标签
button: 用于在网页上显示一个按钮
br : 实现网站内容或者元素的换行 相当于回车键的作用
input: 让用户可以在页面上输入内容信息，根据其type属性的不同可以实现不同的功能
还可以组合其它标签实现更多功能
学习地址：http://www.runoob.com/tags/tag-input.html
3：提前说一下css

93
历届学生/熊坤/2019-02-20/index.html Normal file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="shortcut icon" href="https://assets2016.bmob.cn/img/favicon.ico" type="image/x-icon"/>
</head>
<body>
<a href="https://www.baidu.com">超链接</a>
<img src="test/demo.jpg" alt="图片无法显示" srcset="">
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<input type="text" placeholder="输入账户">
<input type="password" placeholder="输入密码">
<input type="date">
<input type="file">
<input type="number" placeholder="请输入手机号">
<input type="color">
<input type="hidden" value="test/demo.jpg">
<input type="radio" name="answer">
<input type="radio" name="answer">
<input type="checkbox" name="answer1">
<input type="checkbox" name="answer1">
<input type="checkbox" name="answer1">
<input type="checkbox" name="answer1">
<br/>
<h2>请输入账号：
<input type="text" placeholder="账号">
</h2>
<h2>请输入密码：
<input type="password" autofocus placeholder="密码">
</h2>
<h2>请选择头像：
<input type="file">
</h2>
<h2>请选择你的兴趣爱好</h2>
<input type="checkbox"> 骑车 <br>
<input type="checkbox"> 打游戏 <br>
<input type="checkbox"> 逛街，看电影 <br>
<input type="checkbox"> 游泳 <br>
<h2>你喜欢我的这个网站吗？</h2>
<input type="radio" name="youlike"> 喜欢 <br>
<input type="radio" name="youlike"> 不喜欢 <br>
<input type="radio" name="youlike"> 一般 <br>
<input type="radio" name="youlike"> 还好 <br>
<input type="button" value="提交注册信息">
<ul>
<li>
1：第一章html
<ul>
<li>html概念</li>
<li>html基本组成</li>
<li>html标签</li>
</ul>
</li>
<li>2：第二章css</li>
<li>3：第三章js</li>
</ul>
<ol>
<li>第一章html</li>
<li>第二章css</li>
<li>第三章js</li>
</ol>
<video src="http://www.runoob.com/try/demo_source/movie.mp4" controls loop muted autoplay></video>
</body>
</html>

BIN
历届学生/熊坤/2019-02-20/test/demo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

40
历届学生/熊坤/2019-02-20/笔记.txt Normal file
View File

@@ -0,0 +1,40 @@
1: 一个html文件里面，在最外层必须要包含 <html></html>
所有的代码都必须包含在这里面。
2：body 可视区域，一般需要在页面上显示给用户看的代码，必须包含在body中
3：head 一般放在head标签里面的内容是不想给用户看的，给浏览器看，完成一些浏览器的设置或者网站的默认设置
标签：
1，meta：元数据标签，里面包含了很多一大堆的其他功能代码
<meta charset="UTF-8"/> 定义网站使用什么编码
参看网站：https://blog.csdn.net/qq_16559905/article/details/51182085
2: h1 ~ h6 ，数字越小显示效果越大，数字越大显示效果越小
3: img 显示一个图片
4: <br/> 换行
5: ul li : 无序列表 一般开发过程中 ul 用的比较多
ol li : 有序列表
适用场景：一般用于做网站的导航菜单，新闻列表
标签学习地址：http://www.runoob.com/tags/html-reference.html
下节课：
form表单
音频标签
textarea
等。。。。

390
历届学生/熊坤/2019-02-28/demo.html Normal file
View File

@@ -0,0 +1,390 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
margin: 0;
background: lightblue;
}
/*哆啦A梦*/
.doa{
position: relative;
top: 100px;
}
.head{
margin: 0 auto;
width: 400px;
height: 350px;
background: #008ee3;
position: relative;
border-radius: 50% 50% 25% 25% / 55% 55% 45% 45%;
}
.head:hover .face>div:first-child div{
left: 0px;
transition: all 1s;
}
.head:hover .face>div:first-child div div{
left: 0px;
transition: all 1s;
}
.head:hover{
}
.face{
width: 310px;
height: 260px;
background: snow;
border-radius: 50% 50% 25% 25% / 55% 55% 45% 45%;
position: relative;
top: 90px;
left: 45px;
}
/*左眼眶*/
.face>div:first-child{
width: 80px;
height: 100px;
border-radius: 50%;
border:2px #000 solid;
background: snow;
float: left;
position: relative;
top:-40px;
left: 71px;
z-index: 50;
}
/*右眼眶*/
.face>div:last-child{
width: 80px;
height: 100px;
border-radius: 50%;
border:2px #000 solid;
background: snow;
float: left;
position: relative;
top:-40px;
left: 71px;
z-index: 50;
}
/*左眼珠1*/
.face>div:first-child div{
width: 20px;
height: 25px;
background: #000;
border-radius: 50%;
position: absolute;
top: 45px;
left: 60px;
}
/*左瞳孔*/
.face>div:first-child div div{
width: 10px;
height: 10px;
background: #ffffff;
border-radius: 50%;
position: absolute;
top: 7px;
left: 10px;
}
/*右眼珠*/
.face>div:last-child div{
width: 20px;
height: 25px;
background: #000;
border-radius: 50%;
position: absolute;
top: 45px;
}
/*右瞳孔*/
.face>div:last-child div div{
width: 10px;
height: 10px;
background: #ffffff;
border-radius: 50%;
position: absolute;
top: 7px;
}
.nose{
width: 30px;
height: 30px;
border-radius: 50%;
background: #c70000;
position: absolute;
top: 130px;
left: 50%;
margin-left: -15px;
z-index: 10;
}
.nose div{
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
background: #ffffff;
top: 10px;
margin-left: 20px;
z-index: 10;
}
.nose1{
width: 2px;
height: 130px;
background: #000;
position: absolute;
top: 160px;
left: 50%;
margin-left: -1px;
z-index: 10;
}
.mouth{
width: 250px;
height: 200px;
border-radius: 50%;
background: snow;
border-bottom: 2px #000 solid;
margin: -230px auto;
position: relative;
}
.mouth div:first-child{
width: 82px;
height: 2px;
background: #000;
position: absolute;
z-index: 1000;
top: -25px;
left: 6px;
display: none;
}
.mouth div:nth-child(2){
width: 82px;
height: 2px;
background: #000;
position: absolute;
z-index: 1000;
top: -25px;
left: 90px;
display: none;
}
.mouth:hover{
border-radius: 0;
width: 180px;
height: 200px;
}
.mouth:hover div:first-child,.mouth:hover div:nth-child(2){
display: block;
}
.neck{
width: 330px;
height: 200px;
border-radius: 50% 50% 20% 20% / 50% 50% 50% 50%;
background: #e30000;
margin: 80px auto;
z-index: 100;
}
.neck div:first-child{
border: 2px #000 solid;
border-radius: 50%;
width: 40px;
height: 40px;
background: #ffdd2e;
position: absolute;
top: 350px;
left: 50%;
margin-left: -22px;
transition: all 1s;
}
.neck div:nth-child(2){
border: 2px #000 solid;
width: 44px;
height: 5px;
background: #ffdd2e;
position: absolute;
left: 50%;
margin-left: -24px;
top: 363px;
border-radius: 5px;
transition: all 1s;
}
.neck div:nth-child(3){
width: 8px;
height: 8px;
border: 2px #000 solid;
position: absolute;
background: #6c5844;
border-radius: 50%;
left: 50%;
margin-left: -6px;
top: 375px;
transition: all 1s;
}
.neck div:nth-child(4){
width: 2px;
height: 8px;
background: #000;
position: absolute;
left: 50%;
margin-left: -1px;
top: 385px;
transition: all 1s;
}
.neck:hover div:first-child{
width: 60px;
height: 60px;
left: 50%;
margin-left: -30px;
}
.neck:hover div:nth-child(2){
width: 66px;
height: 7.5px;
left: 50%;
margin-left: -33px;
}
.neck:hover div:nth-child(3){
width: 12px;
height: 12px;
left: 50%;
margin-left: -6px;
top: 385px;
}
.neck:hover div:nth-child(4){
width: 2px;
height: 12px;
left: 50%;
margin-left: 1px;
top: 400px;
}
.beard .left div:first-child{
width: 120px;
height: 40px;
border-top: 2px #000 solid;
border-radius: 10% 90% 10% 90% / 10% 90% 10% 90%;
position: absolute;
left: 50%;
top: 140px;
margin-left: -170px;
z-index: 100;
}
.beard .left div:nth-child(2){
width: 120px;
height: 40px;
border-top: 2px #000 solid;
border-radius: 10% 90% 10% 90% / 30% 70% 40% 60%;
position: absolute;
left: 50%;
top: 170px;
margin-left: -170px;
z-index: 100;
}
.beard .left div:last-child{
width: 120px;
height: 40px;
border-top: 2px #000 solid;
border-radius: 10% 90% 10% 90% / 40% 60% 10% 90%;
position: absolute;
left: 50%;
top: 200px;
margin-left: -170px;
z-index: 100;
}
.beard .right div:first-child{
width: 120px;
height: 40px;
border-top: 2px #000 solid;
border-radius: 90% 10% 90% 10% / 90% 10% 90% 10%;
position: absolute;
left: 50%;
top: 140px;
margin-left: 50px;
z-index: 100;
}
.beard .right div:nth-child(2){
width: 120px;
height: 40px;
border-top: 2px #000 solid;
border-radius: 90% 10% 90% 10% / 70% 30% 60% 40%;
position: absolute;
left: 50%;
top: 170px;
margin-left: 50px;
z-index: 100;
}
.beard .right div:last-child{
width: 120px;
height: 40px;
border-top: 2px #000 solid;
border-radius: 90% 10% 90% 10% / 60% 40% 90% 10%;
position: absolute;
left: 50%;
top: 200px;
margin-left: 50px;
z-index: 100;
}
.beard span{
display: block;
width: 60px;
height: 3.5px;
background: #ffffff;
border-radius: 4px;
position: absolute;
top: 352px;
left: 50%;
margin-left: -105px;
}
</style>
</head>
<body>
<!-- 哆啦A梦 -->
<div class="doa">
<!-- 头 -->
<div class="head">
<div class="face">
<div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
</div>
</div>
</div>
<div class="nose">
<div></div>
</div>
<div class="nose1"></div>
</div>
<!-- 嘴 -->
<div class="mouth">
<div></div>
<div></div>
</div>
<!-- 脖 -->
<div class="neck">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- 胡须 -->
<div class="beard">
<div class="left">
<div></div>
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
<div></div>
</div>
<span></span>
</div>
</div>
</body>
</html>

42
历届学生/熊坤/2019-02-28/index.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>继续学习</title>
</head>
<body>
<!-- 表单 -->
<form action="http://192.168.0.101/login.php" method="post">
<input type="text" required maxlength="11" placeholder="账户" name="username">
<input type="password" required placeholder="密码" name="userpwd" >
<input type="number" required name="" max="100" min="3" placeholder="请输入你的年龄">
<input type="submit" value="登录" >
</form>
<h2>请输入你的留言：</h2>
<textarea name="" id="" placeholder="dede " cols="40" rows="20"></textarea>
<p>
<b>创建一个Dio实例，并配置它</b> <br>
<hr>
<i>建议在项目</i> 中使用Dio单例，<big>这样便可对同</big> 一个dio实 <small>例发起的所有请</small> 求进行一些统一的配置，比如设置公共header、请求基地址、超时时间等；
这里有一个在Flutter <del>工程中</del> 使用Dio单例（定义为top level变量）的示例供开发者参考。
</p>
<div>
我是div标签
</div>
<!-- <audio src="http://www.runoob.com/try/demo_source/horse.ogg" controls>
音频无法播放
</audio> -->
</body>
</html>

24
历届学生/熊坤/2019-02-28/笔记.txt Normal file
View File

@@ -0,0 +1,24 @@
form ： 表单，相当于面试时候的面试题的那张纸
action：相当于面试题写完交给谁，用户填完表单后交个后端处理的地址
method：
GET：参数在地址栏显示
POST：一般用于金钱，账号，用户隐私相关，参数不在地址栏显示
布局：
1：table布局
2：div+css布局
标签的分类：
1：块级标签 块标签会独占一行 p h1~h6, ul li
2：行内标签 不会独占一行 a img input video
他们两个可以相互转化
任务：
预习css：http://www.runoob.com/css/css-tutorial.html

52
历届学生/熊坤/2019-02-28/网站布局div.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="main">
<!-- 网站的头部 -->
<div class="header">
网站的头部
</div>
<!-- 网站的左侧菜单 -->
<div class="left-menu">
网站的左侧菜单
</div>
<!-- 网站的中间内容 -->
<div class="centent">
网站的中间内容
</div>
<!-- 网站的右边的导航 -->
<div class="right-nav">
网站的右边的导航
</div>
<div class="footer">
网站底部的版权
</div>
</div>
<!-- <a href="">我是超链接1</a>
<a href="">我是超链接2</a>
<a href="">我是超链接3</a>
<hr>
<p>我是p1</p>
<p>我是p2</p>
<p>我是p3</p> -->
</body>
</html>

3
历届学生/熊坤/2019-03-07/index.css Normal file
View File

@@ -0,0 +1,3 @@
h2 {
color: blue;
}

47
历届学生/熊坤/2019-03-07/index.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./index.css">
<title>CSS学习第一课</title>
<style>
h2 {
color: yellow;
}
.nihao p a {
color: red;
}
#xk {
font-size: 50px;
}
.a+p {
font-size: 30px;
}
</style>
</head>
<body>
<div class="a"></div>
<p>dfewfew</p>
<h2 class="nihao">
<p>
<a href="">
你好
</a>
</p>
</h2>
<p>熊坤</p>
<a>熊坤</a>
</body>
</html>

44
历届学生/熊坤/2019-03-07/笔记.txt Normal file
View File

@@ -0,0 +1,44 @@
1：css: 层叠样式表
2：写法：
1：内联写法，就是讲css代码写在html标签内部
<h2 style="color:red">你好</h2>
2：内部写法，将代码放在head里面，和html代码脱离
<style>
h2 {
coloe:red;
}
</style>
选择器 {
属性名: 属性值;
}
3：外部(外链)写法
<link rel="stylesheet" href="./index.css">
权重(优先应用css代码的等级)：1 > 2 > 3
想改变默认的规则： !important
3：选择器学习
class(类选择器 “ . ”): 可以无限重复
id(" # "): 用id选择器的元素是全局唯一存在的，不要出现重复
标签选择器：
* 通配符选择器 用途：清除浏览器默认样式
+ 选择莫个元素之后的同级元素
> 选中莫个父元素里面的子元素
, 同时选中多个元素
a 空格 b： 选中莫个父元素里面的子元素

33
历届学生/熊坤/2019-03-12/css属性练习.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
font-size: 29px;
font-family: fantasy;
font-weight: bolder;
color: #ff0;
opacity: 0.5;
}
h3 {
text-align: center;
}
</style>
</head>
<body>
<p>font属性练习</p>
<p>hahahahahahhaahhahah</p>
<h3>这是测试文字的text-align对齐方式</h3>
</body>
</html>

70
历届学生/熊坤/2019-03-12/demo.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
width: 1100px;
margin: 0 auto;
}
.father {
width: 604px;
}
.father li {
margin-bottom: 43px;
}
</style>
</head>
<body>
<h1>
Dart语法学习
</h1>
<h2>
目录
</h2>
<ul>
<li>参考资料</li>
<li>语言特性</li>
<li>关键字</li>
<li>变量与常量</li>
</ul>
<h2>
参考资料
</h2>
<ul>
<li>
<a href="https://www.dartlang.org/guides/language/language-tour">https://www.dartlang.org/guides/language/language-tour</a>
【官方文档】
</li>
<li>
<a href="http://wiki.jikexueyuan.com/project/dart-language-tour/classes.html">http://wiki.jikexueyuan.com/project/dart-language-tour/classes.html</a>
【极客学院】
</li>
<li>
<a href="https://www.jianshu.com/p/3d927a7bf020">https://www.jianshu.com/p/3d927a7bf020</a>
【author：AWeiLoveAndroid】
</li>
</ul>
<h2>
语言特性
</h2>
<ul class="father">
<li>Dart所有的东西都是对象， 即使是数字numbers、函数function、null也都是对象，所有的对象都继承自Object类。</li>
<li>Dart所有的东西都是对象， 即使是数字numbers、函数function、null也都是对象，所有的对象都继承自Object类。</li>
<li>Dart所有的东西都是对象， 即使是数字numbers、函数function、null也都是对象，所有的对象都继承自Object类。</li>
</ul>
</body>
</html>

48
历届学生/熊坤/2019-03-12/笔记.txt Normal file
View File

@@ -0,0 +1,48 @@
CSS属性学习：
font-size: 设置字体大小，用于显示文字的标签基本上都可以用
font-family: 设置字体的样式
font-weight: 设置字体的粗细，可选数值：http://www.w3school.com.cn/cssref/pr_font_weight.asp
line-height: 设置文字上下间距
color: 设置文字的颜色
opacity: 0 完全透明， 1 完全不透明，一般在在 0 ~ 1 之间取值
text-indent: 设置文本段落的首行缩进，具体缩进多少，根据实际情况定
text-align: 设置文本的对齐方式 left right center
text-shadow: 1 2 3 4
1: 影子X轴上的位置，正数表示X轴右侧，负数左侧
2: 影子Y轴上的位置，正数表示Y轴下面，负数上面
3：设置影子的模糊度，数值越大越模糊
4：影子的颜色
letter-spacing: 设置字与字之间的间距
background-color: 设置背景色
background-image：设置背景图片
background-repeat：设置背景图片怎么重复
1：repeat-x： 背景图像在横向上平铺
2：repeat-y：背景图像在纵向上平铺
3：no-repeat：背景图像不平铺
background-position 设置背景图在哪里显示
1: center
2: left
3: right
4：x y 取数值
background-attachment 设置背景图是否随页面的滚动
1：fixed 表示图片固定，不随文字滚动
实现文字超过部分用 ... 代替
overflow: hidden;
width: 231px;
white-space: nowrap;
text-overflow: ellipsis;
预习：
1：background-origin
2：background-size

20
历届学生/熊坤/2019-03-14/display.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>display</title>
</head>
<body>
<p>我是p标签</p>
<a href="">我是a1标签</a>
<a href="">我是a2标签</a>
</body>
</html>

43
历届学生/熊坤/2019-03-14/float.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>float</title>
<style>
body {
margin: 0;
}
.box-1,
.box-2,
.box-3 {
float: left;
}
.box-1 {
width: 200px;
height: 400px;
background: red;
}
.box-2 {
width: 400px;
height: 400px;
background: yellow;
}
.box-3 {
width: 200px;
height: 400px;
background: black;
}
</style>
</head>
<body>
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</body>
</html>

89
历届学生/熊坤/2019-03-14/index.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
body {
margin: 0;
}
.box-1 {
width: 150px;
height: 150px;
background: red;
display: inline-block;
/* margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px; */
/* 四个方法同时设置 */
/* margin: 10px; */
/* 上下 左右 */
/* margin: 20px 30px; */
/* 上 左右 下 */
/* margin: 10px 20px 30px; */
/* 上 右 下 左 */
/* margin: 10px 20px 30px 40px; */
/* padding 和margin规律一样 */
/* border: 1px solid #000;
border-left-width: 5px;
border-right-width: 10px;
border-top-width: 15px;
border-bottom-width: 20px;
border-left-style: dashed;
border-right-style: groove;
border-top-style: double;
border-bottom-style: solid;
border-left-color: blue;
border-right-color: burlywood;
border-top-color: aqua;
border-bottom-color: brown; */
border-top: 20px solid #000;
border-right: 20px solid #ff0;
border-bottom: 20px solid #8d8d88;
border-left: 20px solid blue;
}
.box-2 {
width: 150px;
height: 150px;
background: yellow;
display: inline-block;
}
</style>
</head>
<body>
<div class="box-1">
box-1
</div>
<div class="box-2">
box-2
</div>
</body>
</html>

64
历届学生/熊坤/2019-03-14/布局案例.html Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>布局案例</title>
<style>
body {
margin: 0;
}
.top {
height: 40px;
background: yellow;
}
.left,
.right{
width: 200px;
height: 500px;
}
.left {
background: #000;
}
.right {
background: red;
}
.content {
width: 600px;
height: 500px;
background: palevioletred;
}
.float-left {
float: left;
}
.bottom {
height: 40px;
width: 100%;
background: #8d8d8d;
clear: both;
}
</style>
</head>
<body>
<div class="main">
<div class="top">头部</div>
<div class="main-center">
<div class="left float-left">左边</div>
<div class="content float-left">中间内容</div>
<div class="right float-left">右边</div>
</div>
<div class="bottom">底部版权</div>
</div>
</body>
</html>

31
历届学生/熊坤/2019-03-14/笔记.txt Normal file
View File

@@ -0,0 +1,31 @@
小知识点：
1：块级标签和行内标签相互转化
块级标签: 可以设置宽高属性
行内标签: 不可以设置宽高属性
display:
1: block 将行内标签元素转换为块标签，可以设置宽高
2: inline 将块标签转换为行内标签，将会失去设置宽高的特性
3: inline-block 让一个元素同时具有 block 和 inline 的所有属性
2： 盒子模型：网页中任何元素都具有盒子模型的特征，
margin 外边距
padding 内边距
border 边框
content 内容
元素的真实宽高 = 你设置的宽高 + (padding + padding) + (border + border)
3：浮动：https://www.cnblogs.com/acorn/p/5249089.html
4：提前预习：
定位：http://www.runoob.com/css/css-positioning.html

BIN
历届学生/熊坤/2019-03-15/img/back.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
历届学生/熊坤/2019-03-15/img/touxiang.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

79
历届学生/熊坤/2019-03-15/下拉菜单.html Normal file
View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下拉菜单</title>
<style>
body,ul {
padding: 0;
margin: 0;
}
body {
margin-top: 40px;
}
/* ul li {
list-style: none;
display: inline-block;
width: 160px;
text-align: center;
} */
ul li {
list-style: none;
float: left;
width: 160px;
text-align: center;
}
.dropdown {
display: none;
}
.hover-item:hover .dropdown {
display: inline-block;
}
</style>
</head>
<body>
<ul>
<li class="hover-item">
HTML 学习
<ul class="dropdown">
<li>基础标签学习</li>
<li>块级标签学习</li>
<li>图片标签学习</li>
</ul>
</li>
<li class="hover-item">
CSS 学习
<ul class="dropdown">
<li>定位学习</li>
<li>浮动学习</li>
<li>基础样式学习</li>
</ul>
</li>
<li class="hover-item">
JS 学习
<ul class="dropdown">
<li>函数学习</li>
<li>语法学习</li>
<li>算法学习</li>
</ul>
</li>
</ul>
</body>
</html>

72
历届学生/熊坤/2019-03-15/定位学习.html Normal file
View File

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css定位</title>
<style>
body {
margin: 0;
height: 2000px;
}
.box-1,
.box-2,
.box-3,
.box-4 {
width: 150px;
height: 150px;
float: left;
}
.box-1 {
background: yellow;
}
.box-2 {
background: black;
position: relative;
left: 40px;
top: 50px;
z-index: -5;
}
.box-3 {
background: blueviolet;
position: relative;
}
.box-3-1 {
width: 80px;
height: 80px;
background: green;
position: absolute;
left: 17px;
top: 107px;
z-index: -2;
}
.box-4 {
background: red;
}
.box-4:hover {
background: rgb(18, 185, 60);
}
.box-5 {
background: #8d8d8d;
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3">
<div class="box-3-1"></div>
</div>
<div class="box-4"></div>
<div class="box-5">
<img src="https://tpc.googlesyndication.com/simgad/4802151631125041737/downsize_200k_v1?w=400&h=209" alt="" srcset="">
</div>
</body>
</html>

31
历届学生/熊坤/2019-03-15/笔记.txt Normal file
View File

@@ -0,0 +1,31 @@
css 定位(position)：通过几种方式让你能够在网页上按照你喜欢的方式来布局页面
1: relative 相对定位 : 标签被设置relative后，元素将会从文档流中脱离出来，但是他原本的位置还在，不会被删除
所谓的相对，其实是相对他原本的位置来进行移动。
2: fixed 固定定位 :
3: absolute 绝对定位 :
1: 被设置绝对定位的元素，他原本的位置将会从文档流中删除。
参考对象：
1：如果被设置绝对定位的元素具有父元素，而且父元素如果已经进行定位，那么参考父容器来进行定位
父元素可以进行的定位有：
fixed
relative
absolute
2：如果被设置绝对定位的元素具有父元素，但是父元素没有进行定位，那么将会参考浏览器边框。
设置 ul li，或者 ol li 的样式：list-style: none;
选择器：hover 鼠标悬浮莫个元素的时候触发莫个代码
预习：css3过渡属性：http://www.runoob.com/css3/css3-transitions.html

64
历届学生/熊坤/2019-03-15/遮罩层 重点.html Normal file
View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
}
.zhezhao {
width: 436px;
height: 300px;
border: 1px solid #000;
background-image: url("./img/back.jpg");
position: relative;
}
.user {
width: 436px;
height: 70px;
background: #0000003b;
position: absolute;
bottom: 0;
left: 0;
display: none;
}
.user img {
width: 54px;
border-radius: 100%;
float: left;
margin-top: 10px;
margin-left: 18px;
}
.user p {
color: white;
display: inline-block;
margin: 0;
margin-top: 26px;
margin-left: 14px;
}
.zhezhao:hover .user {
display: inline-block;
}
</style>
</head>
<body>
<div class="zhezhao">
<div class="user">
<img src="img/touxiang.jpg" alt="" srcset="">
<p>熊坤</p>
</div>
</div>
</body>
</html>

62
历届学生/熊坤/2019-03-22/overflow.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>overflow</title>
<style>
::-webkit-scrollbar {
width: 0px;
height: 0px;
background-color: #F5F5F5;
}
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
width: 1000px;
}
ul li {
list-style: none;
}
.father {
width: 600px;
height: 100px;
background: #8d8d8d;
overflow-x: scroll;
}
.father li {
float: left;
width: 100px;
height: 100px;
background: yellow;
overflow-x: scroll;
}
</style>
</head>
<body>
<div class="father">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
</html>

30
历届学生/熊坤/2019-03-22/正方形变球形.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background: red;
transition: all 2s ease 1s;
}
.box:hover {
background: yellow;
border-radius: 100%;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

17
历届学生/熊坤/2019-03-22/笔记.txt Normal file
View File

@@ -0,0 +1,17 @@
transition : 元素从一种状态到另外一种状态发生改变的时候，为他添加上一个平滑的过渡效果。
四个数值：应用过渡的CSS属性的名称(all) 变化持续的时间 动画的效果 延迟时间
text-decoration: none; 清除a标签默认的下划线
outline: none; 清除input被选中时候外面的边框
box-sizing : https://www.cnblogs.com/tianmuxi/p/9076373.html
:first-child
:nth-child(n)
:last-child

43
历届学生/熊坤/2019-03-22/过渡属性.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>过渡属性 案例</title>
<style>
body {
margin: 0;
}
.box-1 {
width: 400px;
height: 300px;
background: #000;
position: relative;
}
.box-bottom {
width: 400px;
height: 60px;
background: green;
position: absolute;
bottom: -60px;
transition: all 1s ease 0.1s;
}
.box-1:hover .box-bottom {
bottom: 0px;
}
</style>
</head>
<body>
<div class="box-1">
<div class="box-bottom"></div>
</div>
</body>
</html>

55
历届学生/熊坤/2019-03-24/index.html Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画学习</title>
<style>
.box {
width: 150px;
height: 150px;
background: yellow;
animation: ColorTransition 10s ease none 1s infinite
}
@keyframes ColorTransition {
0% {
background: yellow;
}
50% {
background: blue;
}
70% {
background: green;
}
100% {
background: red;
}
/* from {
background: yellow;
}
to {
background: red;
} */
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

3
历届学生/熊坤/2019-03-24/任务.txt Normal file
View File

@@ -0,0 +1,3 @@
1：任务
媒体查询：http://www.runoob.com/cssref/css3-pr-mediaquery.html

55
历届学生/熊坤/项目案例/index.html Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画学习</title>
<style>
.box {
width: 150px;
height: 150px;
background: yellow;
animation: ColorTransition 10s ease none 1s infinite
}
@keyframes ColorTransition {
0% {
background: yellow;
}
50% {
background: blue;
}
70% {
background: green;
}
100% {
background: red;
}
/* from {
background: yellow;
}
to {
background: red;
} */
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

3
历届学生/熊坤/项目案例/任务.txt Normal file
View File

@@ -0,0 +1,3 @@
1：任务
媒体查询：http://www.runoob.com/cssref/css3-pr-mediaquery.html

BIN
历届学生/熊坤/项目案例/仿简书/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
历届学生/熊坤/项目案例/仿简书/img/meta-left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
历届学生/熊坤/项目案例/仿简书/img/right-text.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
历届学生/熊坤/项目案例/仿简书/img/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
历届学生/熊坤/项目案例/仿简书/img/user-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
历届学生/熊坤/项目案例/仿简书/img/wirte.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

260
历届学生/熊坤/项目案例/仿简书/index.html Normal file
View File

@@ -0,0 +1,260 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,ul{
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul li {
list-style: none;
}
.left {
float: left;
}
.menu {
height: 56px;
border-bottom: 1px solid #f0f0f0;
box-sizing: border-box;
position: fixed;
width: 100%;
background: #fff;
}
.menu-left {
float: left;
height: 56px;
}
.menu-left img {
height: 100%;
}
.menu-center {
width: 945px;
padding: 0 15px;
margin: 0 auto;
}
.center-left ul li {
float: left;
}
.center-left ul li a{
font-size: 17px;
color: #333;
padding: 15px 15px 15px 0;
display: inline-block;
}
.center-left li:first-child {
margin-right: 10px;
width: 64px;
}
.center-left li:nth-child(2) {
margin-right: 10px;
}
.center-left li:last-child {
padding-left: 15px;
margin-right: 10px;
}
.center-left li:last-child input {
width: 160px;
height: 38px;
border-radius: 40px;
outline: none;
border: none;
background: #eee;
padding-left: 20px;
box-sizing: border-box;
margin-top: 9px;
font-size: 14px;
background: url("./img/search.png") no-repeat #eee;
background-position: 129px;
}
.center-right {
float: right;
padding-right: 33px;
padding-top: 2px;
}
.center-right li {
float: left;
margin-left: -16px;
}
.center-right li:first-child img,
.center-right li:last-child a {
padding: 15px;
}
.center-right li:last-child a {
display: inline-block;
margin-left: 10px;
margin-right: 6px;
font-size: 15px;
color: #969696;
}
.menu-right {
position: absolute;
right: 22px;
}
.menu-right a {
display: inline-block;
font-size: 15px;
}
.menu-right a:first-child {
width: 80px;
height: 38px;
border: 1px solid rgba(236,97,73,.7);
border-radius: 20px;
text-align: center;
line-height: 38px;
color: #ea6f5a;
margin: 9px 5px 0 15px;
}
.menu-right a:last-child {
width: 100px;
height: 38px;
line-height: 38px;
color: #ffffff;
border: 1px solid rgba(236,97,73,.7);
border-radius: 20px;
text-align: center;
background: #ee6548;
margin-left: 5px;
margin-right: 12px;
box-sizing: border-box;
}
.menu-right a:last-child img{
vertical-align: middle;
}
.content {
margin: 0 auto;
width: 620px;
padding-top: 109px;
}
.content-title h1 {
font-size: 34px;
font-weight: 700;
line-height: 1.3;
}
.content-user {
margin: 30px 0 40px;
overflow: hidden
}
.user-logo {
width: 48px;
height: 48px;
border-radius: 100%;
border: 1px solid #ddd;
box-sizing: border-box;
}
.info {
margin-left: 8px;
}
.info a {
color: #333;
margin-right: 3px;
font-size: 16px;
}
.info span {
background: #42c02e;
font-size: 12px;
color: #fff;
width: 52px;
height: 17px;
display: inline-block;
border-radius: 40px;
text-align: center;
}
.meta {
margin-top: 5px;
font-size: 12px;
color: #969696;
}
.meta img {
width: 12px;
height: 13px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="main">
<div class="menu">
<div class="menu-left">
<img src="./img/logo.png" alt="">
</div>
<div class="menu-center">
<div class="center-left">
<ul>
<li>
<a href="https://www.jianshu.com/">首页</a>
</li>
<li>
<a href="">下载App</a>
</li>
<li>
<input type="text" name="" placeholder="搜索">
</li>
</ul>
</div>
<div class="center-right">
<ul>
<li>
<img src="./img/right-text.png" alt="文字">
</li>
<li>
<a href="">登录</a>
</li>
</ul>
</div>
</div>
<div class="menu-right">
<a href="">注册</a>
<a href="">
<img src="./img/wirte.png" alt="" srcset="">
写文章
</a>
</div>
</div>
<div class="content">
<div class="content-title">
<h1>使用Vue-cli搭建多页面应用时对项目结构和配置的调整</h1>
</div>
<div class="content-user">
<a href="" class="left">
<img class="user-logo" src="./img/user-logo.png" alt="用户头像">
</a>
<div class="info left">
<a href="">大春春</a>
<span>+ 关注</span>
<div class="meta">
<img src="./img/meta-left.png" alt="">
0.5 2017.05.07 15:47* 字数 588 阅读 29690评论 60喜欢 89赞赏 1
</div>
</div>
</div>
<div class="content-arcie">
<p>前提：在这里使用的是webpack模板进行搭建</p>
<h3>第一步、安装Vue-cli并且进行初始化</h3>
<p>然后使用vue init <template(模板名，我这里使用的是webpack)> <项目文件夹名称(我这里使用的是project)>初始化一个Vue项目模板
这时候Vue-cli的准备工作就完成了，这时候可以通过npm run dev进入开发环境，启动后是这个样子的，但是此时的脚手架的配置都是针对单页面应用进行的，入口只有一个index.html，所以下一步就要对项目目录的结构进行一些调整
这时候Vue-cli的准备工作就完成了，这时候可以通过npm run dev进入开发环境，启动后是这个样子的，但是此时的脚手架的配置都是针对单页面应用进行的，入口只有一个index.html，所以下一步就要对项目目录的结构进行一些调整
这时候Vue-cli的准备工作就完成了，这时候可以通过npm run dev进入开发环境，启动后是这个样子的，但是此时的脚手架的配置都是针对单页面应用进行的，入口只有一个index.html，所以下一步就要对项目目录的结构进行一些调整
这时候Vue-cli的准备工作就完成了，这时候可以通过npm run dev进入开发环境，启动后是这个样子的，但是此时的脚手架的配置都是针对单页面应用进行的，入口只有一个index.html，所以下一步就要对项目目录的结构进行一些调整
这时候Vue-cli的准备工作就完成了，这时候可以通过npm run dev进入开发环境，启动后是这个样子的，但是此时的脚手架的配置都是针对单页面应用进行的，入口只有一个index.html，所以下一步就要对项目目录的结构进行一些调整
这时候Vue-cli的准备工作就完成了，这时候可以通过npm run dev进入开发环境，启动后是这个样子的，但是此时的脚手架的配置都是针对单页面应用进行的，入口只有一个index.html，所以下一步就要对项目目录的结构进行一些调整
</p>
</div>
</div>
</div>
</body>
</html>

BIN
历届学生/熊坤/项目案例/烟花/img/1111.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
历届学生/熊坤/项目案例/烟花/img/boom.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
历届学生/熊坤/项目案例/烟花/img/pd-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
历届学生/熊坤/项目案例/烟花/img/pd-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

84
历届学生/熊坤/项目案例/烟花/index.html Normal file
View File

@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>烟花爆炸</title>
<style>
body,html {
height: 100%;
margin: 0;
}
.main {
width: 800px;
margin: 0 auto;
height: 100%;
position: relative;
overflow: hidden;
}
.yh {
position: absolute;
bottom: -171px;
left: 50%;
margin-left: -5px;
animation: boom 0.7s ease;
}
@keyframes boom {
from {
bottom: -171px;
}
to {
bottom: 301px;
display: none;
}
}
.yanhua {
position: absolute;
left: 50%;
margin-left: -112px;
transform: scale(0,0);
animation: yanhuas 2.8s ease 0.6s;
}
@keyframes yanhuas {
0% {
transform: scale(0,0);
}
50% {
transform: scale(1,1);
}
100% {
transform: scale(0,0);
height: 0;
}
}
</style>
</head>
<body>
<div class="main">
<img src="./img/boom.gif" class="yanhua" alt="">
<img class="yh" src="./img/pd-1.png" alt="">
</div>
<script>
setTimeout(() => window.location.reload(), 2800);
</script>
</body>
</html>