Question

我还有另一个问题。我决定创建类似Mr.Robot的web-fanpage。我想练习html和css +学习JS。但是有一个问题我无法解决。 div之间有空间。我尝试了很多教程如何删除它，但没有一个帮助。

body {
  width: 100%;
  height: 100%;
  margin-left: 0px;
  margin-top: 0px;
}

#main {
  height: 100%;
  width: 100%;
}

header {
  background: black;
  padding: 1px;
  max-width: 100%;
}

header p {
  margin-left: 50px;
  font-family: 'Inconsolata', monospace;
  font-size: 50px;
  text-align: center;
}

.barva {
  color: #B20707;
}

.menu {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background: black;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.menu a {
  display: block;
  text-decoration: none;
  color: white;
  font-size: 20px;
  padding: 8px;
  transition: 0.3s;
  margin-left: 20px;
  font-family: 'Poppins', sans-serif;
}

.menu a:hover {
    color: #B20707;
}

.Openbt {
cursor: pointer;
position:absolute;
top: 0;
left: 0;
margin-top: 20px;
margin-left: 10px;
float:left;
color: #B20707;
font-size: 50px;
}

.menu .closebt {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  color: #B20707;
}


@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

}
.domu {
  height: auto;
}

img
{
  max-width: 100%;
}

.about {
  height: auto;
  max-width: 100%;
  min-height: 250px;
  background: black;
}

<!doctype html>
<html lang="cs-cz">
<head>
  <link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8">
  <title>Yaaa boiii</title>
</head>
<body>

  <header>
      <p style="color:white "><span class="barva">ID:_ROOT:</span>Our<span class="barva">_democracy_</span>has<span class="barva">_</span><span class="barva">been</span>_hacked</p>
      <div class=Openbt>
    <span onclick="openNav()"><i class="fa fa-bars"></i></span>
      </div>
  </header>

<div  id="mySidemenu" class="menu">
  <a href="javascript:void(0)" class="closebt" onclick="closeNav()">&times;</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
</div>

<div id="main"> <!-- Veškerý kontent -->
  <div class="domu">
    <img src="obrazky/robot.jpg" width="1920" height="1000" />
  </div>
  <div class="about">

  </div>
</div>

<script>
  function openNav() {
    document.getElementById('mySidemenu').style.width = "250px";
    document.getElementById('header').style.marginLeft = "250px";
    document.getElementById("main").style.marginLeft = "250px";
  }
  function closeNav() {
    document.getElementById('mySidemenu').style.width = "0px";
    document.getElementById("main").style.marginLeft = "0px";
  }
</script>

</body>
</html>

也许你注意到我必须为图片设置一些宽度和高度。如何设置高度100％和宽度100％？我试着把它输入到.domu但它没有用。

Answer 1

两种解决方案都涉及改变你的CSS;

1）您可以更改您的身体背景颜色以匹配约背景颜色。这可以通过在css中添加以下内容来完成。

body
{
  background: black;
}

2）您可以在display: block;标记上使用img样式。

    <img src="obrazky/robot.jpg" width="1920" height="1000"  style="display: block;"/>

祝你好运

div之间的空间很小

1 个答案: