为我的网页设计课程开发一个项目，无法弄清楚所有这些空白区域的来源。一切都需要相互接触，但我认为我有一些额外的填充，但我似乎无法确定它。这是我的所有代码。另外，我想知道如何摆脱左侧<ul>中的子弹。我试过list-style-type:none，但似乎没有做任何事情。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SylviaGunter WEB-210 Project 6</title>
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Peralta' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Gochi+Hand|Peralta' rel='stylesheet' type='text/css'>
<link rel="stylesheet"
href=01%20-%20Large%20CSS.css>
<link rel="stylesheet" type="text/css" href="02 - Medium CSS">
<link rel="stylesheet" type="text/css" href="03 - Small CSS">
<link rel="stylesheet" type="text/css" href="04 - Print CSS">
<link rel="stylesheet" type="text/css" href="05 - IE">
</head>
<body>
<div class="wrapper">
<body>
<div class="banner">
<h1>Best TV Ever</h1>
<div class="topnav">
<ul>
<li><a href="#">50s</a></li>
<li><a href="#">60s</a></li>
<li><a href="#">70s</a></li>
<li><a href="#">80s</a></li>
<li><a href="#">90s</a></li>
</ul>
</div>
</div>
</body>
[insert menu toggle here]
[insert menu checkbox here]
<aside class="sidebar1">
Best Prime Time Shows
<ul>
<li><a href="#">Alice</a></li>
<li><a href="#">All In The Family</a></li>
<li><a href="#">Barney Miller</a></li>
<li><a href="#">Beverly Hillbillies</a></li>
<li><a href="#">Bewitched</a></li>
<li><a href="#">The Bob Newhart Show</a></li>
<li><a href="#">The Brady Bunch</a></li>
<li><a href="#">Gilligan's Island</a></li>
<li><a href="#">Good Times</a></li>
<li><a href="#">The Love Boat</a></li>
<li><a href="#">Mary Tyler Moore</a></li>
<li><a href="#">M*A*S*H</a></li>
<li><a href="#">Maude</a></li>
<li><a href="#">One Day At A Time</a></li>
<li><a href="#">Petticoat Junction</a></li>
<li><a href="#">Soap</a></li>
<li><a href="#">Taxi</a></li>
<li><a href="#">What's Happening</a></li>
<li><a href="#">Welcome Back Kotter</a></li>
<li><a href="#">WKRP In Cincinatti</a></li>
</ul>
</aside>
<article class="main">
<h2>The Genius of Krofft</h2>
<h3>H.R. Pufnstuff</h3>
<p> <img src="hrpufnstuff.jpg" alt="hrpufnstuff" height="150" width="200">H.R. Pufnstuf centered on a shipwrecked boy named Jimmy. He and his friend, a talking flute named Freddy, take a ride on a mysterious boat, which promised adventures across the sea, to Living Island. The Mayor of Living Island was a friendly and helpful dragon named H.R. Pufnstuf. The boat was actually owned and controlled by a wicked witch named Wilhelmina W. Witchiepoo who rode on a broomstick-like vehicle called the Vroom Broom. She used the boat to lure Jimmy and Freddy to her castle on Living Island, where she was going to take Jimmy prisoner and steal Freddy. But Pufnstuf found out about her plot and was able to rescue Jimmy when he leaped out of the enchanted boat with Freddy and swam ashore.</p>
<h3>Lidsville</h3>
<p><img src="lidsville.jpg" alt="lidsville" height="150" width="200">
The show involved a teenage boy named Mark who fell into the hat of Merlo the Magician and arrived in Lidsville, a land of living hats. The hats on the show are depicted as having the same characteristics as the humans who would normally wear them.</p>
<h3>The Bugaloos</h3>
<p><img src="bugaloos.jpg" alt="bugaloos" height="150" width="200">The Bugaloos featured a musical group composed of four British-accented teenagers, who lived in fictional Tranquility Forest. They wore insect-themed outfits with antennae and wings which allowed them to fly. They were constantly beset by the evil machinations of Benita Bizarre, played by comedienne Martha Raye.</p>
<h3>Land of the Lost</h3>
<p><img src="landlost.jpg" alt="landlost" height="150" width="200">Land of the Lost details the adventures of the Marshall family (father Rick and his teenage children Will and Holly) who are trapped in an alternate universe inhabited by dinosaurs, a primate-type people called Pakuni, and aggressive humanoid/lizard creatures called Sleestak.</p>
<h3>Sigmund the Sea Monster</h3>
<p><img src="sigmund.jpg" alt="sigmund" height="150" width="200">The show centered on two brothers, Johnny and Scott Stuart, who discover Sigmund, a friendly young sea monster who had been thrown out by his comically dysfunctional undersea family for refusing to frighten people. The boys hide Sigmund in their clubhouse.</p>
</article>
<aside class="sidebar2">
Best Superhero Shows
<ul>
<li><a href="#">Batman (1966)</a></li>
<li><a href="#">The Bionic Woman (1976)</a></li>
<li><a href="#">Electra Woman and Dyna Girl (1976)</a></li>
<li><a href="#">The Greatest American Hero (1981)</a></li>
<li><a href="#">The Incredible Hulk (1977)</a></li>
<li><a href="#">Isis (1975)</a></li>
<li><a href="#">Shazam! (1974)</a></li>
<li><a href="#">The Six Million Dollar Man (1974)</a></li>
<li><a href="#">Wonder Woman (1976)</a></li>
</ul>
</aside>
<div id="footer">
Stop watching TV and write some code!
</div>
</body>
</html>
body{
}
.banner h1{
background-color: black;
background-image: url(logo.png);
background-repeat: no-repeat;
font-family: Peralta;
color: white;
height: 100px;
padding-top: 25px;
padding-left: 150px;}
h2{
font-family: Peralta;
text-align: center;
height: 25px;
background-color: white;
padding-top: 0;
height: 50px;
}
p{
border-bottom: 1px solid black;
padding-bottom: 3em;
display: block;
overflow: hidden;
height:130px;
}
img{
float: left;
margin-right: 1em;
width: 150px;
height: 100px;
padding-left: 10px;
border-radius: 20px;}
.topnav ul li {
display: inline-block;
float: right;
position: relative;
top: -120px;
}
.topnav ul li a:link{
text-decoration: none;
color: black;
background-color: white;
border-radius: 50%;
margin: 10px;
width: 100px;
font-size: 20px}
*{
-moz-box-sizing:border-box;
box-sizing: border-box;
}
.sidebar1{
float: left;
width: 265px;
padding: 0 20px 0 20px;
background: url(sidebar1background.jpg);
background-repeat: repeat-y;
height: 1000px;
}
.main{
float: left;
width: 60%;
padding: 0 20px 0 20px;
background-color: #d4ff80;
height: 1000px;
}
.sidebar2{
float: right;
width: 265px;
padding-right: 30px;
padding: 0 10px 0 20px;
background: url(sidebar2background.jpg)right top;
background-repeat: repeat-y;
height: 1000px;
list-style-type: none;
}
.sidebar1 a:link{
background-color: #c1c1a4;
border-radius: 20px;
border:1px solid white;
display: block;
background-size: 15px;
text-decoration: none;
width: 200px;
padding: 5px 5px 5px 35px;
margin-bottom: 10px;
color: darkgreen;
padding-right: 20px;
}
#footer{
clear: both;
height: 50px;
padding-top: 15px;
background-color: black;
color: white;
text-align: center;
}
答案 0 :(得分：0)
默认情况下，浏览器内置样式会添加一些空格（填充和边距），这些样式在浏览器中是不同的。 您需要执行reset css：
* {
padding: 0;
margin: 0;
}
关于您的项目符号，您需要为两个列表指定：
.sidebar1 ul, .sidebar2 ul {
list-style-type: none;
}
/* OR */
aside ul {
list-style-type: none;
}
答案 1 :(得分：0)
要修复侧栏子弹列表，请使用：
.sidebar1 ul{
list-style-type:none;
}