首页 发现 帮助
登录
wuheng
/
vip21-javaweb
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

06

wuheng 2 年之前
父节点
2c995d779d
当前提交
6bd81bd65f
共有 4 个文件被更改，包括 67 次插入 和 6 次删除
合并视图 显示文件统计
  1. 21 0
      day06/web/demo.html
  2. 12 2
      day06/web/media.html
  3. 11 0
      day06/web/style.css
  4. 23 4
      day06/web/style.html

+ 21 - 0
day06/web/demo.html
查看文件 

@@ -0,0 +1,21 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+    <link rel="stylesheet" href="./style.css" />
 
+
 
+<!--
 
+css 优先级
 
+1 !important 最高优先级
 
+2 行内样式
 
+3 页面内定义的样式
 
+4 外链定义样式
 
+-->
 
+
 
+</head>
 
+<body>
 
+<div>
 
+</div>
 
+</body>
 
+</html>

+ 12 - 2
day06/web/media.html
查看文件 

@@ -5,12 +5,22 @@
 
     <title>Title</title>
 
     <title>Title</title>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
+
 
+<button onclick="document.querySelector('#mp3').play()">播放</button> <hr />
 
+<button onclick="document.querySelector('#mp3').pause()">暂停</button> <hr />
 
+
 
+<audio id="mp3" style="display: none" src="audio.mp3"></audio>
 
+
 
+
 
 <a href="video.html">
 
 <a href="video.html">
 
-    <img alt="红楼梦关系图"  src="image.png" width="1024"  />
 
+    <img alt="红楼梦关系图"  src="image.png" width="600"  />
 
 </a>
 
 </a>
 
 <br />
 
 <br />
 
 
 
-<audio src="audio.mp3" controls ></audio>
 
+<script>
 
+    var audio = new Audio();
 
+    audio.src = ""
 
+</script>
 
 
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 11 - 0
day06/web/style.css
查看文件 

@@ -0,0 +1,11 @@
 
+html, body{
 
+    width: 100%;
 
+    height: 100%;
 
+    padding: 0;
 
+    margin: 0;
 
+}
 
+div {
 
+    background-color: green;
 
+    width: 10rem;
 
+    height: 10rem
 
+}

+ 23 - 4
day06/web/style.html
查看文件 

@@ -12,7 +12,7 @@
 
             background-color: red;
 
             background-color: red;
 
         }
 
         }
 
         #demo2 {
 
         #demo2 {
 
-            background-color: black;
 
+            /*background-color: black;*/
 
         }
 
         }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
@@ -20,9 +20,28 @@
 
 
 
 <div class="demo1" style="background-color: green">1</div>
 
 <div class="demo1" style="background-color: green">1</div>
 
 <hr />
 
 <hr />
 
-<div class="demo1">2</div>
 
+<div class="demo1">2
 
+    <span class="demo3"></span>
 
+</div>
 
 <hr />
 
 <hr />
 
-<div id="demo2">3</div>
 
-
 
+<div id="demo2">
 
+    <div id="positiondemo" style="width: 200px; height: 100px; background-color: red"> 我是内元素 </div>
 
+</div>
 
+    <input value="我是input" />
 
 </body>
 
 </body>
 
+<style>
 
+    /*padding  margin*/
 
+    #positiondemo {
 
+        position: absolute;
 
+        left: 400px;
 
+        right: 200px;
 
+    }
 
+/*
 
+px 基于像素单位
 
+em 基于父元素 字体单位   // 1em  当前元素的 父元素 的1个字体 单位  font-size: 20px
 
+rem 基于根元素 字体单位  // 1em  等于 html 元素的 1个字体 单位
 
+vh 视口高度单位   1vh 就是一个视口宽度
 
+vw 视口宽度单位   1vw 就是网页可见高度
 
+*/
 
+</style>
 
 </html>
 
 </html>