11、商城首页制作实战训练--店铺列表基本实现
本帖最后由 Sian 于 2016-2-23 15:06 编辑1、先看效果图：
2、标题选项卡前面已经实现，当前需要实现的是下面的内容部分；
3、内容主体为一个列表，右下角加一个“更多”的超链接；
4、列表使用ul实现，每个li又分为左右两部分；
5、左边为带链接的图片，使用a标签及div包裹起来；
6、右边另起一个div，内部和h3标题和一个p段落；
7、部分代码：
html：<div class="con">
<div class="hot_list">
<ul>
<li>
<div class="img"><a href="#"><img src="img/content/hot_list_pic1.gif"/></a></div>
<div class="text">
<h3><a href="#">御舟和涵珍园国际酒店</a></h3>
<p>
区域：朝阳/CBD<br/>
人均：180元<br/>
人气：12321
</p>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/content/hot_list_pic1.gif"/></a></div>
<div class="text">
<h3><a href="#">御舟和涵珍园国际酒店</a></h3>
<p>
区域：朝阳/CBD<br/>
人均：180元<br/>
人气：12321
</p>
</div>
</li>
<li>
<div class="img"><a href="#"><img src="img/content/hot_list_pic1.gif"/></a></div>
<div class="text">
<h3><a href="#">御舟和涵珍园国际酒店</a></h3>
<p>
区域：朝阳/CBD<br/>
人均：180元<br/>
人气：12321
</p>
</div>
</li>
</ul>
<a class="hot_list_more" href="#"><img src="img/more.gif" alt="更多" title="更多"/></a>
</div>
</div>
CSS.hot_list{margin-top: 10px; height: 374px; position: relative;}
.hot_list li{width: 318px; height: 108px; background: url('../img/hot_list_li_bg.gif') no-repeat; margin-bottom: 6px;}
.hot_list .img{float: left; width: 106px; height: 86px;}
.hot_list .img a{width: 104px; height: 84px; display: block;border: 1px solid #e6e6e6;}
.hot_list .img a:hover{border: 1px solid #929292;}
.hot_list .text{float: right; width: 190px;}
.hot_list .text h3{line-height: 24px;}
.hot_list .text h3 a{font-weight: normal;color: red;}
.hot_list .text h3 a:hover{text-decoration: underline;}
.hot_list .text p{line-height: 16px; color: #6e6e6e;}
.hot_list_more{position: absolute; right: 0px; bottom: 10px;}8、源代码下载：**** Hidden Message *****
页:
[1]