年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1322|回复: 0

[电子商务] 14、商城首页制作实战训练--可重用的tab标签

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

    [LV.9]以坛为家II

    发表于 2016-2-25 10:38:21 | 显示全部楼层 |阅读模式
    1、不上图都不知道你在说什么
    屏幕快照 2016-02-25 上午10.34.47.png 屏幕快照 2016-02-25 上午10.35.05.png
    2、不多说了,直接上码吧
    [HTML] 纯文本查看 复制代码
    <div class="tab">
    	<ul>
    		<li class="active">有人在问
    		<a href="javascript:;" class="triagle_down_red"></a></li>
    		<li class="gradient">有人知道
    		<a href="javascript:;" class="triagle_down_gray"></a></li>
    		<li class="gradient">热门问题
    		<a href="javascript:;" class="triagle_down_gray"></a></li>
    	</ul>
    </div>
    <div style=" height: 300px;">
    </div>
    
    [HTML] 纯文本查看 复制代码
    <div class="tab">
    	<ul>
    		<li class="active">人气
    		<a href="javascript:;" class="triagle_down_red"></a></li>
    		<li class="gradient">推荐
    		<a href="javascript:;" class="triagle_down_gray"></a></li>
    		<li class="gradient">最新
    		<a href="javascript:;" class="triagle_down_gray"></a></li>
    	</ul>
    </div>
    <div style=" height: 300px;">
    </div>
    [CSS] 纯文本查看 复制代码
    .tab {height: 25px; border-bottom: 1px solid #ccc;}
    .tab ul{text-align: center;line-height: 24px;color: #666;}
    .tab li{float: left; border: 1px solid #ccc;border-radius: 4px 4px 0 0;margin-left: -1px; position: relative; cursor: pointer;}
    .tab .active{line-height: 25px; border-bottom: none; font-weight: bold; color: #454545;background: #fff;}
    .tab .triagle_down_gray, .tab .triagle_down_red{top: 10px; right: 12px;}
    
    .section .tab {padding: 0 10px;}
    .section .tab li{width: 97px;}
    .side_section .tab {padding: 0 8px;}
    .side_section .tab li{width: 65px;}
    3、源代码下载
    游客,如果您要查看本帖隐藏内容请回复
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

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

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

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