Question

我正在为我的高中机器人团队建立一个网站。我试图让我的横幅链接，但由于某种原因，图像背后有一个我无法摆脱的小盒子。我试着看其他线程，告诉我我需要为代码设置一个宽度，但是没有用。我还读过我需要在＆＃34; 0＆＃34;设置一个边界属性，但是没有用。我无法理解。

<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index_style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<title>Team 3774 Homepage</title>
</head>
<body>

<div id="page">
<div class="Banner">
<a class="Banner_Link" href="www.robotichive3774.com">
<img src="/Images/Banner.png" height="200" width="1350" border="0">
</a>
</div>

<div class="navbar">
<ul class="nav">
  <li><a class="li_nav" href="/Home">Home</a></li>
  <li><a class="li_nav" href="/Team Bio">Team Bio</a></li>
  <li><a class="li_nav" href="/Our Robot">Our Robot</a></li>
  <li><a class="li_nav" href="/Our Coach">Our Coach</a></li>
  <li><a class="li_nav" href="/Gallery">Gallery</a></li>
  <li><a class="li_nav" href="/Outreach">Outreach</a></li>
  <li><a class="li_nav" href="/Youtube">Youtube</a></li>
</ul>
</div>
</div>

<div class="body">
<h1 class="main_header">Welcome to Robotics Team 3774!</h1>
<div class="main_body">
<p class="Team_Description">Hive Voltage 3774 is the Senior 
(and Junior) 
Engineering Team at Bayonne High School. The team 
is a part of the Senior Engineering class available 
at Bayonne High School. This team has the most experienced
 students for FTC. Many of them are highly capable students 
 who had done various stem activities. We plan on learning 
 several aspects of engineering this season but we also intend to
 have fun.
 Our main goal however is to grow as a team. We plan to grow 
 as individuals and to collaborate as a unit or a team.
 Also, we plan to expose our community to the wonderful 
 applications of robotics, and to excel in many parts of real
 engineering and real world applications. Hence we are, 
 HIVE VOLTAGE 3774. #Hivevoltage #Gobees</p>
</div>
</div>
</body>
</html>

CSS

.Banner
{
height: 200px;
width: 1350px;
}

.body
{
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
margin-bottom: 100px;
}
.Banner img 
{
    vertical-align:top;
}

body
{
margin: 0;
}


.li_nav
{
float: left;
display:inline-block;
font-family: 'Roboto Slab', serif;
}

.nav 
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; 
min-width: 1350px;  
}

a:link, a:visited 
{
display:inline-block;
width: 182.7px;
padding-top: 12px;
padding-right: 5px;
padding-bottom: 14px;
padding-left: 5px;
font-weight: bold;
color: #FFFFFF;
background-color: #990000;
text-align: center;
text-decoration: none;
font-family: 'Roboto Slab', serif;
}

a:hover, a:active 
{
background-color: #B20000;
}

#page{
    width: 1000px;
    margin-left: 0px;
    margin-right: 0px;
}


.body
{
height: 1350px;
}

.main_header
{
text-align: center;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 15px;
padding-left: 5px;
font-family: 'Roboto Slab', serif;
}

.main_body
{
padding-bottom: 100px;
}

.Team_Description 
{
font-size: 150%;
font-family: 'Roboto Slab', serif;
}

该网站是robotichive3774.com

Answer 1

这是因为那里应用了默认锚样式。在CSS中添加以下样式。

 a.Banner_Link
 {
  padding:0 !important;
 }

Answer 2

而不是使用!important标记，您可以这样做：

.Banner a {
    padding: 0;
}

除非绝对必要，否则您应该避免使用重要标记，而是尝试使CSS规则更强大..请参阅!important https://stackoverflow.com/a/3706876/1563558上的此答案

当我试图将我的横幅作为图像时，它显示不正确？

2 个答案: