0

我正在尝试为我建立一个网站，但我遇到了一些问题。

这就是我想要实现的目标：

Photoshop 图像

这就是我到目前为止所拥有的

实际图像

以下是我目前面临的问题：

  1. 我无法摆脱导航栏下方的空白，我删除了导航和窗口其余部分的边距和填充，但它不起作用。

  2. 我无法像第一张图片一样在中间垂直对齐文本。我尝试使用行高和填充，但是当我垂直调整浏览器窗口的大小时，文本不会响应大小。无论浏览器窗口的大小如何，我都希望它保持在中间。

  3. 让背景图像适合窗口大小的最佳方法是什么？目前我正在使用

    宽度：100%；高度：100vh；背景图像：url（“图像/背景.jpg”）；背景尺寸：100% 100%；

但我觉得这不是最好的方法

到目前为止，这是我的文件：

#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #272727;
  border-top: 2px solid #5e20d1;
  text-align: center;
}
#navigation a {
  display: inline-block;
  color: #747272;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 15px;
  padding-left: 15px;
  margin: 0;
  text-decoration: none;
}
#navigation li {
  display: inline;
  margin: auto;
}
#navigation a:hover {
  color: white;
}
#jumbo {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 90vh;
  background-image: url("http://i.imgur.com/D1cF3ZG.jpg");
  background-size: 100% 100%;
}
#jumbo li {
  display: inline;
  margin: 1%;
  color: white;
  font-size: 20px;
}
#jumbo h1 {
  color: white;
  font-size: 30px;
}
<div id="navigation">
  <ul>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Skills</a>
    </li>
    <li><a href="#">Projects</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

<div id="jumbo">
  <h1>Responsive Front-end Developer</h1>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JAVASCRIPT</li>
    <li>JQUERY</li>
    <li>WORDPRESS</li>
  </ul>
</div>

如果有人可以帮助我解决所有这些问题，我将不胜感激

4

6 回答 6

1

1）您必须在 h1 中添加padding-top: 1px;或#jumbo删除边距顶部。

2）使用包装来对齐文本。然后申请top:50%; transform:translate(0, -50%);它

3) #jumbo { 背景尺寸：封面；}

#navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #272727;
  border-top: 2px solid #5e20d1;
  text-align: center;
}
#navigation a {
  display: inline-block;
  color: #747272;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 15px;
  padding-left: 15px;
  margin: 0;
  text-decoration: none;
}
#navigation li {
  display: inline;
  margin: auto;
}
#navigation a:hover {
  color: white;
}
#jumbo {
	text-align:center;
  margin: 0;
  padding: 1px 0 0 0;
  width: 100%;
  height: 90vh;
  background-image: url("http://i.imgur.com/D1cF3ZG.jpg");
  background-size: cover;
}
#jumbo li {
  display: inline;
  margin: 1%;
  color: white;
  font-size: 20px;
}
#jumbo h1 {
  margin-top:0;
  color: white;
  font-size: 30px;
  /*background-color:rgba(0,0,0,.5);*/
}
.teaser {
	position:relative;
	/*background-color:rgba(0,0,0,.5);*/
	top:50%;
	transform:translate(0, -50%);
}
<div id="navigation">
  <ul>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Skills</a>
    </li>
    <li><a href="#">Projects</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </ul>
</div>

<div id="jumbo">
<div class="teaser">
<h1>Responsive Front-end Developer</h1>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JAVASCRIPT</li>
    <li>JQUERY</li>
    <li>WORDPRESS</li>
  </ul>
</div>
  
</div>

于 2016-02-03T08:26:28.737 回答
0

要删除不需要的边距和填充，您只需在 CSS 顶部添加以下内容：

* {
    margin:0;
    padding:0;
}

这将删除所有元素的边距，除非在选择器下方另有声明*。

*选择器的JsFiddle示例

或者，您可以添加margin-top:0;到#jumbo h1仅删除标题和内容之间的空格。

