HTML练习题：创建一个简单的在线商店页面-CSDN博客

本文链接：https://blog.csdn.net/2401_86440076/article/details/140987497

第一部分：考点与作答区

考点：

HTML列表：使用HTML列表展示商品信息。
图片链接：使用<img>标签和<a>标签创建图片链接。

作答区： 请创建一个简单的在线商店页面，包含以下内容：

页面标题：在线商店。
商品列表：至少包含三种商品，每种商品有名称、价格和图片。
每个商品都有一个链接到详细信息页面的图片。

第二部分：解题思路与答案

解题思路：

使用<h1>标签创建页面标题。
使用<ul>和<li>标签创建商品列表。
使用<img>标签展示商品图片，并使用<a>标签将图片链接到详细信息页面。

答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线商店</title>
</head>
<body>
    <h1>在线商店</h1>
    <ul>
        <li>
            <a href="product1.html">
                <img src="product1.jpg" alt="商品1" width="100" height="100">
            </a>
            <h2>商品1</h2>
            <p>价格：$99.99</p>
        </li>
        <li>
            <a href="product2.html">
                <img src="product2.jpg" alt="商品2" width="100" height="100">
            </a>
            <h2>商品2</h2>
            <p>价格：$199.99</p>
        </li>
        <li>
            <a href="product3.html">
                <img src="product3.jpg" alt="商品3" width="100" height="100">
            </a>
            <h2>商品3</h2>
            <p>价格：$299.99</p>
        </li>
    </ul>
</body>
</html>

这个练习题的答案创建了一个基本的在线商店页面，展示了三种商品，每种商品都有一个链接到详细信息页面的图片。这个练习题适合那些已经掌握了HTML基础，并希望学习如何创建包含图片和链接的网页的开发者。

第三部分：扩展考点与扩展作答区

扩展考点：

CSS样式：使用CSS为商品列表添加样式。
响应式设计：使用CSS媒体查询确保页面在不同设备上都有良好的显示效果。

扩展作答区：

使用CSS为商品列表添加样式，如边框、背景色、字体等。
使用CSS媒体查询创建一个响应式布局，使得商品列表在移动设备和桌面设备上都有良好的显示效果。

第四部分：扩展解答思路与答案

扩展解答思路：

使用内联CSS或外部CSS文件为商品列表添加样式。
使用CSS媒体查询根据设备宽度调整商品列表的布局。

扩展答案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线商店</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #f9f9f9;
        }
        img {
            display: block;
            margin: 0 auto;
        }
        h2, p {
            text-align: center;
        }
        @media (max-width: 600px) {
            li {
                display: block;
                width: 100%;
            }
        }
    </style>
www.wfzcrcw.com
www.lfgarc.com
www.nthmrcw.com
www.jnlsrc.com
www.lsxcrc.com
</head>
<body>
    <h1>在线商店</h1>
    <ul>
        <li>
            <a href="product1.html">
                <img src="product1.jpg" alt="商品1" width="100" height="100">
            </a>
            <h2>商品1</h2>
            <p>价格：$99.99</p>
        </li>
        <li>
            <a href="product2.html">
                <img src="product2.jpg" alt="商品2" width="100" height="100">
            </a>
            <h2>商品2</h2>
            <p>价格：$199.99</p>
        </li>
        <li>
            <a href="product3.html">
                <img src="product3.jpg" alt="商品3" width="100" height="100">
            </a>
            <h2>商品3</h2>
            <p>价格：$299.99</p>
        </li>
    </ul>
</body>
</html>

在这个扩展答案中，我们通过CSS为商品列表添加了样式，并使用CSS媒体查询创建了一个响应式布局。这个练习题的扩展部分适合那些已经掌握了HTML和CSS基础，并希望学习如何创建具有响应式设计的网页的开发者。