麻烦接近css中的图像

时间：2015-06-21 21:39:34

标签： css html5

这是我的第一篇文章，我道歉 - 几乎是一个新手。我已经尝试了所有我能想到的技术，并且无法弄清楚如何在我的网站中围绕三张特定图片创建边框。我的网站是glh222.github.io

您会注意到6张图片，其中3张图片的边框和尺寸合适，另外3幅图片非常大。我已将所有图片编辑为285px，并且我在HTML和CSS中的代码是一致的。我会将代码发布到下面的html和css的相关部分，如果有人可以提供帮助，请告诉我。提前谢谢！

<section id="GT">
<a href="#">
<img src="Images/gtsport.jpg" alt="Granturismo on an open road">
<p>Granturismo</p>
</a>
</section>
<section id="GTC">
<a href="#">
<img src="Images/GTC.jpg" alt="Granturismo Convertible">
<p>Granturismo Convertible</p>
</a>
</section>
<section id="GHIBLI">
<a href="#">    
<img src="Images/GhibliSnow.jpg" alt="Ghibli in the snow">
<p>Ghibli</p>
</a>
</section>
<section id="GHIBLISQ4"
<a href="#">
<img src="Images/GTSLogo1.jpg" alt="SQ4 Logo">
<p>Ghibli SQ4</p>
</a>
</section>
<section id="QP"
<a href="#">
<img src="Images/QPblur1.jpg" alt="QP blurred">
<p>Quattroporte</p>
</a>
</section>
<section id="QPS"
<a href="#">
<img src="Images/GTSrear1.jpg" alt="Rear Facing in the snow">
<p>Quattroporte GTS</p>
</a>
</section>

CSS 

#GT img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
float: left;
}

#GTC
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}

#GHIBLI
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}

#GHIBLISQ4
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}

#QP
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}

#QPS
img {
width:100%;
padding:.5em, auto;
margin: .5em;
background-color:#c7ccf;
border: 20px black solid;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
text-align: center;
font-weight: 800;
font-weight: bold;
color: white;
}

