html - 4 个 html 站点之间的转换
问题描述
我正在为自己制作一个网站,我想在我的子网站之间进行转换,例如 PowerPoint 幻灯片转换。我已经找到了一个适合(https://codepen.io/mburakerman/pen/roJmaZ)的代码笔,但问题是我不知道哈巴狗和手写笔。此外,Visual Studio 代码告诉我手写笔代码有错误。我也是编程新手,所以我真的不知道如何正确使用它。如果您需要其他方面的代码,请告诉我主站点。
@charset "utf-8";
/* CSS Document */
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
h1 {
z-index: 2;
font-size: 250%;
}
body {
z-index: 2;
margin: 0;
padding: 0;
line-height: 1.5;
background: #03FFEA;
overflow-x: hidden;
}
h1 {
font-size: 300%;
z-index: 2;
color: white;
}
.Work {
font-size: 150%;
flex-direction: row;
display: flex;
align-self: center;
align-content: center;
z-index: 3;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(-5vh);
text-align: center;
margin: 0 auto;
}
.About {
font-size: 150%;
flex-direction: row;
display: flex;
transform: rotate(90deg) translateY(4vw);
z-index: 3;
position: fixed;
left: 0;
top: 45vh;
text-align: center;
}
.Contact {
font-size: 150%;
flex-direction: row;
display: flex;
transform: rotate(-90deg) translateY(6vw);
z-index: 3;
position: fixed;
right: 0;
top: 45vh;
text-align: center;
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
body {
height: 100%;
overflow: hidden;
}
#video-viewport { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; }
video { display: block; width: 100%; height: auto; }
.fullsize-video-bg { height: 100%; overflow: hidden; }
.fullsize-video-bg .inner { display: table; width: 100%; max-width: 24em; height: 100%; margin: 0 auto; padding: 0; position: relative; z-index: 2; text-shadow: 0 1px 5px rgba(0,0,0,.5); }
.fullsize-video-bg .inner > div { text-align: center; display: table-cell; vertical-align: middle; padding: 0 2em; }
h1 { font-family: "Raleway", sans-serif; font-size: 3em; line-height: .9; font-weight: 900; letter-spacing: -.025em; text-transform: uppercase; margin-bottom: .5em; }
h1 + p { font-family: "Shadows Into Light Two", cursive; font-size: 1.5em; }
@media (min-aspect-ratio:16/9){
.videoBG {
width: auto;
height: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Main.css">
<script language="javascript" type="text/javascript" src="Main.js"></script>
<title>Document</title>
</head>
<body>
<main>
<!--Links-->
<div class="About">
<a href="About.html">
<h1>
ABOUT
</h1>
</a>
</div>
<div class="Work">
<a href="Work.html">
<h1>
WORK
</h1>
</a>
</div>
<div class="Contact">
<a href="Contact.html">
<h1>
CONTACT
</h1>
</a>
</div>
<!--Videohintergrund-->
<section class="fullsize-video-bg">
<div class="inner">
</div>
<div id="video-viewport">
<video width="1920" height="1080" autoplay muted loop>
<source src="BG_Video.mp4" type="video/mp4" />
</video>
</div>
</section>
</main>
</body>
</html>
感谢所有这些帮助。
解决方案
推荐阅读
- java - 类的方法中类的引用
- javascript - “POST”请求是否返回 XML 数据?
- react-native - 在本地运行 expo-cli 命令(使用本地 expo-cli)
- c# - 我正在尝试在表的特定列上创建 SQL 缓存依赖关系,但是当表的任何列发生更改时,数据都存储在缓存中
- delphi - Delphi 10.4.2 启动时出现“找不到向导 gexperts”错误
- node.js - Mongoose 聚合:基于 Model.associated_Model.associated_Model.field 过滤返回错误结果
- swiftui - NavigationLink 上的菜单不可点击
- sql - 如何在 SQL Server 中获取插值?
- java - 有没有什么办法只有在我从 Android 中的 Firebase 获取数据后才能继续?
- excel - 使用 VBA 将特定字符更新为不同的字体