Javascript 为什么我的网页内容重叠?
我是一个业余的编码,我试图为自己的网站编码。为什么我的内容重叠?如何使第1节中的内容低于幻灯片放映容器中的内容 下图是我目前遇到的问题: 下面的图片是我想要它的样子:Javascript 为什么我的网页内容重叠?,javascript,html,css,Javascript,Html,Css,我是一个业余的编码,我试图为自己的网站编码。为什么我的内容重叠?如何使第1节中的内容低于幻灯片放映容器中的内容 下图是我目前遇到的问题: 下面的图片是我想要它的样子: var slideIndex=0; 放映幻灯片(); 函数showSlides(){ var i; var slides=document.getElementsByClassName(“mySlides”); var dots=document.getElementsByClassName(“dot”); 对于(i=0;isl
var slideIndex=0;
放映幻灯片();
函数showSlides(){
var i;
var slides=document.getElementsByClassName(“mySlides”);
var dots=document.getElementsByClassName(“dot”);
对于(i=0;islides.length){slideIndex=1}
对于(i=0;i
*{框大小:边框框;}
.mySlides{display:none;}
.slideshow容器img{垂直对齐:中间;
高度:500px;
}
/*幻灯片容器*/
.slideshow容器{
最大宽度:800px;
高度:10px;
位置:相对位置;
保证金:自动;
}
/*点/子弹/指示器*/
多特先生{
高度:7px;
宽度:7px;
保证金:2倍;
背景色:#000000;
边界半径:50%;
显示:内联块;
过渡:背景色0.6s;
}
.主动{
背景色:#C5B358;
}
/*褪色动画*/
.褪色{
-webkit动画名称:淡入淡出;
-webkit动画持续时间:1.5s;
动画名称:淡入淡出;
动画持续时间:1.5s;
}
@-webkit关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
/*在较小的屏幕上,减小文本大小*/
@仅介质屏幕和(最大宽度:300px){
.text{字体大小:11px}
}
.slideshow container.btn{
位置:绝对位置;
最高:3150%;
左:50%;
转换:翻译(-50%,-50%);
-ms转换:翻译(-50%,-50%);
背景色:黑色;
颜色:白色;
字体大小:12px;
填充:6px 12px;
边界:无;
光标:指针;
文本对齐:居中;
}
.slideshow容器.btn3{
位置:绝对位置;
最高:4650%;
左:50%;
转换:翻译(-50%,-50%);
-ms转换:翻译(-50%,-50%);
背景色:黑色;
颜色:白色;
字体大小:12px;
填充:6px 12px;
边界:无;
光标:指针;
文本对齐:居中;
}
.slideshow容器。btn:悬停{
颜色:#C5B358;
}
.slideshow容器。btn3:悬停{
颜色:#C5B358;
}
.第1节h1{
字体大小:60px;
字体系列:Helvetica;
字号:100;
文本对齐:居中;
}
.第1 p节{
字体系列:Helvetica;
文本对齐:居中;
线高:1.5;
}
日程
浏览
商店
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
如果您最初想要一些高度,您可以将最小高度:
设置到幻灯片放映容器中。您的内容超过了高度
,并且在幻灯片容器
上溢出。试试这个:)
完整代码:
*{框大小:边框框;}
.mySlides{display:none;}
.slideshow容器img{垂直对齐:中间;
高度:500px;
}
/*幻灯片容器*/
.slideshow容器{
最大宽度:800px;
最小高度:10px;/*使用的最小高度*/
位置:相对位置;
保证金:自动;
}
/*点/子弹/指示器*/
多特先生{
高度:7px;
宽度:7px;
保证金:2倍;
背景色:#000000;
边界半径:50%;
显示:内联块;
过渡:背景色0.6s;
}
.主动{
背景色:#C5B358;
}
/*褪色动画*/
.褪色{
-webkit动画名称:淡入淡出;
-webkit动画持续时间:1.5s;
动画名称:淡入淡出;
动画持续时间:1.5s;
}
@-webkit关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
/*在较小的屏幕上,减小文本大小*/
@仅介质屏幕和(最大宽度:300px){
.text{字体大小:11px}
}
.slideshow container.btn{
位置:绝对位置;
最高:3150%;
左:50%;
转换:翻译(-50%,-50%);
-ms转换:翻译(-50%,-50%);
背景色:黑色;
颜色:白色;
字体大小:12px;
填充:6px 12px;
边界:无;
光标:指针;
文本对齐:居中;
}
.slideshow容器.btn3{
位置:绝对位置;
最高:4650%;
左:50%;
转换:翻译(-50%,-50%);
-ms转换:翻译(-50%,-50%);
背景色:黑色;
颜色:白色;
字体大小:12px;
填充:6px 12px;
边界:无;
光标:指针;
文本对齐:居中;
}
.slideshow容器。btn:悬停{
颜色:#C5B358;
}
.slideshow容器。btn3:悬停{
颜色:#C5B358;
}
.第1节h1{
字体大小:60px;
字体系列:Helvetica;
字号:100;
文本对齐:居中;
}
.第1 p节{
字体系列:Helvetica;
文本对齐:居中;
线高:1.5;
}
日程
浏览
商店
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.slideshow-container {
max-width: 800px;
min-height: 10px;// Change to min-height
position: relative;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>slide</title>
</head>
<style type="text/css">
* {box-sizing: border-box;}
.mySlides {display: none;}
.slideshow-container img {vertical-align: middle;
height:500px;
}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
/*height: 10px;*/
position: relative;
margin: auto;
}
/* The dots/bullets/indicators */
.dot {
height: 7px;
width: 7px;
margin: 2px;
background-color: #000000;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #C5B358;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
.slideshow-container .btn {
position: absolute;
top: 3150%;
left:50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
background-color: black;
color: white;
font-size: 12px;
padding:6px 12px;
border: none;
cursor: pointer;
text-align: center;
}
.slideshow-container .btn3 {
position: absolute;
top: 4650%;
left:50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
background-color: black;
color: white;
font-size: 12px;
padding:6px 12px;
border: none;
cursor: pointer;
text-align: center;
}
.slideshow-container .btn:hover {
color:#C5B358;
}
.slideshow-container .btn3:hover {
color:#C5B358;
}
.section-1 h1{
font-size: 60px;
font-family: Helvetica;
font-weight: 100;
text-align: center;
}
.section-1 p{
font-family: Helvetica;
text-align: center;
line-height: 1.5;
}
</style>
<body>
<div class="main">
<div class="slideshow-container">
<div class="mySlides fade">
<img src="file:///User/Name/Desktop/ A.png" style="width:100%">
<button class="btn">SCHEDULE</button>
</div>
<div class="mySlides fade">
<img src="file:///User/Name/Desktop/B.png"style="width:100%">
<button class="btn">BROWSE</button>
</div>
<div class="mySlides fade">
<img src="file:///User/Name/Desktop/C.png"style="width:100%">
<button class="btn3">SHOP</button>
</div>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="section-1">
<h1>AAA AAA AAAAAAA AAAA<br>AA A AAAAA AAAA</h1>
<p>AAAAAAA AA AAA AAAAAA AAAAA, AAAAA AA AAAAA A AAAAA AA AAA AAAAAAA AAAAAAAAAAA AA AA AAAAAAAAAA AAAAA.<br>AAA AAAAAAAA AAAAAAA AA AAAAAAAAA, AAA AA AAAAA AAA AAA AAAAAA AAA AAAAAAAA AAAAA.<br>AAAAA AAAA AAAA AAAAAA AAAAAAA AAA? <Br>AAAAAAA AA AAA AA AAAA AAAAA AAA AAA AAAA AAAAA. </p>
</div>
</div>
<script type="text/javascript">
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 7000); // Change image every 7 seconds
}
</script>
</body>
</html>