Html 我的网站是；“覆盖”；在大屏幕上_Html_Css

Html 我的网站是；“覆盖”；在大屏幕上

html css

Html 我的网站是；“覆盖”；在大屏幕上,html,css,Html,Css,所以我做了一个观察列表，实际上现在只是一个图片库和一个菜单。但是在第二个屏幕上，图片覆盖在我的菜单上的屏幕越大。我想这是因为我用了px而不是%或smth，所以我试着改变它，但问题是找到了它的位置。由于某些原因，某些标记甚至不能与%一起使用。我甚至不确定这就是问题所在。那只是我的猜测 HTML: 我希望它看起来不错它看起来不太好看。我建议您将整个HTML和CSS发布在这里的某个地方，或者共享一个代码笔，这样我们就可以调试您的代码了此外，我建议您使用和为您的网站进行布局。例如，我可以看到，我

所以我做了一个观察列表，实际上现在只是一个图片库和一个菜单。但是在第二个屏幕上，图片覆盖在我的菜单上的屏幕越大。

我想这是因为我用了px而不是%或smth，所以我试着改变它，但问题是找到了它的位置。由于某些原因，某些标记甚至不能与%一起使用。我甚至不确定这就是问题所在。那只是我的猜测

HTML:

我希望它看起来不错

它看起来不太好看。

我建议您将整个HTML和CSS发布在这里的某个地方，或者共享一个代码笔，这样我们就可以调试您的代码了

此外，我建议您使用和为您的网站进行布局。例如，我可以看到，我们可以使用基本网格和flex实现您的设计结构。您的案例中的实现是基本的，这将是一个良好的开端。考虑学习它们。我对您的代码进行了更改，添加了flex和grid。我还实现了一个响应代码，这样，如果屏幕尺寸减小，事情看起来还是不错的

使用的代码：

HTML

我已经使用网格和flex的基本简单用法创建了您的布局。

尝试使用viewporti我将此代码添加到meta:name=“viewport”content=“width=device width，initial scale=1.0”中，但它没有任何作用。这不适用于较小的屏幕吗？将100%的宽度更改为100vw，高度更改为100vh将宽度更改为100vw，高度更改为100vh。现在它看起来很奇怪：/试过了，但很遗憾它不起作用。我会在问题中添加完整的代码是的，当然会更好。嘿@DmitrijIvanov，我已经更改了我的答案。看一看。我在HTML中添加了几个div，并对CSS进行了更改。我还添加了媒体查询，以便网页在移动设备上看起来更好。让我知道它是否解决了您的问题。！！谢谢，它正在工作！但是现在菜单这么大，我怎么能把它弄得更小/更靠近左边？我尝试从菜单和untermenu中更改填充，我也尝试了边距0和更改宽度，但没有任何效果“%”值是菜单宽度的百分比。你可以随意改变它。此外，如果您想了解网格布局，请务必阅读本（）绝妙指南。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head> 
<body>
 <div class="menu">
  <button class="untermenu">TV</button>
    <div class="untermenu-links">
    <a href="schauen.html">am schauen</a>
    <a href="fertig.html">geschaut</a>
    <a href="wird.html">wird geschaut</a>
    </div>
  <button class="untermenu">Anime</button>
    <div class="untermenu-links">
    <a href="schauen2.html">am schauen</a>
    <a href="fertig2.html">geschaut</a>
    <a href="wird2.html">wird geschaut</a>
    </div>
</div>

<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">      
  <div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>

<div class="gallery">
    <img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
  <div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>

<script>
var untermenu = document.getElementsByClassName("untermenu");
var i;

for (i = 0; i < untermenu.length; i++) 
{
  untermenu[i].addEventListener("click", function() 
  {
    this.classList.toggle("active");
    var untermenuContent = this.nextElementSibling;
    if (untermenuContent.style.display === "block") 
    {
      untermenuContent.style.display = "none";
    } 
    else 
    {
      untermenuContent.style.display = "block";
    }
  });
} 
</script>

</body>
</html>

    body
{
    background-color: #e2e2e0;
}

h1
{
 font-family: Arial, "Times new roman";
 position: relative;
 left: 170px;
}
.menu
{
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #111;
  padding-top: 50px;
}

 .menu a, .untermenu
 {
  padding: 8px 15px 10px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  cursor: pointer;
    }

div.gallery 
{
  position: relative;
  left: 9%;
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 230px;
    }

div.gallery:hover 
{
  border: 1px solid #777;
}
div.gallery img 
{
  width: 100%;
  height: 10em;
}

div.desc 
{
  padding: 15px;
  text-align: center;
  background-color: white;
}

p
{
  padding: 0;
  margin: 0;
  line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
  color: #f1f1f1;
}

.untermenu-links
{
  display: none;
  background-color: #262626;
}

.active 
{
  background-color: #093802;
  color: white;
}


#kleiner
{
  font-size: 15px;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head> 
<body>
  <div class="body-wrapper">
    <div class="menu">
  <button class="untermenu">TV</button>
    <div class="untermenu-links">
    <a href="schauen.html">am schauen</a>
    <a href="fertig.html">geschaut</a>
    <a href="wird.html">wird geschaut</a>
    </div>
  <button class="untermenu">Anime</button>
    <div class="untermenu-links">
    <a href="schauen2.html">am schauen</a>
    <a href="fertig2.html">geschaut</a>
    <a href="wird2.html">wird geschaut</a>
    </div>
</div>

  <div>
    <div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">      
  <div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>

<div class="gallery">
    <img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
  <div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>


  </div>

  </div>

body
{
    background-color: #e2e2e0;
    padding:0px;
  margin:0px;
}

  .body-wrapper{
  display: grid;
   grid-template-columns: 18% auto;
  grid-template-rows:auto;
}


h1
{
 font-family: Arial, "Times new roman";
 position: relative;
 left: 170px;
}
.menu
{
  min-width: 100%;
  top: 0;
  left: 0;
  background-color: #111;
  padding-top: 50px;
  height: 100vh;
}

 .menu a, .untermenu
 {
  padding: 8px 15px 10px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  cursor: pointer;
    }

div.gallery 
{
  position: relative;
  left: 9%;
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 230px;
    }

div.gallery:hover 
{
  border: 1px solid #777;
}
div.gallery img 
{
  width: 100%;
  height: 10em;
}

div.desc 
{
  padding: 15px;
  text-align: center;
  background-color: white;
}

p
{
  padding: 0;
  margin: 0;
  line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
  color: #f1f1f1;
}

.untermenu-links
{
  display: none;
  background-color: #262626;
}

.active 
{
  background-color: #093802;
  color: white;
}


#kleiner
{
  font-size: 15px;
}

@media only screen and (max-width: 600px) {
  .body-wrapper {
    display: flex;
    flex-direction: column;
  }

  .menu {
    height:100%;
    padding-top: 0px;
    display: flex;
  }
}