我无法使网站适合用户的屏幕,它只是不接受更改,我尝试了几件事,但我无法找到问题所在。
<style>
.full-width-div {
position: absolute;
width: 100%;
height: 100%;
left: 0;
}
#texto {
width: 100%;
height: 51px;
color: white;
text-align: center;
}
p.uno {
text-align: center max-width: 90%;
max-height: 90%;
color: yellow;
text-shadow: 4px 2px 0px #000000;
}
a {
color: yellow;
}
a {
text-align: center;
}
a {
text-decoration: none;
}
a.wsnextlink1:link {
text-decoration: none;
color: #2a5db0;
}
a.wsnextlink1:visited {
text-decoration: none;
color: #560080;
}
a.wsnextlink1:hover {
text-decoration: underline;
color: #800000;
}
div.shadow {
padding-top: 5px;
text-align: center;
max-width: 90%;
max-height: 90%;
overflow: visible;
}
img.logo {
padding-top: 5px;
max-width: 90%;
max-height: 90%;
border-radius: 5%;
}
video#bgvideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="full-width-div">
<div class="shadow">
<div id="texto">
<p class="uno" style="font-weight:normal;color:white;letter-spacing:1pt;word-spacing:2pt;font-size:35px;text-align:center;font-family:helvetica, sans-serif;line-height:1;">
text.</p>
</div>
<img src="017.jpg" class="logo">
<div id="texto">
<p class="uno" style="font-weight:normal;color:white;letter-spacing:1pt;word-spacing:2pt;font-size:35px;text-align:center;font-family:helvetica, sans-serif;line-height:1;">
<a href="finish.html" align="center">
</a>
</p>
</div>
<div id="texto">
<p class="uno" style="font-weight:normal;color:white;letter-spacing:1pt;word-spacing:2pt;font-size:35px;text-align:center;font-family:helvetica, sans-serif;line-height:1;">
<a href="017.html" align="center">
</a>
</p>
</div>
答案 0 :(得分:1)
尝试使用以下内容,似乎您的div
代码并未全部关闭,您可能需要查看我在此处的div
代码,他们可能需要修改取决于你想要什么,但我认为这应该适当缩放,防止事物滑动:
<html>
<head>
<style>
.full-width-div {
position: absolute;
width: 100%;
height: 100%;
left: 0;
}
#texto {
width:100%;
height:51px;
color:white;
text-align:center;
}
p.uno {
text-align:center
max-width:90%;
max-height:90%;
color: yellow;
text-shadow: 4px 2px 0px #000000;
font-weight:normal;
color:white;
letter-spacing:1pt;
word-spacing:2pt;
font-size:35px;
text-align:center;
font-family:helvetica, sans-serif;
line-height:1;
}
a{color: yellow;}
a{text-align:center;}
a {text-decoration: none;}
a.wsnextlink1:link{text-decoration:none; color:#2a5db0;}
a.wsnextlink1:visited{text-decoration:none; color:#560080;}
a.wsnextlink1:hover{text-decoration:underline; color:#800000;}
div.shadow {
padding-top: 5px;
text-align: center;
max-width:90%;
max-height:90%;
overflow:visible;
}
img.logo {
padding-top: 5px;
max-width:90%;
max-height:90%;
border-radius: 5%;
}
video#bgvideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="full-width-div">
<div>
<div class="shadow">
<div id="texto"><p class="uno">text.</p></div>
<div><img src="017.jpg" class="logo"></div>
<div id="texto"><p class="uno"><a href="finish.html" align="center">link1</a></p></div>
<div id="texto"><p class="uno"><a href="017.html" align="center">link2</a></p></div>
</div>
</div>
<div>
<video id="bgvideo" autoplay loop>
<source src="club08.mp4" type="video/mp4">
<source src="movie.ogg" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
</div>
</body>
</html>
编辑:我在div
周围添加了video
,以确保它也作为块元素呈现。我认为它有时可以呈现为块状或内嵌状态。