仿淘宝搜索商品页面静态网页代码示例 - 简单易懂

以下是一个简单的仿造淘宝搜索商品页面的静态网页代码示例：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>搜索商品</title>
    <style>
        /* CSS样式可以根据自己的需要进行修改 */
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .search-bar {
            display: flex;
            margin-bottom: 20px;
        }
        .search-input {
            flex: 1;
            padding: 10px;
            font-size: 16px;
        }
        .search-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #f60;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        .search-results {
            list-style-type: none;
            padding: 0;
        }
        .search-result {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
        }
        .search-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .search-price {
            font-size: 16px;
            color: #f60;
        }
    </style>
</head>
<body>
    <div class='container'>
        <div class='search-bar'>
            <input type='text' class='search-input' placeholder='请输入商品名称'>
            <button class='search-button'>搜索</button>
        </div>
        <ul class='search-results'>
            <li class='search-result'>
                <div class='search-title'>商品1</div>
                <div class='search-price'>¥ 100</div>
            </li>
            <li class='search-result'>
                <div class='search-title'>商品2</div>
                <div class='search-price'>¥ 200</div>
            </li>
            <li class='search-result'>
                <div class='search-title'>商品3</div>
                <div class='search-price'>¥ 300</div>
            </li>
        </ul>
    </div>
</body>
</html>

以上代码是一个简单的静态网页，包含一个搜索栏和一个搜索结果列表。你可以根据需要修改样式和内容，添加更多的搜索结果以及其他功能。