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