0
以下は、私のCSSファイルのコードです。今フォントサイズを大きくするとヘッダーは下がり続けますか？
@-webkit-keyframes change {
83.3%,95.96% {transform:translate3d(0,-10%,0);}
}
body {
background-color: #3A457C;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #fff;
color: #444;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
@media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
h1, h2, p {
font-family: 'Ubuntu', sans-serif;
color: white;
}
h1 {
font-size: 150px;
text-align: center;
-webkit-animation-name: change;
animation-duration: .5s;
line-height: 300px;
}
h2 {
font-size: 50px;
text-align: center;
}
p {
margin-left: 500px;
margin-right: 500px;
font-size: 22px;
}
.header {
cursor: pointer;
background-image: url("http://www.lib.usf.edu/tutoring/files/2015/08/Tutoring-main-banner-02.png");
background-position: center center;
height: 325px;
line-height:0px;
}
/*
#left {
position: fixed;
top: 392px;
left: 0px;
width: 25%;
height: 100%;
background-color: white;
z-index: 1;
}
#top {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
right: 0px;
height:8%;
background-color: white;
}
#hardLeft {
position: fixed;
width: .35%;
top:0px;
left: 0px;
right: 0px;
height: 100%;
background-color: white;
}
#hardRight {
position: right-side;
background-color: white;
}*/
以下は、HTMLファイルのコード
<!DOCTYPE html>
<html>
<div class="nav">
<ul>
<li class = "home"> <a class = "active" href = "J:\Website1\html\home\index.html">Home</a></li>
<li class = "about"> <a href = "J:\Website1\html\about\about.html">About</a></li>
</ul>
</div>
<head>
<title>Home - Tutor</title>
<link href = "J:\Website1\css\indexStyle.css" type = "text/css" rel = "stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id = "background" onclick = 'window.location.href="J:\\Website1\\html\\home\\index.html"'>
<div class = "header">
<h1>Trouble? Tutor.</h1>
</div>
</div>
<h2>About</h2>
<p>My name is John Antonio Anselmo, and I currently go to Battlefield High School in Haymarket, Virginia. I'm currently enlisted in Battlefield's IT Program with a plan to study Cyber Security, Computer Science,
and Business at the Massachusetts Institute of Technology (MIT), or Virginia Tech (VT). I have exceeded in the maths and sciences since a very young age, and continue to.</p>
</body>
</html>
問題は、私はH1のフォントサイズを大きく保つよう、ヘッダは上から遠くと遠くなって続けて、ですページでは、h1フォントサイズを150ピクセルに保ちたいが、ページの上部にヘッダーを置いておきたい。 thisのように見えますが、h1（Trouble？Tutor。）が150pxになることを除いて、thisのように見えます。
ありがとうございます！私はそれを逃してかなり馬鹿だと思う。私はこれを覚えておきます。 –