如何让主题按钮影响整个页面
How to make theme button affect whole page
我的页面上有一个深色 theme/light 主题按钮,但页面顶部有一个空白 space。我想删除那个空白 space 并希望效果看起来像是在整个页面上应用。
这是它的代码(顶部是 HTML,底部是 CSS):
http://pastebin.com/GL4vvUQN
body {
margin: 0px;
padding: 0px;
overflow-y: scroll;
font-family: Helvetica;
font-size: 18px;
background-color: #bdbdbd;
}
.nav {
background-color: #222;
position: relative;
width: 100%;
}
.nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.nav ul li {
display: inline-block;
background-color: #222;
transition: background-color 0.3s ease-in;
position: relative;
padding-top: 3px;
padding-bottom: 3px;
}
.nav ul li img {
width: 12px;
height: 10px;
vertical-align: middle;
padding-left: 10px;
}
.nav ul li a,
visited {
display: block;
padding: 15px;
text-decoration: none;
transition: color 0.2s ease-in;
}
.nav ul li a:hover {
text-decoration: none;
color: #099;
}
.navhome {
color: #099;
border-bottom: 3px solid #099;
}
.navother {
color: #ccc;
}
.content {
text-align: center;
line-height: 130%;
font-size: 20px;
}
.bdaimg {
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
margin-top: 30px;
transform: scale(1);
transition-duration: 0.3s;
border-radius: 15px;
}
.bdaimg:hover {
transform: scale(1.1);
transition-duration: 0.3s;
}
.nu {
font-weight: bold;
font-size: 25px;
}
h3 {
font-weight: bold;
text-decoration: underline;
}
h2 {
font-weight: bold;
text-decoration: underline;
}
.bdaimg2 {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
margin-top: 30px;
transform: scale(1);
transition-duration: 0.3s;
border-radius: 15px;
}
.bdaimg2:hover {
transform: scale(1.1);
transition-duration: 0.3s;
}
/*Light Switch*/
label {
display: block;
height: 25px;
width: 100px;
background: white;
text-align: center;
font: 14px/25px Helvetica, Arial, sans-serif;
margin: 20px 0;
position: absolute;
}
label:hover {
background: #ddca7e;
color: white;
cursor: pointer;
}
input#lightswitch {
position: fixed;
top: -9999px;
left: -9999px;
}
input#lightswitch + .content {
background-color: #bdbdbd;
transition: background-color 0.5s ease-in;
}
/*Switched Off*/
input#lightswitch:checked + .content {
background-color: #222;
transition: background-color 0.5s ease-in;
}
input#lightswitch:checked + .content {
color: white;
}
input#lightswitch:checked + .content {
color: white;
}
<!DOCTYPE html>
<head>
<title>Beijing Dance Academy</title>
<link rel="stylesheet" type="text/css" href="bda.css">
</head>
<body>
<div class="nav">
<div class="nav_wrapper">
<ul>
<li><a class="navother" href="Home.html">Home</a>
</li>
<li><a class="navother" href="CR.html">Cultural Revolution</a>
</li>
<li><a class="navhome" href="BDA.html">Beijing Dance Academy</a>
</li>
<li><a class="navother" href="CNY.html">Chinese New Year</a>
</li>
</ul>
</div>
</div>
<label for="lightswitch">Light Switch</label>
<input type="checkbox" id="lightswitch" />
<div class="content">
<img src="bda.png" alt="BDA" class="bdaimg">
<p>
<h2>Beijing Dance Academy</h2>
Beijing Dance Academy, or BDA, was the first professional dance school founded in China, in 1954. The academy was helped by Soviet Russia in building the academy and the techniques they used to learn dance. Although Russia helped with the Beijing Dance
Academy, China's repressive Communist government forbidded Russian presence in the school. The Beijing Dance Academy soon opened back up to all people from around the world when, in 1976, China's Communist leader, Mao Zedong, died.
<br>
<br>Several times a year, Beijing Dance Academy holds auditions to be accepted into the school, for more disadvantaged areas officals come around small towns and schools and pick out children of age, the academy initially only accepted students from
ages 11 to 18 but eventually the age range expanded. They then test the student's basic body abilities. More than 2,000 children audition to be accepted into the academy but only 1 in every 20 make the cut. Majority of the children in the academy
are Chinese but the academy has an additional program that allows international students to apply.
<br>
<br>
<h3>
A Day in the Life of a Student
</h3>
A day of a Beijing Dance Academy student starts with basic warm-ups and stretches such as flexibility exercises and drills for turns and jumps. After breakfast, the students have a ballet technique class followed by character dance or pas de deux exercises.
Then after lunch, the students study normal subjects such as mathematics or Chinese for 3 hours. In the afternoon, they have repertory classes or study or do homework. The Beijing Dance Academy is run for the whole week...
</p>
<p class="nu">
INCLUDING SATURDAY AND SUNDAY!
<img src="sadface.png" alt="SpongebobSadFace" class="bdaimg2">
</p>
</div>
</body>
尝试添加 负边距 来删除空白空间,如下所示:
.content {
text-align: center;
line-height: 130%;
font-size: 20px;
margin-top: -30px;
}
这是改进后的代码:
body {
margin: 0px;
padding: 0px;
overflow-y: scroll;
font-family: Helvetica;
font-size: 18px;
background-color: #bdbdbd;
}
.nav {
background-color: #222;
position: relative;
width: 100%;
}
.nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.nav ul li {
display: inline-block;
background-color: #222;
transition: background-color 0.3s ease-in;
position: relative;
padding-top: 3px;
padding-bottom: 3px;
}
.nav ul li img {
width: 12px;
height: 10px;
vertical-align: middle;
padding-left: 10px;
}
.nav ul li a,
visited {
display: block;
padding: 15px;
text-decoration: none;
transition: color 0.2s ease-in;
}
.nav ul li a:hover {
text-decoration: none;
color: #099;
}
.navhome {
color: #099;
border-bottom: 3px solid #099;
}
.navother {
color: #ccc;
}
.content {
text-align: center;
line-height: 130%;
font-size: 20px;
margin-top: -30px;
}
.bdaimg {
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
margin-top: 30px;
transform: scale(1);
transition-duration: 0.3s;
border-radius: 15px;
}
.bdaimg:hover {
transform: scale(1.1);
transition-duration: 0.3s;
}
.nu {
font-weight: bold;
font-size: 25px;
}
h3 {
font-weight: bold;
text-decoration: underline;
}
h2 {
font-weight: bold;
text-decoration: underline;
}
.bdaimg2 {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
margin-top: 30px;
transform: scale(1);
transition-duration: 0.3s;
border-radius: 15px;
}
.bdaimg2:hover {
transform: scale(1.1);
transition-duration: 0.3s;
}
/*Light Switch*/
label {
display: block;
height: 25px;
width: 100px;
background: white;
text-align: center;
font: 14px/25px Helvetica, Arial, sans-serif;
margin: 20px 0;
position: absolute;
}
label:hover {
background: #ddca7e;
color: white;
cursor: pointer;
}
input#lightswitch {
position: fixed;
top: -9999px;
left: -9999px;
}
input#lightswitch + .content {
background-color: #bdbdbd;
transition: background-color 0.5s ease-in;
}
/*Switched Off*/
input#lightswitch:checked + .content {
background-color: #222;
transition: background-color 0.5s ease-in;
}
input#lightswitch:checked + .content {
color: white;
}
input#lightswitch:checked + .content {
color: white;
}
<!DOCTYPE html>
<head>
<title>Beijing Dance Academy</title>
<link rel="stylesheet" type="text/css" href="bda.css">
</head>
<body>
<div class="nav">
<div class="nav_wrapper">
<ul>
<li><a class="navother" href="Home.html">Home</a>
</li>
<li><a class="navother" href="CR.html">Cultural Revolution</a>
</li>
<li><a class="navhome" href="BDA.html">Beijing Dance Academy</a>
</li>
<li><a class="navother" href="CNY.html">Chinese New Year</a>
</li>
</ul>
</div>
</div>
<label for="lightswitch">Light Switch</label>
<input type="checkbox" id="lightswitch" />
<div class="content">
<img src="bda.png" alt="BDA" class="bdaimg">
<p>
<h2>Beijing Dance Academy</h2>
Beijing Dance Academy, or BDA, was the first professional dance school founded in China, in 1954. The academy was helped by Soviet Russia in building the academy and the techniques they used to learn dance. Although Russia helped with the Beijing Dance
Academy, China's repressive Communist government forbidded Russian presence in the school. The Beijing Dance Academy soon opened back up to all people from around the world when, in 1976, China's Communist leader, Mao Zedong, died.
<br>
<br>Several times a year, Beijing Dance Academy holds auditions to be accepted into the school, for more disadvantaged areas officals come around small towns and schools and pick out children of age, the academy initially only accepted students from
ages 11 to 18 but eventually the age range expanded. They then test the student's basic body abilities. More than 2,000 children audition to be accepted into the academy but only 1 in every 20 make the cut. Majority of the children in the academy
are Chinese but the academy has an additional program that allows international students to apply.
<br>
<br>
<h3>
A Day in the Life of a Student
</h3>
A day of a Beijing Dance Academy student starts with basic warm-ups and stretches such as flexibility exercises and drills for turns and jumps. After breakfast, the students have a ballet technique class followed by character dance or pas de deux exercises.
Then after lunch, the students study normal subjects such as mathematics or Chinese for 3 hours. In the afternoon, they have repertory classes or study or do homework. The Beijing Dance Academy is run for the whole week...
</p>
<p class="nu">
INCLUDING SATURDAY AND SUNDAY!
<img src="sadface.png" alt="SpongebobSadFace" class="bdaimg2">
</p>
</div>
</body>
问题是你的带有 src="bda.png" 的 img 的 margin-top 是 30px。
这是 html 中的一些奇怪行为,它不会将图像向下移动 30px,但会将图像的父级向下移动 30px。
要解决此问题,您可以将图像的 margin-top 设置为 0px 并将其向下移动div 的 padding-top,或者您可以将包含 div 的 display-属性 设置为 "display: inline-block"。像这样:
.content {
text-align: center;
line-height: 130%;
font-size: 20px;
display: inline-block;
}
我的页面上有一个深色 theme/light 主题按钮,但页面顶部有一个空白 space。我想删除那个空白 space 并希望效果看起来像是在整个页面上应用。
这是它的代码(顶部是 HTML,底部是 CSS): http://pastebin.com/GL4vvUQN
body {
margin: 0px;
padding: 0px;
overflow-y: scroll;
font-family: Helvetica;
font-size: 18px;
background-color: #bdbdbd;
}
.nav {
background-color: #222;
position: relative;
width: 100%;
}
.nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.nav ul li {
display: inline-block;
background-color: #222;
transition: background-color 0.3s ease-in;
position: relative;
padding-top: 3px;
padding-bottom: 3px;
}
.nav ul li img {
width: 12px;
height: 10px;
vertical-align: middle;
padding-left: 10px;
}
.nav ul li a,
visited {
display: block;
padding: 15px;
text-decoration: none;
transition: color 0.2s ease-in;
}
.nav ul li a:hover {
text-decoration: none;
color: #099;
}
.navhome {
color: #099;
border-bottom: 3px solid #099;
}
.navother {
color: #ccc;
}
.content {
text-align: center;
line-height: 130%;
font-size: 20px;
}
.bdaimg {
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
margin-top: 30px;
transform: scale(1);
transition-duration: 0.3s;
border-radius: 15px;
}
.bdaimg:hover {
transform: scale(1.1);
transition-duration: 0.3s;
}
.nu {
font-weight: bold;
font-size: 25px;
}
h3 {
font-weight: bold;
text-decoration: underline;
}
h2 {
font-weight: bold;
text-decoration: underline;
}
.bdaimg2 {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
margin-top: 30px;
transform: scale(1);
transition-duration: 0.3s;
border-radius: 15px;
}
.bdaimg2:hover {
transform: scale(1.1);
transition-duration: 0.3s;
}
/*Light Switch*/
label {
display: block;
height: 25px;
width: 100px;
background: white;
text-align: center;
font: 14px/25px Helvetica, Arial, sans-serif;
margin: 20px 0;
position: absolute;
}
label:hover {
background: #ddca7e;
color: white;
cursor: pointer;
}
input#lightswitch {
position: fixed;
top: -9999px;
left: -9999px;
}
input#lightswitch + .content {
background-color: #bdbdbd;
transition: background-color 0.5s ease-in;
}
/*Switched Off*/
input#lightswitch:checked + .content {
background-color: #222;
transition: background-color 0.5s ease-in;
}
input#lightswitch:checked + .content {
color: white;
}
input#lightswitch:checked + .content {
color: white;
}
<!DOCTYPE html>
<head>
<title>Beijing Dance Academy</title>
<link rel="stylesheet" type="text/css" href="bda.css">
</head>
<body>
<div class="nav">
<div class="nav_wrapper">
<ul>
<li><a class="navother" href="Home.html">Home</a>
</li>
<li><a class="navother" href="CR.html">Cultural Revolution</a>
</li>
<li><a class="navhome" href="BDA.html">Beijing Dance Academy</a>
</li>
<li><a class="navother" href="CNY.html">Chinese New Year</a>
</li>
</ul>
</div>
</div>
<label for="lightswitch">Light Switch</label>
<input type="checkbox" id="lightswitch" />
<div class="content">
<img src="bda.png" alt="BDA" class="bdaimg">
<p>
<h2>Beijing Dance Academy</h2>
Beijing Dance Academy, or BDA, was the first professional dance school founded in China, in 1954. The academy was helped by Soviet Russia in building the academy and the techniques they used to learn dance. Although Russia helped with the Beijing Dance
Academy, China's repressive Communist government forbidded Russian presence in the school. The Beijing Dance Academy soon opened back up to all people from around the world when, in 1976, China's Communist leader, Mao Zedong, died.
<br>
<br>Several times a year, Beijing Dance Academy holds auditions to be accepted into the school, for more disadvantaged areas officals come around small towns and schools and pick out children of age, the academy initially only accepted students from
ages 11 to 18 but eventually the age range expanded. They then test the student's basic body abilities. More than 2,000 children audition to be accepted into the academy but only 1 in every 20 make the cut. Majority of the children in the academy
are Chinese but the academy has an additional program that allows international students to apply.
<br>
<br>
<h3>
A Day in the Life of a Student
</h3>
A day of a Beijing Dance Academy student starts with basic warm-ups and stretches such as flexibility exercises and drills for turns and jumps. After breakfast, the students have a ballet technique class followed by character dance or pas de deux exercises.
Then after lunch, the students study normal subjects such as mathematics or Chinese for 3 hours. In the afternoon, they have repertory classes or study or do homework. The Beijing Dance Academy is run for the whole week...
</p>
<p class="nu">
INCLUDING SATURDAY AND SUNDAY!
<img src="sadface.png" alt="SpongebobSadFace" class="bdaimg2">
</p>
</div>
</body>
尝试添加 负边距 来删除空白空间,如下所示:
.content {
text-align: center;
line-height: 130%;
font-size: 20px;
margin-top: -30px;
}
这是改进后的代码:
body {
margin: 0px;
padding: 0px;
overflow-y: scroll;
font-family: Helvetica;
font-size: 18px;
background-color: #bdbdbd;
}
.nav {
background-color: #222;
position: relative;
width: 100%;
}
.nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.nav ul li {
display: inline-block;
background-color: #222;
transition: background-color 0.3s ease-in;
position: relative;
padding-top: 3px;
padding-bottom: 3px;
}
.nav ul li img {
width: 12px;
height: 10px;
vertical-align: middle;
padding-left: 10px;
}
.nav ul li a,
visited {
display: block;
padding: 15px;
text-decoration: none;
transition: color 0.2s ease-in;
}
.nav ul li a:hover {
text-decoration: none;
color: #099;
}
.navhome {
color: #099;
border-bottom: 3px solid #099;
}
.navother {
color: #ccc;
}
.content {
text-align: center;
line-height: 130%;
font-size: 20px;
margin-top: -30px;
}
.bdaimg {
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
margin-top: 30px;
transform: scale(1);
transition-duration: 0.3s;
border-radius: 15px;
}
.bdaimg:hover {
transform: scale(1.1);
transition-duration: 0.3s;
}
.nu {
font-weight: bold;
font-size: 25px;
}
h3 {
font-weight: bold;
text-decoration: underline;
}
h2 {
font-weight: bold;
text-decoration: underline;
}
.bdaimg2 {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
margin-top: 30px;
transform: scale(1);
transition-duration: 0.3s;
border-radius: 15px;
}
.bdaimg2:hover {
transform: scale(1.1);
transition-duration: 0.3s;
}
/*Light Switch*/
label {
display: block;
height: 25px;
width: 100px;
background: white;
text-align: center;
font: 14px/25px Helvetica, Arial, sans-serif;
margin: 20px 0;
position: absolute;
}
label:hover {
background: #ddca7e;
color: white;
cursor: pointer;
}
input#lightswitch {
position: fixed;
top: -9999px;
left: -9999px;
}
input#lightswitch + .content {
background-color: #bdbdbd;
transition: background-color 0.5s ease-in;
}
/*Switched Off*/
input#lightswitch:checked + .content {
background-color: #222;
transition: background-color 0.5s ease-in;
}
input#lightswitch:checked + .content {
color: white;
}
input#lightswitch:checked + .content {
color: white;
}
<!DOCTYPE html>
<head>
<title>Beijing Dance Academy</title>
<link rel="stylesheet" type="text/css" href="bda.css">
</head>
<body>
<div class="nav">
<div class="nav_wrapper">
<ul>
<li><a class="navother" href="Home.html">Home</a>
</li>
<li><a class="navother" href="CR.html">Cultural Revolution</a>
</li>
<li><a class="navhome" href="BDA.html">Beijing Dance Academy</a>
</li>
<li><a class="navother" href="CNY.html">Chinese New Year</a>
</li>
</ul>
</div>
</div>
<label for="lightswitch">Light Switch</label>
<input type="checkbox" id="lightswitch" />
<div class="content">
<img src="bda.png" alt="BDA" class="bdaimg">
<p>
<h2>Beijing Dance Academy</h2>
Beijing Dance Academy, or BDA, was the first professional dance school founded in China, in 1954. The academy was helped by Soviet Russia in building the academy and the techniques they used to learn dance. Although Russia helped with the Beijing Dance
Academy, China's repressive Communist government forbidded Russian presence in the school. The Beijing Dance Academy soon opened back up to all people from around the world when, in 1976, China's Communist leader, Mao Zedong, died.
<br>
<br>Several times a year, Beijing Dance Academy holds auditions to be accepted into the school, for more disadvantaged areas officals come around small towns and schools and pick out children of age, the academy initially only accepted students from
ages 11 to 18 but eventually the age range expanded. They then test the student's basic body abilities. More than 2,000 children audition to be accepted into the academy but only 1 in every 20 make the cut. Majority of the children in the academy
are Chinese but the academy has an additional program that allows international students to apply.
<br>
<br>
<h3>
A Day in the Life of a Student
</h3>
A day of a Beijing Dance Academy student starts with basic warm-ups and stretches such as flexibility exercises and drills for turns and jumps. After breakfast, the students have a ballet technique class followed by character dance or pas de deux exercises.
Then after lunch, the students study normal subjects such as mathematics or Chinese for 3 hours. In the afternoon, they have repertory classes or study or do homework. The Beijing Dance Academy is run for the whole week...
</p>
<p class="nu">
INCLUDING SATURDAY AND SUNDAY!
<img src="sadface.png" alt="SpongebobSadFace" class="bdaimg2">
</p>
</div>
</body>
问题是你的带有 src="bda.png" 的 img 的 margin-top 是 30px。
这是 html 中的一些奇怪行为,它不会将图像向下移动 30px,但会将图像的父级向下移动 30px。
要解决此问题,您可以将图像的 margin-top 设置为 0px 并将其向下移动div 的 padding-top,或者您可以将包含 div 的 display-属性 设置为 "display: inline-block"。像这样:
.content {
text-align: center;
line-height: 130%;
font-size: 20px;
display: inline-block;
}