10、商城首页制作实战训练--模块标题模块选项卡制作
本帖最后由 Sian 于 2016-2-23 15:06 编辑1、先看效果图
2、先说标题，从样式上来看可定义其结构为h2标签中包含一个strong红色字体和一个span黑色字，右边带一个a链接图片；
3、为什么右边要是一个a链接图片呢？因为有些标题是没有那个小图标的所以要单独出来；
4、选项卡之前已经完成了外围样式，里面没有文字与三角形；
5、选项卡文字同样使用strong+span样式，右边加一个绝对布局的三角形；
6、相关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<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、源代码下载：**** Hidden Message *****
页:
[1]