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

Sian

1、先看效果图

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

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