我正在尝试为我建立一个网站,但我遇到了一些问题。
这就是我想要实现的目标:
这就是我到目前为止所拥有的
以下是我目前面临的问题:
我无法摆脱导航栏下方的空白区域,我删除了导航栏和窗口其余部分的边距和填充,但它不起作用。
我无法像第一张图片一样在中间垂直对齐文字。我尝试使用行高和填充但是当我垂直调整浏览器窗口大小时,文本不响应大小。 无论浏览器窗口的大小如何,我希望它保持在中间位置。
使背景图像适合窗口大小的最佳方法是什么?目前我正在使用
宽度:100%; 高度:100vh; 背景图像:URL( “图像/ background.jpg”); background-size: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>
如果有人可以帮助我解决所有这些问题,我将非常感激
答案 0 :(得分:1)
1)您必须将padding-top: 1px;
添加到#jumbo
或从h1中删除margin-top。
2)使用包装器对齐文本。然后将top:50%; transform:translate(0, -50%);
应用于它
3)#jumbo {background-size:cover; }
#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>
答案 1 :(得分:0)
要删除不需要的边距和填充,只需在CSS顶部添加以下内容:
* {
margin:0;
padding:0;
}
这将删除 ALL 元素的边距,除非在*
选择器下方另行声明。
JsFiddle *
选择器
或者,您可以将margin-top:0;
添加到#jumbo h1
,以仅删除标题和内容之间的空白。
margin-top
的希望这有帮助!
答案 2 :(得分:0)
答案 3 :(得分:0)
<强> 1。添加它以消除空白区域(它来自h1标签)。
* {
margin:0;
padding:0;
}
您可以通过右键单击h1标签并单击“检查”来查看。
<强> 2。在div中居中文本
有关详细信息,请参阅this answer。
第3。完美的整页背景图片
CSS技巧对此有a great post。
答案 4 :(得分: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;
}
这是一篇关于如何align vertically的完整文章 3-最好的方法是
background-size: cover;
height: 100%;
100vh并非在所有浏览器中都很常见
答案 5 :(得分:0)
body{margin:0; padding:0}
并应用#jumbo h1{margin: 0;}
2.apply #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>
,并添加像.v-block{height: 80px;position: absolute;width: 100%;top: 50%;margin-top: -40px;}
最终的代码在下面..
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>