Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Div+CSS > 从布局淘宝导航菜单总结和学习 完美淘宝导航DIV+CSS案例分析
隐藏/显示侧边栏

从布局淘宝导航菜单总结和学习 完美淘宝导航DIV+CSS案例分析

2014-05-21 23:48    来源:http://www.cgner.com    责任编辑:程管网    字号【
今天,尝试的仿了最新淘宝的导航部分纯DIV+CSS布局而成!学习其精髓的部分。DIV+CSS
其中运用了CSS Sprites图标整合技术(相关文档CSS Sprites图标整合技术请参考 http://www.cgner.com/web/css/201309_60.html

效果:
淘宝最新DIV+CSS导航代码

下面就开始贴上淘宝导航的代码:
CSS部分代码如下:
  .icon{ display:inline-block; vertical-align:middle;}
  .tb_menu{ width:190px; border:1px solid #F40;}
  .tb_menu h2{ height:35px; background:#F40; }
  .tb_menu h2 i{ width:100px; height:16px; margin:10px 15px; text-indent:-99999px;}
 
  /*总结:针对图标类,里面可写文字,易读SEO等考虑,然后设置text-indent文本缩进不让它显示即可。
  公共图标样式,外围class设置宽高基本样式。
  图标的两个class,其中一个写公共的样式(公用css很有用)
  另一个class写background背景。*/

  .tb_menu .bd{ padding:0 9px;}
  .tb_menu .bd dt{ padding-top:10px; line-height:19px; font-size:14px; font-weight:700; color:#3C3C3C;}
  .tb_menu .bd dt i{ width:25px; height:21px; margin-right:7px; margin-top:-3px;}

  .tb_menu .bd dd{ border-bottom:1px solid #E6E7EB; line-height:22px; padding-left:5px; padding-bottom:10px;}
  .tb_menu .bd dd a{ margin-right:8px; position:relative; zoom:1; color:#3C3C3C; text-decoration:none; display:inline-block;}/*务必加上inline-block,不然不能整体字换行,行内整体块显示,不隔开*/
  .tb_menu .bd dd a:hover{ color:#FF4300;}
  .tb_menu .bd dd:last-child{ border:none;} /*CSS3样式*/
  .hot,.new{ position:absolute; width:9px; height:14px; top:0; right:-8; }

  /*图片区,对于大型网站放到一个独立的CSS中这样以便更好的维护*/
  .hot{background:url(hot.gif) no-repeat;}
  .new{background:url(new.gif) no-repeat;}
  .ic_bg_top{ background:url(bg.png) no-repeat 0 -125px;}
  .ic_bg_theme{ background:url(bg.png) no-repeat -150px -240px;}
  .ic_bg_shop{ background:url(bg.png) no-repeat -150px -214px;}
  .ic_bg_favour{ background:url(bg.png) no-repeat -150px -190px;}
  .ic_bg_tool{ background:url(bg.png) no-repeat -150px -265px;}


淘宝最新导航HTML结构部分

 <div class="tb_menu">
  <h2><i class="icon ic_bg_top">淘宝特色服务</i></h2>
  <dl class="bd">
   <dt><i class="icon ic_bg_theme"></i>主题市场</dt>
   <dd>
    <a href="#" target="_blank">品质男人</a>
    <a href="#" target="_blank">爱美女人</a>
    <a href="#" target="_blank">情侣</a>
    <a href="#" target="_blank">美女速成</a>
    <a href="#" target="_blank">孕婴童</a>
    <a href="#" target="_blank">中老年<i class="hot"></i></a>
    <a href="#" target="_blank">家庭净化</a>
    <a href="#" target="_blank">装修</a>
    <a href="#" target="_blank">家居</a>
    <a href="#" target="_blank">美嫁新娘<i class="hot"></i></a>
    <a href="#" target="_blank">有车族</a>
    <a href="#" target="_blank">运动派</a>
    <a href="#" target="_blank">游戏</a>
    <a href="#" target="_blank">美食</a>
    <a href="#" target="_blank">动漫</a>
    <a href="#" target="_blank">爱好</a>
   </dd>
   <dt><i class="icon ic_bg_shop"></i>特色购物</dt>
   <dd>
    <a href="#" target="_blank">淘宝二手</a>
    <a href="#" target="_blank">全球购</a>
    <a href="#" target="_blank">拍卖会<i class="hot"></i></a>
    <a href="#" target="_blank">淘女郎</a>
    <a href="#" target="_blank">拾货</a>
    <a href="#" target="_blank">挑食</a>
    <a href="#" target="_blank">淘宝奇葩</a>
    <a href="#" target="_blank">夜淘宝<i class="new"></i></a>
    <a href="#" target="_blank">星店</a>
    <a href="#" target="_blank">淘宝星愿</a>
    <a href="#" target="_blank">淘宝同学</a>
    <a href="#" target="_blank">腔调</a>
    <a href="#" target="_blank">同城便民</a>
    <a href="#" target="_blank">新欢</a>
    <a href="#" target="_blank">美搭</a>
   </dd>
   <dt><i class="icon ic_bg_favour"></i>优惠促销</dt>
   <dd>
    <a href="#" target="_blank">天天特价 </a>
    <a href="#" target="_blank">免费试用</a>
    <a href="#" target="_blank">清仓</a>
    <a href="#" target="_blank">淘金币</a>
    <a href="#" target="_blank">一元起拍</a>
   </dd>
   <dt><i class="icon ic_bg_tool"></i>工具</dt>
   <dd>
    <a href="#" target="_blank">阿里旺旺</a>
    <a href="#" target="_blank">支付宝</a>
    <a href="#" target="_blank">来往<i class="hot"></i></a>
   </dd>
  </dl>
</div>


淘宝核心DIV+CSS导航Demo: 淘宝核心DIV+CSS导航Demo

更多
Tags 标签: 淘宝导航 淘宝导航CSS 淘宝完整DIV+CSS
责任编辑:程管网
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |