年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1254|回复: 0

[电子商务] 10、商城首页制作实战训练--模块标题模块选项卡制作

[复制链接]
  • TA的每日心情
    倒霉
    2021-4-22 22:52
  • 签到天数: 369 天

    [LV.9]以坛为家II

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

    1、先看效果图
    QQ20160223-1.png QQ20160223-2.png
    2、先说标题,从样式上来看可定义其结构为h2标签中包含一个strong红色字体和一个span黑色字,右边带一个a链接图片;
    3、为什么右边要是一个a链接图片呢?因为有些标题是没有那个小图标的所以要单独出来;
    4、选项卡之前已经完成了外围样式,里面没有文字与三角形;
    5、选项卡文字同样使用strong+span样式,右边加一个绝对布局的三角形;
    6、相关CSS样式:
    [CSS] 纯文本查看 复制代码
    .options .nav{ height: 34px;}
    .options .nav li{ width: 172px; height: 33px; line-height: 33px; border: 1px solid #EEE; border-bottom: none; border-radius: 6px 6px 0 0;text-align: center; position: relative;}
    .options .nav .active{ width: 172px; height: 34px; line-height: 34px; background: #FFF;}
    .options .con{ width: 348; border: 1px solid #EEE; border-radius: 0 0 6px 6px; height: 150px;/*临时*/}
    .options .nav .triagle_down_red, .triagle_down_gray{position: absolute; top: 14px; right: 12px;}
    
    .main_title{height: 40px; line-height: 40px; position: relative;}
    .main_title strong, .options .nav li strong{ color: #cc0d13; font-size: 12px;}
    .main_title span, .options .nav li span{color: #000; margin-left: 5px;}
    .main_title a{position: absolute; right: 0px;top: 14px;}
    7、相关html
    [HTML] 纯文本查看 复制代码
    <div class="options fr">
            <ul class="nav">
                    <li class="active fl">
                            <strong>HOT SHOP<span>红店铺</span></strong>
                            <a href="javascript:;" class="triagle_down_red"></a>
                    </li>
                    <li class="gradient fr">
                            <strong>EW SHOP<span>新开铺</span></strong>
                            <a href="javascript:;" class="triagle_down_gray"></a>
                    </li>
            </ul>
            <div class="con">
                    
            </div>
    </div>
    <div class="side_section">
            <h2 class="main_title">
                    <strong>COUPONS<span>抢卷儿</span></strong>
                    <a href="#"><img src="img/more.gif" alt="更多" title="更多"/></a>
            </h2>
    </div>
    
    <div class="side_section">
            <h2 class="main_title">
                    <strong>SHOP<span>今日推荐</span></strong>
                    <a href="#"><img src="img/more.gif" alt="更多" title="更多"/></a>
            </h2>
    </div>
    
    <div class="side_section">
            <h2 class="main_title">
                    <strong>360°SHOP<span>全景逛店</span></strong>
                    <a href="#"><img src="img/more.gif" alt="更多" title="更多"/></a>
            </h2>
    </div>
    
    
    8、源代码下载:
    游客,如果您要查看本帖隐藏内容请回复


    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2021-8-6 05:32 , Processed in 1.000799 second(s), 25 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

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