11、商城首页制作实战训练--店铺列表基本实现

Sian

1、先看效果图：

2、标题选项卡前面已经实现，当前需要实现的是下面的内容部分；
3、内容主体为一个列表，右下角加一个“更多”的超链接；
4、列表使用ul实现，每个li又分为左右两部分；
5、左边为带链接的图片，使用a标签及div包裹起来；
6、右边另起一个div，内部和h3标题和一个p段落；
7、部分代码：
html：

[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

[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、源代码下载：

游客，如果您要查看本帖隐藏内容请回复