Inicio Explorar Axuda
Iniciar sesión
lovecoding
/
web0331
10
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Explorar o código

html5

bailing hai 1 semana
pai
74c033a742
achega
e45385ac95
Modificáronse 8 ficheiros con 303 adicións e 0 borrados
Dividir vista Mostrar estatísticas de Diff
  1. 72 0
      5.css3/16.旋转立方体.html
  2. 79 0
      5.css3/17.照片墙.html
  3. 25 0
      6.html5/1.简介.html
  4. 37 0
      6.html5/2.标签.html
  5. BIN=BIN
      6.html5/222.mp4
  6. 44 0
      6.html5/3.输入类型.html
  7. 46 0
      6.html5/4.多媒体标签.html
  8. BIN=BIN
      6.html5/周杰伦-花海.mp3

+ 72 - 0
5.css3/16.旋转立方体.html
Ver ficheiro 

@@ -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">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        body {
 
+            perspective: 1000px;
 
+        }
 
+        #container {
 
+            width: 200px;
 
+            height: 200px;
 
+            margin: 200px auto;
 
+            position: relative;
 
+            transform-style: preserve-3d;
 
+            border: 1px solid #000;
 
+            animation: run 5s linear infinite;
 
+        }
 
+        @keyframes run {
 
+            100% {
 
+                transform: rotateX(360deg);
 
+            }
 
+        }
 
+        #container div {
 
+            width: 200px;
 
+            height: 200px;
 
+            position: absolute;
 
+            opacity: .5;
 
+            border: 1px solid #000;
 
+        }
 
+        #box1 {
 
+            background: url("./images/a.jpg");
 
+            transform: translateZ(100px);
 
+        }
 
+        #box2 {
 
+            background: url("./images/b.jpg");
 
+            transform: rotateY(90deg) translateZ(100px);
 
+        }
 
+        #box3 {
 
+            background: url("./images/c.jpg");
 
+            transform: rotateY(180deg) translateZ(100px);
 
+        }
 
+        #box4 {
 
+            background: url("./images/d.jpg");
 
+            transform: rotateY(-90deg) translateZ(100px);
 
+        }
 
+        #box5 {
 
+            background: url("./images/e.jpg");
 
+            transform: rotateX(90deg) translateZ(100px);
 
+        }
 
+        #box6 {
 
+            background: url("./images/f.jpg");
 
+            transform: rotateX(-90deg) translateZ(100px);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="container">
 
+        <div id="box1"></div>
 
+        <div id="box2"></div>
 
+        <div id="box3"></div>
 
+        <div id="box4"></div>
 
+        <div id="box5"></div>
 
+        <div id="box6"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 79 - 0
5.css3/17.照片墙.html
Ver ficheiro 

@@ -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">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+
 
+        body {
 
+            background: rgba(0, 0, 0, .3);
 
+        }
 
+
 
