视频教程观看地址: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/