我正在使用引导网格为我的公司构建一个团队页面。我有两列缩略图(图片,名称和标题)。我试图消除缩略图周围的默认边框,但没有成功。我尝试使用box-shadow,border-radius和border都将其设置为none或0,就像我在其他答案中看到的那样但是它没有成功。 有关如何进行的任何想法?我的所有代码都在http://jsfiddle.net/2yLS3/2/ 关于我的代码的任何其他反馈都非常受欢迎,我只在三周前开始使用html / css编码:-) 万分感谢!
这是html:
<head>
<link rel="stylesheet" href="style-team-main.css">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<title>Title</title>
<link rel="shortcut icon" href="http://www.echo-laboratories.com/icon.ico">
</head>
<body>
<div class="nav">
<div class="container">
<ul>
<li><a href="http://www.echo-laboratories.com">Home</a>
</li>
<li><a href="http://www.echo-laboratories.com/team">Team</a>
</li>
<li><a href="http://www.echo-laboratories.com/contact">Contact</a>
</li>
</ul>
<ul>
<li>
<img src="http://www.echo-laboratories.com/logo.png" />
</li>
</ul>
</div>
</div>
<div class="title">
<div class="container">
<H1>Meet the Team</H1>
</div>
</div>
<div class="main">
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="www.echo-laboratories.com/pj"><img src="http://tux.crystalxp.net/png/mimipunk-tux-cartoon-1820.png"/></a>
<div class="caption">
<H3>Name</H3>
<H4>Title</H4>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<a href="www.echo-laboratories.com/elad"><img src="http://tux.crystalxp.net/png/mimipunk-tux-cartoon-1820.png"/></a>
<div class="caption">
<H3>Name</H3>
<H4>Title</H4>
</div>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<table>
<tr>
<td><a href="mailto:founders@echo-laboratories.com" target="_blank"><img src="http://www.echo-laboratories.com/emailgrey.png"/></a></td>
<td><a href="https://www.facebook.com/EchoLabsInc" target="_blank"><img src="http://www.echo-laboratories.com/facebookgrey.png"/></a></td>
<td><a href="http://www.linkedin.com/company/echolabs" target="_blank"><img src="http://www.echo-laboratories.com/linkedingrey.png"/></a></td>
<td><a href="http://www.twitter.com/pjcobut" target="_blank"><img src="http://www.echo-laboratories.com/twittergrey.png"/></a></td>
<td><a href="https://angel.co/echo-labs" target="_blank"><img src="http://www.echo-laboratories.com/angelistgrey.png"/></a></td>
</tr>
</table>
</div>
</div>
CSS:
.nav a {
color:#818286;
text-decoration:none;
font-size:22px;
font-family:Helvetica, sans-serif;
font-weight:bold;
padding:14px 50px;
float:left;
position:relative;
top-margin:10px;
}
.nav a:hover {
color:#39c388;
text-decoration:none;
}
.nav li {
display:inline;
}
.nav {
background-color:#ffffff;
}
.nav img {
height:15%;
width:15%;
float:right;
position:relative;
margin-top:-25px;
}
.title H1 {
color:#ffffff;
font-size:28px;
font-family:Helvetica, sans-serif;
font-weight:bold;
text-align:center;
line-height:60px;
}
.title {
background-color:#B8B8B8;
height:100px;
}
.body {
background-color:#ffffff;
}
.row thumbnail {
border:0;
box-shadow:0;
border-radius:0;
}
.row img {
position:relative;
height:90%;
width:90%;
margin-top:40px;
margin-left:50%;
margin-right:50%;
}
.row h3 {
color:#39c388;
font-weight:bold;
font-family:Helvetica, sans-serif;
font-size:26px;
position:relative;
margin-top:40px;
text-align:center;
}
.row h4 {
color:#818286;
font-family:Helvetica, sans-serif;
font-size:24px;
position:relative;
margin-top:10px;
text-align:center;
}
.footer {
position:fixed;
left:0px;
bottom:0px;
width:100%;
height:60px;
clear:both;
background-color:#B8B8B8;
}
.footer td img {
width:30px;
height:30px;
}
.footer td {
width:50px;
padding-top:15px;
}
.footer table {
margin:auto;
.nav a {
color:#818286;
text-decoration:none;
font-size:22px;
font-family:Helvetica, sans-serif;
font-weight:bold;
padding:14px 50px;
float:left;
position:relative;
top-margin:10px;
}
.nav a:hover {
color:#39c388;
text-decoration:none;
}
.nav li {
display:inline;
}
.nav {
background-color:#ffffff;
}
.nav img {
height:15%;
width:15%;
float:right;
position:relative;
margin-top:-25px;
}
.title H1 {
color:#ffffff;
font-size:28px;
font-family:Helvetica, sans-serif;
font-weight:bold;
text-align:center;
line-height:60px;
}
.title {
background-color:#B8B8B8;
height:100px;
}
.body {
background-color:#ffffff;
}
.row thumbnail {
border:0;
box-shadow:0;
border-radius:0;
}
.row img {
position:relative;
height:90%;
width:90%;
margin-top:40px;
margin-left:50%;
margin-right:50%;
}
.row h3 {
color:#39c388;
font-weight:bold;
font-family:Helvetica, sans-serif;
font-size:26px;
position:relative;
margin-top:40px;
text-align:center;
}
.row h4 {
color:#818286;
font-family:Helvetica, sans-serif;
font-size:24px;
position:relative;
margin-top:10px;
text-align:center;
}
.footer {
position:fixed;
left:0px;
bottom:0px;
width:100%;
height:60px;
clear:both;
background-color:#B8B8B8;
}
.footer td img {
width:30px;
height:30px;
}
.footer td {
width:50px;
padding-top:15px;
}
.footer table {
margin:auto;
}
答案 0 :(得分:1)
将CSS选择器.row thumbnail
更改为.row .thumbnail
.row .thumbnail {
border:0;
box-shadow:0;
border-radius:0;
}