HTML+CSS编写静态网站-10 添加画册结构

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

我们的导航功能已经完成，现在我们需要创建一个画册结构。我们将使用类似的技术，也就是使用HTML列表。类似于我们的导航区域，我们现在要使用另一个无序列表在我们的section元素中构建我们的画册。

所以，来到section元素中，并删除这个临时段落，这里，我输入无序列表。在无序列表内，我们先输入单个列表项。

 
 
       <section>

              <ul>

                     <li></li>        

              </ul>

</section>
现在我们需要放置一些画册的图片。这里，我把要用到的图片都放在我们的网站里，要下载它们，只需到我们网站下载即可。

下载完成后，您应该有一个zip文件，看起来像这样。解压缩文件后，我们看到一个Image的文件夹，我们只需要把这个img文件夹放置到桌面上的oxox文件夹中，让它和我们的index.html文件平级即可。

你也可以使用自己的图片。如果你想自定义网站，你可以使用您自己的艺术品或您自己的照片。这个项目最适合的大小是1024像素的宽度和768像素的高度的图像。我们不会在这里详细说明如何调整图像大小，但大多数图像编辑程序，如Photoshop可以做到这一点很容易。有了我们的图像之后，让我们在布局中使用它们。

在列表项的里面，我输入一个名为img的标签， 它有一个src属性，属性的值是img / numbers-01.jpg，我再输入第二个属性，称为alt，现在我们先把它置为空。

 
 
                     <li>

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

</li>
这里，我们来介绍了img元素。类似于一些其他我们学到的元素，它是自闭合的，也就是说，它不需要创建一个结束标签。img元素有两个必需的属性。第一个是src。这和我们a元素中的href非常相似，src只是告诉浏览器这个图像文件所在的位置。在我们的例子中，它在Image文件夹中，然后这个是图像的名字。这就是所谓的相对路径。换句话说，我们告诉浏览器这个图像是通过相对于我们的index.html文件所在的位置查找的。Image文件夹和index.html文件位于目录结构中的同一级别。这和绝对路径完全不同。例如，我们可以键入http：//oxox.work/，再接着我们的网站的域名，然后是我们的图像的路径。

 
 
                     <li>

<img src = "http：//oxox.work/img/numbers-01.jpg" alt="">

</li>
这就是绝对路径，然而，相对路径的好处是：它将使我们的网站更容易上传到Web服务器，即使更换不同的文件夹，只要文件的相对位置不变，网站都是可以正常工作的，如果现在你还不理解，不要担心。我们将在整个项目中使用更多的相对路径的例子。所以这里去掉绝对路径。

第二个必需的属性是Alt属性，它是替代的意思。它有一个好处：当图像不可用的时候，它提供一个简单的描述，这样不至于说找不到文件。它还有另一个作用就是：可能因为网站访问者实际上是一个搜索引擎蜘蛛，搜索引擎蜘蛛实际上看不到图像，这样方便搜索引擎优化。在我们的例子中，我们把Alt属性设置为空。现在保存，然后快速刷新浏览器：

你看，我们现在有一个图像在页面上，它是非常大的。这是因为我们还没有应用任何视觉样式，接下来，我们会调整图像大小。

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

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

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