【小练习05】HTML+CSS--淘宝商铺小页面

迷南。 2022-06-16 10:08 187阅读 0赞

**要求实现如下效果图：**

![这里写图片描述][SouthEast]

**代码演示**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			body{
    				background: #f7f7f7;
    			}
    			h2,h3,p{
    				margin: 0;
    			}
    			ul{
    				margin: 0;
    				padding: 0;
    				list-style: none;
    			}
    			a{
    				text-decoration: none;
    			}
    			
    			#wrap{
    				width: 260px;
    				padding-top: 4px;
    			}
    			#wrap h2{
    				height: 20px;
    				background: url(images/title_img.gif) no-repeat;
    				text-indent: 99px;
    				font: bold 12px/17px '宋体';
    				color: #6c6c6c;
    				margin-bottom: 14px;
    			}
    			.box{
    				background: #fff;
    				border: 1px solid #e8e8e8;
    			}
    			.list{
    				padding: 12px 14px 16px 14px;
    				border-bottom: 1px solid #e8e8e8;
    			}
    			.list h3{
    				font: bold 12px/23px '宋体';
    				color: #444444;
    			}
    			.list p{
    				font: 12px/23px '宋体';
    				
    			}
    			.list p a{
    				color: #6c6c6c;
    				padding: 0 6px 0 10px;
    				border-right: 1px solid #eaeaea;
    			}
    			.list p a.noPadding{
    				padding-left: 0;
    			}
    			.list p a.noBorder{
    				border-right: none;
    			}
    			.list ul{
    				font-size: 0;
    				padding-top: 6px;
    			}
    			.list ul li{
    				display: inline-block;
    			}
    			.center{
    				margin: 0 10px;
    			}
    			.look{
    				height: 33px;
    				padding-top: 4px;
    				background: #e9e9e9 url(images/ico_02.gif) no-repeat 82px 12px;
    				text-indent: 112px;
    			}
    			.look a{
    				font: 12px/33px '宋体';
    				color: #6c6c6c;
    				/*position: relative;
    				top: 3px;*/
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<h2>你可能喜欢的店铺</h2>
    			<div class="box">
    				<div class="list">
    					<h3>素色空间</h3>
    					<p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">双鱼座</a></p>
    					<ul>
    						<li><a href="#"><img src="images/img_02.jpg" alt="" /></a></li>
    						<li class="center"><a href="#"><img src="images/img_03.jpg" alt="" /></a></li>
    						<li><a href="#"><img src="images/img_04.jpg" alt="" /></a></li>
    					</ul>
    				</div>
    				<div class="list">
    					<h3>素色空间</h3>
    					<p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">双鱼座</a></p>
    					<ul>
    						<li><a href="#"><img src="images/img_02.jpg" alt="" /></a></li>
    						<li class="center"><a href="#"><img src="images/img_03.jpg" alt="" /></a></li>
    						<li><a href="#"><img src="images/img_04.jpg" alt="" /></a></li>
    					</ul>
    				</div>
    				<div class="list">
    					<h3>素色空间</h3>
    					<p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">双鱼座</a></p>
    					<ul>
    						<li><a href="#"><img src="images/img_02.jpg" alt="" /></a></li>
    						<li class="center"><a href="#"><img src="images/img_03.jpg" alt="" /></a></li>
    						<li><a href="#"><img src="images/img_04.jpg" alt="" /></a></li>
    					</ul>
    				</div>
    				<div class="list">
    					<h3>素色空间</h3>
    					<p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">双鱼座</a></p>
    					<ul>
    						<li><a href="#"><img src="images/img_02.jpg" alt="" /></a></li>
    						<li class="center"><a href="#"><img src="images/img_03.jpg" alt="" /></a></li>
    						<li><a href="#"><img src="images/img_04.jpg" alt="" /></a></li>
    					</ul>
    				</div>
    				<div class="look"><a href="#">换一组看看</a></div>
    			</div>
    		</div>
    	</body>
    </html>

**源码地址：[http://download.csdn.net/detail/baidu\_37107022/9840917][http_download.csdn.net_detail_baidu_37107022_9840917]**

[SouthEast]: /images/20220616/40e21f0812c745f8834848afeecaddc1.png
[http_download.csdn.net_detail_baidu_37107022_9840917]: http://download.csdn.net/detail/baidu_37107022/9840917