年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2237|回复: 0

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

[复制链接]
  • TA的每日心情

    2024-10-15 10:05
  • 签到天数: 372 天

    [LV.9]以坛为家II

    发表于 2016-2-23 14:12:54 | 显示全部楼层 |阅读模式
    本帖最后由 Sian 于 2016-2-23 15:06 编辑

    1、先看效果图:
    QQ20160223-3.png
    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、源代码下载:
    游客,如果您要查看本帖隐藏内容请回复
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-11-22 01:10 , Processed in 0.052279 second(s), 25 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表