HTML+CSS编写静态网站-11 添加画册图像

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

这节课，让我们完成这个列表项。现在，我要在这个图像下面使用段落元素添加一个图片的说明。所以，打开一个段落，然后，输入C++。

 
 
                     <li>

<img src="img/numbers-01.jpg" alt="">

                            <p>C++</p>

</li>
现在，就像我之前说的，我们将在以后调整这个图像的大小。那么这节课，我们希望实现的是：当网站的访问者点击图片时，他能够看到全尺寸的图片。所以，让我们为这个图像添加一个链接。我们可以这样做。就在我们的图像之前，我要添加一个锚定元素a，接着他的href就是图像的路径，然后将它包围图像和段落元素：

 
 
                     <li>

                            <a href = "img/numbers-01.jpg">

<img src="img/numbers-01.jpg" alt="">

<p>C++</p>

                            </a>

</li>
你会注意到，这里a元素的路径和img的路径是完全相同的文件路径。这是因为我们希望，当点击图片时，直接会链接到图像。现在我们保存文件，然后打开HTML文件看下效果：

当我们点击图片时，它会跳转到图片的路径，这里我们就可以查看全尺寸的图片了。

接下来，我需要添加一个画册。所以现在，我们只需要复制和粘贴这几次，以添加其余的图像。我们可以先将这段已写好的代码段进行复制，粘贴后，再进行修改。

这里我需要粘贴四次，因为总共有五个图片。

 
 
              <ul>

<li>

<a href = "img/numbers-01.jpg">

<img src="img/numbers-01.jpg" alt="">

<p>C++</p>

</a>

</li>

<li>

                            <a href = "img/numbers-01.jpg">

                            <img src="img/numbers-01.jpg" alt="">

                            <p>C++</p>

                            </a>

                     </li>

                     <li>

                            <a href = "img/numbers-01.jpg">

                            <img src="img/numbers-01.jpg" alt="">

                            <p>C++</p>

                            </a>

                     </li>

                     <li>

                            <a href = "img/numbers-01.jpg">

                            <img src="img/numbers-01.jpg" alt="">

                            <p>C++</p>

                            </a>

                     </li>

                     <li>

                            <a href = "img/numbers-01.jpg">

                            <img src="img/numbers-01.jpg" alt="">

                            <p>C++</p>

                            </a>

                     </li>
现在，我们还需要修改每个列表项。这里，如果我们打开我们的image文件夹，你会注意这些图片的名称是不同的。我们从1，2，然后跳到6，9和12.所以我们需要修改每个列表项来匹配这些图片。我们将修改href，我们还将修改src，使它们匹配。接着，还需要修改对应的图片说明，所以修改：

 
 
<li>

<a href = "img/numbers-02.jpg">

<img src="img/numbers-02.jpg" alt="">

<p>Github</p>

</a>

</li>

<li>

<a href = "img/numbers-06.jpg">

<img src="img/numbers-06.jpg" alt="">

<p>Python</p>

</a>

</li>

<li>

<a href = "img/numbers-09.jpg">

<img src="img/numbers-09.jpg" alt="">

<p>HTML/CSS</p>

</a>

</li>

<li>

<a href = "img/numbers-12.jpg">

<img src="img/numbers-12.jpg" alt="">

<p>Windows</p>

</a>

</li>
让我们继续保存，然后打开index.html。如果我们向下滚动，你现在可以看到我们所有的图像。在他们下面，每个图像还有一个说明，这也是目前咱们虚幻大学网站上的视频教程的类目，大家可以根据需要进行学习。现在，如果我继续，点击任何一个这些图像，它会显示我的图像链接，这是一个全尺寸的图片。如果我点击后退按钮，我可以回到index.html中。

更多精彩内容尽在视频中！

本文固定链接：http://www.oxox.work/web/html-css/photograph/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/photograph/