+        img {
 
+            width: 120px;
 
+            height: 120px;
 
+            position: absolute;
 
+            top: -120px;
 
+            left: -120px;
 
+            transition: all 2s linear;
 
+
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <img src="./images/1.jpg" alt="">
 
+    <img src="./images/2.jpg" alt="">
 
+    <img src="./images/3.jpg" alt="">
 
+    <img src="./images/4.jpg" alt="">
 
+    <img src="./images/5.jpg" alt="">
 
+    <img src="./images/6.jpg" alt="">
 
+    <img src="./images/7.jpg" alt="">
 
+    <img src="./images/8.jpg" alt="">
 
+    <img src="./images/9.jpg" alt="">
 
+    <img src="./images/10.jpg" alt="">
 
+    <img src="./images/11.jpg" alt="">
 
+    <img src="./images/12.jpg" alt="">
 
+    <img src="./images/13.jpg" alt="">
 
+    <img src="./images/14.jpg" alt="">
 
+    <img src="./images/15.jpg" alt="">
 
+    <img src="./images/16.jpg" alt="">
 
+    <img src="./images/17.jpg" alt="">
 
+    <img src="./images/18.jpg" alt="">
 
+    <img src="./images/19.jpg" alt="">
 
+    <img src="./images/20.jpg" alt="">
 
+    <img src="./images/21.jpg" alt="">
 
+    <img src="./images/22.jpg" alt="">
 
+    <img src="./images/23.jpg" alt="">
 
+    <img src="./images/24.jpg" alt="">
 
+    <script>
 
+        var imgList = document.querySelectorAll("img");
 
+        var screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
 
+        var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
 
+        /**
 
+         * 0   1   2   3   4    5
 
+         * 6   7   8   9   10   11
 
+         * 12  13  14  15  16   17
 
+         * 18  19  20  21  22   23
 
+        */
 
+        var gapX = (screenWidth - 120 * 6) / 7;
 
+        var gapY = (screenHeight - 120 * 4) / 5;
 
+        for (var i = 0; i < imgList.length; i++) {
 
+            var row = Math.floor(i / 6) + 1;
 
+            var col = i % 6 + 1;
 
+            imgList[i].style.top = row * gapY + (row - 1) * 120 + 'px';
 
+            imgList[i].style.left = col * gapX + (col - 1) * 120 + 'px';
 
+            imgList[i].style.transform = 'rotate('+Math.random()* 50 +'deg)';
 
+            imgList[i].style.transitionDelay = (23-i) * 100 +'ms';
 
+        }      
+    </script>
 
+
 
+</body>
 
+
 
+</html>

+ 25 - 0
6.html5/1.简介.html
Ver ficheiro 

@@ -0,0 +1,25 @@
 
+<!-- <!DOCTYPE html> -->
 
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+  !DOCTYPE 声明文档规范 html5
 
+  <!-- 
+        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
+        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
+  -->
 
+  <!-- <html xmlns="http://www.w3.org/1999/xhtml">
 
+    xml文档规范
 
+</html> -->
 
+  <!-- DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析
 
+  这个⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript 脚本的解析  -->
 
+</body>
 
+
 
+</html>

+ 37 - 0
6.html5/2.标签.html
Ver ficheiro 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <!-- 
+        标签：
 
+        1.文档标签 => 文档流
 
+        2.按照是否换行分：
 
+        3.按照是否闭合分：
 
+        4.H5新特性：
 
+            header 头部
 
+            footer 页尾
 
+            nav 导航内容
 
+            section 文章中的一块内容
 
+            aside 侧边框
 
+    -->
 
+    <div id="box">
 
+        <!-- <div id="header"></div>
 
+            <div id="main">
 
+
 
+            </div>
 
+
 
+            <div id="footer">
 
+                 -->
 
+        <header></header>
 
+        <footer></footer>
 
+    </div>
 
+    </div>
 
+</body>
 
+
 
+</html>

BIN=BIN
6.html5/222.mp4
Ver ficheiro


+ 44 - 0
6.html5/3.输入类型.html
Ver ficheiro 

@@ -0,0 +1,44 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- text 文本类型 -->
 
+    <input type="text">
 
+    <br>
 
+    <!-- color 调色板  -->
 
+    <input type="color">
 
+    <br>
 
+    <!-- date 日期 -->
 
+    <input type="date" value="2025-05-30">
 
+    <br>
 
+    <!-- time 时间 -->
 
+    <input type="time" value="13:30">
 
+    <br>
 
+    <!-- search 搜索 -->
 
+    <input type="search">
 
+    <br>
 
+    <!-- range 进度条 -->
 
+    <input type="range">
 
+    <br>
 
+    <!-- tel 手机号 -->
 
+    <input type="tel" maxlength="11">
 
+    <br>
 
+    <!-- file 文件 -->
 
+    <input type="file">
 
+    <br>
 
+    <select>
 
+        <option value="1">1</option>
 
+        <option value="2">2</option>
 
+    </select>
 
+    <input type="text" list="aaa">
 
+    <datalist id="aaa">
 
+
 
+        <option value="1">11</option>
 
+        <option value="2">22</option>
 
+    </datalist>
 
+</body>
 
+</html>

+ 46 - 0
6.html5/4.多媒体标签.html
Ver ficheiro 

@@ -0,0 +1,46 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        audio 音频
 
+        1.src 放置路径
 
+        2.controls 显示控件
 
+            属性值：controls
 
+        3.loop 循环播放
 
+        4.dom.currentTime 当前时间
 
+        5.playbackRate 播放速度 取值范围:1-16
 
+        6.
 
+
 
+    -->
 
+    <!-- 音频 -->
 
+    <audio src="./周杰伦-花海.mp3" controls="controls" loop></audio>
 
+    <button id="btn1">播放</button>
 
+    <button id="btn2">暂停</button>
 
+    <button id="btn3">重播</button>
 
+    <!-- 视频 -->
 
+     <!-- <video src="./222.mp4" controls></video> -->
 
+    <script>
 
+        let audio = document.querySelector("audio");
 
+        let btn1 = document.getElementById("btn1");
 
+        let btn2 = document.getElementById("btn2");
 
+        let btn3 = document.getElementById("btn3");
 
+        console.log(audio,'111')
 
+        console.log(audio.currentTime,'111')
 
+        audio.playbackRate = 1;
 
+        btn1.onclick = function() {
 
+            audio.play()
 
+        };
 
+        btn2.onclick = function() {
 
+            audio.pause()
 
+        }
 
+        btn3.onclick = function() {
 
+            audio.load()
 
+        }
 
+    </script>
 
+</body>
 
+</html>

BIN=BIN
6.html5/周杰伦-花海.mp3
Ver ficheiro