以下步骤将指导您如何使用 HTML 和 CSS 导航到包含图像的目录:
HTML
-
创建一个 HTML 页面,例如
index.html
。 -
在
head
部分,链接到style.css
样式表。 -
在
body
部分,创建以下目录列表:
CSS
-
创建一个名为
style.css
的 CSS 文件。 - 在 CSS 文件中,添加以下样式:
完整代码
将 HTML 和 CSS 代码组合在一起,您将获得以下完整代码: html css ul {list-style-type: none;padding: 0; }li {display: inline-block;margin: 0 10px; }a {text-decoration: none; }a:hover {text-decoration: underline; }结果
保存 HTML 和 CSS 文件后,使用 Web 浏览器打开
index.html
文件。您会看到一个包含三个目录链接的列表:自然、动物和旅行。单击任一链接都会将您导航到包含该目录中图像的页面。
注意事项
确保
Images
目录包含要显示的图像文件。链接的路径应指向
images
目录内的目录或子目录。可以通过添加
target="_blank"
属性来使链接在新选项卡或窗口中打开。
示例
以下示例展示了如何将图像添加到目录中:index.html html nature/index.html html animals/index.html html travel/index.html html 保存所有 HTML 文件并使用 Web 浏览器打开
index.html
文件。您现在可以导航到包含图像的目录了。
发表评论