JsFiddle示例margin-top

希望这可以帮助！

于 2016-02-03T08:26:11.270 回答
0

1）那个空白只是margin-toph1。

2）使用flexbox。

3)完美的整页背景图片

于 2016-02-03T08:26:36.347 回答
0

1. 添加这个以消除空白（它来自 h1 标签）。 

* {
  margin:0;
  padding:0;
}

您可以通过右键单击 h1 标记并单击检查来看到这一点。

2. 在 div 中居中文本

有关详细信息，请参阅此答案。

3.完美的整页背景图片

CSS Tricks 对此有一篇很棒的文章。

于 2016-02-03T08:28:28.413 回答
0

这是您提到的问题的答案，因为您提到 1-H1 标签默认情况下具有顶部和向下边距，因此 H1 标签的边距顶部会导致问题摆脱它，您必须将其删除

#jumbo h1 {
   color: white;
   font-size: 30px;
   margin-top: 0;
   padding-top: 20px;

}

2-您必须将 jumbtron 的内容包装在新容器中，然后给 jumbtron 显示表和包装器显示表单元格并垂直对齐中间；

 <div id="jumbo">
 <div class="wrapper">
 <h1>Responsive Front-end Developer</h1>
 <ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JAVASCRIPT</li>
 <li>JQUERY</li>
 <li>WORDPRESS</li>
</ul>
</div>

和 CSS

#jumbo {
 display:table;
 }
#jumbo .wrapper{
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

这是一篇关于如何垂直对齐的完整文章 3-最好的方法是

 background-size: cover;
 height: 100%;

100vh 在所有浏览器中并不常见

于 2016-02-03T08:51:02.640 回答
0
  1. 你的身体可能有一些填充/边距。所以让它归零body{margin:0; padding:0}并应用#jumbo h1{margin: 0;}

2.申请#jumbo{text-align:center;position: relative;}。然后像这样添加一个额外的div<div class='v-block'><h1>Responsive Front-end Developer</h1><ul><li>HTML</li><li>CSS</li><li>JAVASCRIPT</li><li>JQUERY</li><li>WORDPRESS</li></ul></div>并添加css .v-block{height: 80px;position: absolute;width: 100%;top: 50%;margin-top: -40px;}

  1. 背景尺寸：封面；这将避免背景图像的拉伸。

最终代码如下..

body{
                margin: 0;
                padding: 0;
            }
            #navigation ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #272727;
                border-top: 2px solid #5e20d1;
                text-align: center;
            }
            #navigation a {
                display: inline-block;
                color: #747272;
                text-align: center;
                padding-top: 15px;
                padding-bottom: 15px;
                padding-right: 15px;
                padding-left: 15px;
                margin: 0;
                text-decoration: none;
            }
            #navigation li {
                display: inline;
                margin: auto;
            }
            #navigation a:hover {
                color: white;
            }
            #jumbo {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 90vh;
                background-image: url("http://i.imgur.com/D1cF3ZG.jpg");
                background-size: 100% 100%;
                text-align: center;
                position: relative;
                background-size: cover;
            }
            #jumbo li {
                display: inline;
                margin: 1%;
                color: white;
                font-size: 20px;
            }
            #jumbo h1 {
                color: white;
                font-size: 30px;
                margin: 0;
            }
            .v-block{
                height: 80px;
                position: absolute;
                width: 100%;
                top: 50%;
                margin-top: -40px;
            }
<div id="navigation">
            <ul>
                <li><a href="#">About</a>
                </li>
                <li><a href="#">Skills</a>
                </li>
                <li><a href="#">Projects</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
            </ul>
        </div>

        <div id="jumbo">
            <div class='v-block'>
                <h1>Responsive Front-end Developer</h1>
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JAVASCRIPT</li>
                    <li>JQUERY</li>
                    <li>WORDPRESS</li>
                </ul>
            </div>
        </div>

于 2016-02-03T08:52:15.043 回答