商品搜索 - 查找您想要的商品 - 常规

<!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;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
        }
        .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;
            display: flex;
        }
        .search-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .search-price {
            font-size: 16px;
            color: #f60;
        }
        #d1{
				width: 100px;
				height: 100px;
				border: 1px solid white;
				border-radius: 100%;
				overflow: hidden;
				margin-left: 20px;
			}
				img {
					max-height: 100%;
				}
            div{
                float:'left';
            }
	</style>
    </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 id='d1'>
            <img src='http://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/48540923dd54564e2d86086eb8de9c82d0584f82.jpg' alt=''>
        </div>
    </div>
		<script>
		</script>
</body>
</html>