我在我的网络元素网站中设置了一个较小的图片库:
http://younani.com/finalsite/gallery.html
对我来说，这些照片的摆放方式看起来不太好。有没有办法在图片之间及其周围添加边框。让它看起来更有条理？我试图给它加上边框，但它只是将图片移动到整个脚本中，而我无法在两者之间添加边框。
CSS:
#header {
margin: 0 auto;
width: 1150px;
}
#container {
background-color: #FAFAFA;
color: #003300;
font-family: Arial, Helvetica, sans-serif; background-position: center; background-size: cover;
}
#h2 {text-align: center;}
#container {
margin-right:auto;
margin-left:auto;
background-image:url('backgroundflower5.jpg');
min-width:1000px;
max-width:1000px;
padding:0px 70px 50px 70px;
border:1px ridge #000000;
border-radius:20px;
-webkit-box-shadow:inset -3px -3px -3px 3px #18cad0;
-moz-box-shadow:inset -3px -3px 3px 3px #00332B;
box-shadow:inset -3px -3px 1px .9px black;
width: 960px;
margin: 0 auto;
}
#container div {
}
#header {}
#center2 {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px; width: 494px; border-radius:8px;
}
#center2 img
{
opacity:0.5;
-webkit-transition: opacity 1s linear;
}
#center2 img:hover
{
opacity:1.0;
-webkit-transition: opacity 1s linear;
}
#centerO {float: left;
margin: 10px 0 10px 20px;
min-width: 200px; font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: left; box-shadow:inset 1px 1px 10px 1px #000000; }
#center {box-shadow:inset 1px 1px 10px 1px #000000;}
#left,
#center,
#right {
float: left; margin: 10px 0 10px 20px;
min-width: 200px;
}
#center {font-family: "Comic Sans MS", cursive, sans-serif; background-color: #FFFFFF;
width: 494px; border-radius:8px; text-align: center;
}
.clear {
clear: both;
}
#right2 {float: left;
margin: 10px 0 10px 20px; border: 0px;
min-width: 200px;}
#right { font-family: Impact, Charcoal, sans-serif; border-radius:8px; background-color: #FFFFFF; box-shadow:inset 1px 1px 10px 1px #000000; text-align: center;}
#left a {font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
display: block;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#ffffff 0%,
#2a07ed);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#2a07ed));
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #ffffff;
-moz-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
-webkit-box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
box-shadow:
0px 3px 11px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(026,020,219,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.2),
0px 1px 0px rgba(255,255,255,0.3);
}
figure{}
#left a:link { background-color: #E6E6E6; }
#left a:visited { background-color: #E6E6E6; }
#left a:hover {border: 3px inset #333333; }
#left ul { list-style-type: none;
margin: 0;
padding-left: 0; }
#footer { text-align: center; font-family: Audimat;
clear: both; width:38%;
border-radius: 8px;
background-color:white;
text-align:center; margin-right:auto;
margin-left:auto; }
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Younani Flower's</title>
<meta charset="utf-8">
<link rel="stylesheet" href="final.css" />
</head>
<body>
<div id="header"><img src="header88.png" alt="header" height="200" width="1150" /></div>
<div id="container" class="clearfix"><!-- Header --> <!-- Left Column -->
<div id="left">
<ul>
<li><a href="finalindex.html">Home</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="occasions.html">Occasions</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<!-- Center Column -->
<div id="center2"><a href="Meadowthistlebig.jpg" target="_blank"><img src="Meadowthistle.jpg" height="113" width="150" alt="" /> </a> <a href="saffronbig.jpg" target="_blank"><img src="saffron.jpg" height="113" width="150" alt="" /> </a> <a href="dahliasbig.jpg" target="_blank"><img src="dahlias.jpg" height="113" width="150" alt="" /> </a><a href="bachelorbuttonbig.jpg" target="_blank"><img src="bachelorbutton.jpg" height="113" width="150" alt="" /> </a><a href="dahliasbig.jpg" target="_blank"> </a><a href="hrysanthemumbig.jpg" target="_blank"><img src="hrysanthemum.jpg" height="113" width="150" alt="" /> </a><a href="dahliasbig.jpg" target="_blank"> </a><a href="PinkLilybig.jpg" target="_blank"><img src="PinkLily.jpg" height="113" width="150" alt="" /> </a><a href="dahliasbig.jpg" target="_blank"></a><a href="pinkrosesbig.jpg" target="_blank"><img src="pinkroses.jpg" height="113" width="150" alt="" /> </a><a href="dahliasbig.jpg" target="_blank"> </a><a href="RectifiedFlowers.jpg" target="_blank"><img src="RectifiedFlowers.jpg" height="113" width="150" alt="" /> </a><a href="dahliasbig.jpg" target="_blank"> </a><a href="rhodendronbig.jpg" target="_blank"><img src="rhodendron.jpg" height="113" width="150" alt="" /> </a><a href="gazaniadaisybig.jpg" target="_blank"><img src="gazaniadaisy.jpg" height="113" width="150" alt="" /> </a> <a href="GreenFlower.jpg" target="_blank"><img src="GreenFlower3.jpg" height="113" width="150" alt="" /> </a> <a href="nellwernerbig.jpg" target="_blank"><img src="nellwerner.jpg" height="113" width="150" alt="" /> </a></div>
<!-- Right Column -->
<div id="right">
<p><strong><span style="text-decoration: underline;">Meaning of Flower Colors</span><strong></strong></strong></p>
<p>Pink Caring</p>
<p>Purple Royalty</p>
<p>Red Declaration of love</p>
<p>Yellow Hopelessly in love</p>
<p>Violet Faithfulness</p>
<p>Red & White Unity</p>
<p>Bronze Excitement</p>
<p>Blue loyalty</p>
<p>Green Growth</p>
<p>Orange Warmth</p>
<p>Indigo Emotions</p>
<p>White Purity</p>
</div>
<!-- Footer -->
<div id="footer" class="clear">
<div class="nav"><b><a href="finalindex.html">Home</a> <a href="gallery.html">Gallery</a> <a href="occasions.html">Occasions</a> <a href="aboutus.html">About Us</a> <a href="contactus.html">Contact Us</a> </b></div>
</div>
</div>
<!-- #container -->
<p></p>
</body>
</html>
最佳答案
试试这个CSS
#center2 a img {
border: 2px solid red;
height: 100px;
margin-top: 4px;
vertical-align: top;
width: 125px;
}
结果是
关于css - HTML 网站 图像周围的边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13699107/