当我试图把我的旗帜作为图像，它不正确显示？

我正在为我的高中机器人团队制作一个网站。我试图让我的旗帜成为一个链接，但出于某种原因，图片背后有一个我无法摆脱的小盒子。我试着看看其他线程，这告诉我我需要为代码设置一个宽度，但没有工作。我也读过，我需要设置一个边界属性为“0”，这是行不通的。我想不明白。当我试图把我的旗帜作为图像，它不正确显示？

<!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

来源

2014-09-25 user3362546

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

a.Banner_Link 
{ 
    padding:0 !important; 
}

来源

2014-09-25 12:14:47

没有工作。更新了网站。 – user3362546 2014-09-25 12:17:55

适用'！重要'。我会更新答案。 – 2014-09-25 12:19:20

我很快就会接受你的回答，谢谢！ – user3362546 2014-09-25 12:21:59

而不是使用!important标签，你可以做这样的：

.Banner a { 
    padding: 0; 
}

您应该避免使用的重要标签，除非绝对必要，而是试图让你的CSS规则更强大..看到这SO回答于!importanthttps://stackoverflow.com/a/3706876/1563558

来源

2014-09-25 13:10:44

当我试图把我的旗帜作为图像，它不正确显示？

回答

相关问题