a:hover {
background-color: #aaaaaa;

2 个答案:

答案 0 :(得分：0)

看起来你没有在底部3上获得边框，因为你的代码在多个区域被破坏了。

首先，你有一个额外的：

<link href=

靠近页面顶部和 你错过了一个＆gt;在这三行的末尾：

   <section id="GHIBLISQ4"

应该是：

   <section id="GHIBLISQ4">

同样适用于：

    <section id="QP"

应该是：

    <section id="QP">

和

<section id="QPS"

应该是：

    <section id="QPS">

您的完整代码应如下所示：

            <!DOCTYPE html>
            <html>
                <head>
                    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700italic' rel='stylesheet' type='text/css'>
                    <link rel="stylesheet" type="text/css" href="styles.css">
                    <title>"Maserati of Long Island"</title>
                </head>
                <body>
                    <header>
                            <h1> Welcome to Maserati of Long Island, A Division of The Experience Auto Group
                            Maserati...The Absolute Opposite of Ordinary</h1>
                    </header>
                        <div id="slogan">
                            <h2>Long Island's only factory authorized dealership</h2>
                        </div>
                    <section id="GT">
                            <a href="#">
                                <img src="Images/gtsport.jpg" alt="Granturismo on an open road">
                                <p>Granturismo</p>
                            </a>
                    </section>
                    <section id="GTC">
                            <a href="#">
                                <img src="Images/GTC.jpg" alt="Granturismo Convertible">
                                <p>Granturismo Convertible</p>
                            </a>
                    </section>
                    <section id="GHIBLI">
                            <a href="#">    
                                <img src="Images/GhibliSnow.jpg" alt="Ghibli in the snow">
                                <p>Ghibli</p>
                            </a>
                    </section>
                    <section id="GHIBLISQ4">
                            <a href="#">
                                <img src="Images/GTSLogo1.jpg" alt="SQ4 Logo">
                                <p>Ghibli SQ4</p>
                            </a>
                    </section>
                    <section id="QP">
                            <a href="#">
                                <img src="Images/QPblur1.jpg" alt="QP blurred">
                                <p>Quattroporte</p>
                            </a>
                    </section>
                    <section id="QPS">
                            <a href="#">
                                <img src="Images/GTSrear1.jpg" alt="Rear Facing in the snow">
                                <p>Quattroporte GTS</p>
                            </a>
                    </section>
                        </nav>
                    <section id="about">
                        <div class="wrapper">
                            <h2>Operating from a state-of-the-art facility that's located in the heart of Long Island, our expertly trained staff is committed to serving each of your needs from the moment you walk through our doors, keeping one tenet in mind above all else: treating you like a member of our "family" from the moment you walk through the doors</h2> 
                        </div>
                    </section>
                    <footer>
                        <p> You can contact us by calling (516) 665-1665, or if you prefer, you can stop by  65 South Service Rd, Plainview, New York 11803 and speak with us in person.</p>
                    </footer>
                </body>
            </html>

这将使您的页面如下所示： enter image description here

此外，您可能希望为图像添加一个CSS类，然后将该类应用于所有图像，而不是为每个图像使用单独的类。这样，您的所有照片都是统一的，并且风格相同，您不必编写尽可能多的代码。

您可能还想调整照片的大小/裁剪，因为它们现在不均匀，部分原因是虽然它们的宽度相同，但它们的高度并不相同，因此有些高度不同其他

和

如果您想摆脱第一张图片周围的灰色框，请移除#GT ​​img CSS上的 float：left;

答案 1 :(得分：0)

  • 您的HTML已损坏。您的部分section代码未使用>关闭。
  • 如果要将相同的规则应用于多个元素，请为其指定class。我在下面的修复程序中给出了.cars的元素类。
  • 您不应该将文本格式规则应用于img标记，而是应用实际包含某些文本的元素。
  • 您可能希望使用display:inline-block;和vertical-align:top;代替float:left;，因为您的元素具有不同的高度。
  • 如果您希望图片保留原始尺寸，请从图片中移除width:100%。如果您希望每个元素具有相同的宽度，请将宽度应用于容器（section元素），并为img max-width 100%提供.cars{ display:inline-block; font-size: 1.5em; font-family:'Roboto', sans-serif; text-align: center; font-weight: 800; font-weight: bold; vertical-align:top; } .cars a{ display:block; padding: .5em; color: white; text-decoration:none; } .cars p{ background-color: #aaaaaa; } .cars img { background-color:#c7ccf; border: 20px black solid; box-sizing:border-box; /* so the sizing of the image will include its border */ } .cars a:hover { background-color: #aaaaaa; }。 

<section id="GT" class="cars">
    <a href="#">
        <img src="http://glh222.github.io/Images/gtsport.jpg" alt="Granturismo on an open road">
        <p>Granturismo</p>
    </a>
</section>
<section id="GTC" class="cars">
    <a href="#">
        <img src="http://glh222.github.io/Images/GTC.jpg" alt="Granturismo Convertible">
        <p>Granturismo Convertible</p>
    </a>
</section>
<section id="GHIBLI" class="cars">
    <a href="#">	
        <img src="http://glh222.github.io/Images/GhibliSnow.jpg" alt="Ghibli in the snow">
        <p>Ghibli</p>
    </a>
</section>
<section id="GHIBLISQ4" class="cars">
    <a href="#">
        <img src="http://glh222.github.io/Images/GTSLogo1.jpg" alt="SQ4 Logo">
        <p>Ghibli SQ4</p>
    </a>
</section>
<section id="QP" class="cars"> 
    <a href="#">
        <img src="http://glh222.github.io/Images/QPblur1.jpg" alt="QP blurred">
        <p>Quattroporte</p>
    </a>
</section>
<section id="QPS" class="cars">
    <a href="#">
        <img src="http://glh222.github.io/Images/GTSrear1.jpg" alt="Rear Facing in the snow">
        <p>Quattroporte GTS</p>
    </a>
</section>
ttp:www.url...

相关问题
最新问题