Question

所以，我是html和css的新手，我正在努力做到以下几点：

1）适用于每种屏幕尺寸的网站

2）文本和2个按钮将水平居中（也是nr.1）

3）在后台播放的视频（也是nr.1）

可选 4）放大或缩小视频时，文字看起来并不奇怪

我知道这很多但是我说我是html和css的新手

Sample（最适合1280x720个屏幕）

我目前使用的代码（我很擅长）： http://pastebin.com/raw/ZnJpnze6

p {
  margin: 0px;
}
h1 {
  margin: 0px;
}
h2 {
  margin: 0px;
}
h3 {
  margin: 0px;
}
</style> <style type="text/css">html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
body {
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  perspective: 1400px;
  -webkit-perspective: 1400px;
  -moz-perspective: 1400px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  background-color: transparent;
}
.gwd-video-bnv8 {
  position: absolute;
  width: 1280px;
  height: 720px;
  left: 0px;
  top: 0px;
}
.gwd-p-1j96 {
  position: absolute;
  font-family: "Courier New";
  font-weight: bold;
  font-size: 64px;
  color: rgb(255, 0, 0);
  left: 490px;
  top: 50px;
}
.Buttons {
  border-radius: 28px;
  border: 1px solid rgb(0, 0, 255);
  display: inline-block;
  cursor: pointer;
  color: rgb(255, 255, 255);
  font-family: "Courier New";
  font-size: 20px;
  padding: 10px 30px;
  text-decoration: none;
  text-shadow: rgb(47, 102, 39) 0px 1px 0px;
  position: absolute;
  left: 556px;
  top: 176px;
  background-color: rgb(0, 0, 255);
}
.Buttons:hover {
  background-color: rgb(56, 56, 255);
}
.gwd-a-ceqx {
  top: 227px;
  left: 551px;
}

<video width="1280" height="720" loop="true" autoplay="true">
  <source src="videos/bubbles.mp4" type="video/mp4">
</video>
<h1 class="gwd-p-1j96">Itz_Nop</h1>
<a href="QunaMC.html" class="Buttons">QunaMC</a>
<a href="/McLeaks/index.php" class="Buttons gwd-a-ceqx">McLeaks</a>

Answer 1

尝试这样的css

p, h1, h2, h3 {
    margin: 0px;
}

video{
    width: 100%;
    height: auto;
}

HTML

<video loop="true" autoplay="true">
    <source src="videos/bubbles.mp4" type="video/mp4">
</video>

应该让您的视频响应

（HTML和CSS）帮我编码

1 个答案: