Question

html和css世界的新手，目前正在制作我自己的单页网站。

我在填充和删除css中的白色方面遇到了一些问题。

首先，我无法删除第一页和第二页之间的白色块...在我在第二页上输入任何文字之前，它很好吗？但是现在有些已经在页面上实现了，它已经出现了吗？

其次，如何正确推送文本？我的导航栏中有一个标题，但它没有包含在无序列表中？我是否正确地设置了我的HTML？可以解决这个问题吗？我尝试在html上更改一些内容，但这只会让情况变得更糟。

[ Problem with White space and title in top left[1]

HTML

<!DOCTYPE html>
<html>

<head>
  <link href="./Style.css" type="text/css" rel="stylesheet">
  <title> George Gilliland </title>
</head>

<body>
<div class = "Title-Page">
  <div class = "Nav">
    <ul>
      <li><a href="#About-Me">About Me</a></li>
      <li><a href="#Projects">Projects</a></li>
      <li><a href="#Contact">Contact</a></li>
    </ul>
  </div>
     <h1 id = "Title"> George Gilliland </h1>
  </div>
</div>

  <div id = "About-Me">
     <p>
  Lorem ipsum dolor sit amet, ea nec oportere torquatos, has sumo <br>
  hinc vide et. In has aliquip eruditi, quis dicam sit ut.Tota 
  gubergren 
   </p>
  </div>

  <div id = "Projects">
  </div>

  <div id = "Contact">
  </div>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poiret+One');

a:link {
    text-decoration: none;
}

a:visited {
    color: white;
}

 .Nav {
    border:1px solid #ccc;
    border-width:1px 0;
    font-family: Poiret One;
    position: fixed;
    top: 0;
    width: 100%;
    padding-right: 50cm;
}

.Nav ul {
  text-align: right;
}

.Nav li{
    display:inline;
}

.Nav a {
    display:inline-block;
    padding:10px;
}

body, html {
    height: 100%;
}

body {

  margin: 0;
  padding: 0;
  width: 100%;
}

.Title-Page {
  background-image: url("Images/Campeche.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

#Title {
  font-family: Poiret One;
  color: white;
  font-size: 60px;
  position: fixed;
  margin-top: 0;
}

#About-Me {
  background-color: #00818f;
  height: 100%;
}

h2.Font {
  font-family: Nixie One;
}

#About-Me p {
  padding:90px;
  font-size:25px;
  color:white;
  height:120px;
}

Answer 1

您可以在约P上设置0px的上限。请参阅下面的codepen和代码。

#About-Me p {
  padding:90px;
  font-size:25px;
  color:white;
  height:120px;
  margin-top: 0px;
}

https://codepen.io/BobDempsey/pen/QaBGvz

在css中填充和去除白色

1 个答案: