在我尝试学习一些网页开发时,我一直试图模仿我在网上遇到的某些网站。现在我正在尝试模仿本网站的内容:http://www.cassidoo.co/
我的问题是,无论屏幕尺寸如何,您如何强制背景图像和导航栏适合屏幕?
我的HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="main">
<h1>Text holder</h1>
<p>Another text holder</p>
</div>
</div>
</div>
<nav>
<div class="container">
<div class="about">
<a href="#a1" id="about">TEXT1</a>
</div>
<div class="resume">
<a href="#r1" id="resume">TEX21</a>
</div>
<div class="projects">
<a href="#p1" id="projects">TEXT3</a>
</div>
</div>
</nav>
</body>
我的CSS:
body {
margin: 0;
}
h1 {
font-weight: 300;
text-align: center;
font-size: 3em;
}
h2 {
font-weight: 300;
text-align: center;
font-size: 2em;
padding-top: 15px;
}
.container p {
font-weight: 200;
text-align: center;
font-size: 1.5em;
}
.jumbotron {
background-image:url('http://goo.gl/o9un96');
height: 800px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 20px;
color: #fff;
}
nav {
width: 100%;
background-color: #efeff1;
height: 50px;
text-align: center;
}
nav .container {
width: 100%;
max-width: 768px;
}
nav div {
display: inline-block;
text-align: center;
width: 18%;
padding: 5px;
}
nav div a {
text-decoration: none;
color: #333333;
font-weight: 800;
font-size: 1.5em;
}
nav div a:hover {
color: red;
}
.main p {
font-weight: 200;
text-align: center;
font-size: 1.5em;
}
随意提供有用的指针或任何其他信息。
答案 0 :(得分:1)
你快到了。在CSS中,将body
和html
的边距设置为0,将其高度设置为100%。
html, body {
margin: 0;
height: 100%;
}
同时将jumbotron
班级的高度更改为100%
。
将margin-top: 0;
添加到h1
。这是我编辑的所有CSS。
body, html {
margin: 0;
height: 100%;
}
h1 {
margin-top: 0;
font-weight: 300;
text-align: center;
font-size: 3em;
}
.jumbotron {
background-image:url('http://goo.gl/o9un96');
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
nav {
position: absolute;
bottom: 0;
width: 100%;
background-color: #efeff1;
height: 50px;
text-align: center;
}
<div class="jumbotron">
<div class="container">
<div class="main">
<h1>Text holder</h1>
<p>Another text holder</p>
</div>
</div>
<nav>
<div class="container">
<div class="about">
<a href="#a1" id="about">TEXT1</a>
</div>
<div class="resume">
<a href="#r1" id="resume">TEX21</a>
</div>
<div class="projects">
<a href="#p1" id="projects">TEXT3</a>
</div>
</div>
</nav>
</div>
答案 1 :(得分:0)
根据我对你的问题的理解,你想要导航&#34;坚持&#34;到页面底部,然后能够滚过它...是吗?
您需要更改html标记并将所有内容都包含在第一个&#34;页面中#34;在一个容器内。此容器的高度需要为视口的100%。
.jumbotron {
height: 100vh;
}
然后您的导航将需要定位在此容器的底部。
nav {
position: absolute;
bottom: 0;
}
查看这个小提琴的例子: http://jsfiddle.net/NateW/3rr59bgg/
答案 2 :(得分:0)
您指向的特定网站使用javascript实现此效果。导航栏在CSS中始终设置为50px高,然后javascript将标题(您的.jumbotron)的高度设置为全窗口高度减去50px(导航的高度)。每次调整浏览器窗口大小时,Javascript都会重新计算此数字。
想象一下这个HTML
<body>
<div id="headerBackground">
<h1>Content in header</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</body>
此CSS
body {
padding: 0;
margin: 0;
}
#headerBackground {
min-height: 150px;
background: green
}
nav {
width: 100%;
background-color: #efeff1;
text-align: center;
height: 40px;
}
nav ul {
display: inline-block;
padding: 0;
margin: 0;
vertical-align: top;
}
nav ul li {
float: left;
list-style-type: none;
padding: 10px 25px;
}
h1 {
margin: 0 0 0 0;
}
这个JavaScript(jQuery)
// The first three lines sets the height of the header when the page first load
siteHeight = $(window).height();
navHeight = $('nav').height();
$('#headerBackground').height(siteHeight-navHeight+'px');
// The rest of the code sets new height for the header every time the browser window is resized
$ (window).resize(function() {
siteHeight = $(window).height();
$('#headerBackground').height(siteHeight-navHeight+'px');
});
所以,没有高度:100%;涉及这里,只是不断的数学。我已经在codepen中为你设置了它,所以你可以看到它是如何完成的:)