2

我在我的网络项目网站上设置了一个较小的图片库:

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>&nbsp;&nbsp;&nbsp; <a href="saffronbig.jpg" target="_blank"><img src="saffron.jpg" height="113" width="150" alt="" /> </a>&nbsp;&nbsp;&nbsp; <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">&nbsp;&nbsp;&nbsp; </a><a href="hrysanthemumbig.jpg" target="_blank"><img src="hrysanthemum.jpg" height="113" width="150" alt="" /> </a><a href="dahliasbig.jpg" target="_blank">&nbsp;&nbsp;&nbsp; </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">&nbsp;&nbsp;&nbsp;&nbsp;</a><a href="RectifiedFlowers.jpg" target="_blank"><img src="RectifiedFlowers.jpg" height="113" width="150" alt="" /> </a><a href="dahliasbig.jpg" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;<a href="GreenFlower.jpg" target="_blank"><img src="GreenFlower3.jpg" height="113" width="150" alt="" /> </a>&nbsp;&nbsp;&nbsp;&nbsp;<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&nbsp;&nbsp;&nbsp;Caring</p>
<p>Purple&nbsp;&nbsp;&nbsp;Royalty</p>
<p>Red&nbsp;&nbsp;&nbsp;Declaration of love</p>
<p>Yellow&nbsp;&nbsp;&nbsp;Hopelessly in love</p>
<p>Violet&nbsp;&nbsp;&nbsp;Faithfulness</p>
<p>Red &amp; White&nbsp;&nbsp;&nbsp;Unity</p>
<p>Bronze&nbsp;&nbsp;&nbsp;Excitement</p>
<p>Blue&nbsp;&nbsp;&nbsp;loyalty</p>
<p>Green&nbsp;&nbsp;&nbsp;Growth</p>
<p>Orange&nbsp;&nbsp;&nbsp;Warmth</p>
<p>Indigo&nbsp;&nbsp;&nbsp;Emotions</p>
<p>White&nbsp;&nbsp;&nbsp;Purity</p>
</div>
<!-- Footer -->
<div id="footer" class="clear">
<div class="nav"><b><a href="finalindex.html">Home</a>&nbsp;&nbsp; <a href="gallery.html">Gallery</a>&nbsp;&nbsp; <a href="occasions.html">Occasions</a>&nbsp;&nbsp; <a href="aboutus.html">About Us</a>&nbsp;&nbsp; <a href="contactus.html">Contact Us</a>&nbsp;&nbsp;</b></div>
</div>
</div>
<!-- #container -->
<p></p>
</body>

</html>
4

3 回答 3

2

尝试

#center2 > a {
    border: 2px solid red;
    display: block;
    width: 150px;
}
于 2012-12-04T08:58:00.547 回答
2

试试这个 CSS

#center2  a img {
    border: 2px solid red;
    height: 100px;
    margin-top: 4px;
    vertical-align: top;
    width: 125px;
}

结果是

在此处输入图像描述

于 2012-12-04T09:01:54.063 回答
1

CSS

#center2 img {
opacity: 0.5;
-webkit-transition: opacity 1s linear;
border: solid 2px #F0FF49;
float: left;
margin: 6px;
}

在此处输入图像描述

于 2012-12-04T09:06:59.453 回答