DIV+CSS仿360buy京东商城导航条

最新推荐文章于 2021-06-08 13:19:54 发布
最新推荐文章于 2021-06-08 13:19:54 发布
阅读量680 收藏
点赞数
分类专栏： jquery特效 JavaScript 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【荐】DIV+CSS仿360buy京东商城导航条</title>
<style type="text/css">
.my_left_category { width:150px; font-size:12px; font-family:arial, sans-serif; letter-spacing:2px; }
.my_left_category h1 { background-image:url(http://www.iiwnet.com/images/jstx/spring_06.gif); height:20px; background-repeat:no-repeat; font-size:14px; font-weight:bold; padding-left:15px; padding-top:8px; margin:0px; color:#FFF; }
.my_left_category .my_left_cat_list { width:148px; border-color:#b60134; border-style:solid; border-width:0px 1px 1px 1px; line-height:13.5pt; }
.my_left_category .my_left_cat_list h2 { margin:0px; padding:3px 5px 0px 9px; }
.my_left_category .my_left_cat_list h2 a { color:#d6290b; font-weight:bold; font-size:14px; line-height:22px; }
.my_left_category .my_left_cat_list h2 a:hover { color:#d6290b; font-weight:bold; font-size:14px; line-height:22px; }
.my_left_category .h2_cat { width:148px; height:26px; background-image:url(http://www.iiwnet.com/images/jstx/my_menubg.gif); background-repeat:no-repeat; line-height:26px; font-weight:normal; color:#333333; position:relative; }
.my_left_category .h2_cat_1 { width:148px; height:26px; background-image:url(http://www.iiwnet.com/images/jstx/my_menubg.gif); background-repeat:no-repeat; line-height:26px; font-weight:normal; color:#333333; position:relative; }
.my_left_category a { font:12px; text-decoration:none; color:#333333; }
.my_left_category a:hover { text-decoration:underline; color:#ff3333; }
.my_left_category h3 { margin:0px; padding:0px; height:26px; font-size:12px; font-weight:normal; display:block; padding-left:8px; }
.my_left_category h3 span { color:#999999; width:145px; float:right; }
.my_left_category h3 a { line-height:26px; }
.my_left_category .h3_cat { display:none; width:204px; position:absolute; left:123px; margin-top:-26px; cursor:auto; }
.my_left_category .shadow { position:inherit; background:url(http://www.iiwnet.com/images/jstx/shadow_04.gif) left top; width:204px; }
.my_left_category .shadow_border { position:inherit; width:200px; border:1px solid #959595; margin-top:1px; border-left-width:0px; background:url(http://www.iiwnet.com/images/jstx/shadow_border.gif) no-repeat 0px 21px; background-color:#ffffff; margin-bottom:3px }
.my_left_category .shadow_border ul { margin:0; padding:0; margin-left:15px }
.my_left_category .shadow_border ul li { list-style:none; padding-left:10px; background-image:url(http://www.iiwnet.com/images/jstx/my_cat_sub_menu_dot.gif); background-repeat:no-repeat; background-position:0px 8px; float:left; width:75px; height:26px; overflow:hidden; letter-spacing:0px; }
.my_left_category .active_cat { z-index:99; background-position:0 -25px; cursor:pointer; }
.my_left_category .active_cat h3 { font-weight:bold }
.my_left_category .active_cat h3 span { display:none; }
.my_left_category .active_cat div { display:block; }
</style>
</head>
<body>
<div class="my_left_category">
  <h1>分类导航</h1>
  <div class="my_left_cat_list">
    <h2><a href="#">按网站类别</a></h2>
    <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
      <h3><a href="#">企业建站</a></h3>
      <div class="h3_cat">
        <div class="shadow">
          <div class="shadow_border">
            <ul>
              <li><a href="#">LOGO设计</a></li>
              <li><a href="#">网站设计</a></li>
              <li><a href="#">网站广告</a></li>
              <li><a href="#">推广</a></li>
              <li><a href="#">建网站</a></li>
              <li><a href="#">网站推广</a></li>
              <li><a href="#">网站建设</a></li>
              <li><a href="#">SEO</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
      <h3><a href="#">韩国男装</a></h3>
      <div class="h3_cat">
        <div class="shadow">
          <div class="shadow_border">
            <ul>
              <li><a href="#">LOGO设计</a></li>
              <li><a href="#">网站设计</a></li>
              <li><a href="#">网站广告</a></li>
              <li><a href="#">推广</a></li>
              <li><a href="#">建网站</a></li>
              <li><a href="#">网站推广</a></li>
              <li><a href="#">网站建设</a></li>
              <li><a href="#">SEO</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
      <h3><a href="#">网页代码站</a></h3>
      <div class="h3_cat">
        <div class="shadow">
          <div class="shadow_border">
            <ul>
              <li><a href="#">LOGO设计</a></li>
              <li><a href="#">源码下载</a></li>
              <li><a href="#">最新更新</a></li>
              <li><a href="#">下载排行</a></li>
              <li><a href="#">ASP</a></li>
              <li><a href="#">PHP</a></li>
              <li><a href="#">AJAX</a></li>
              <li><a href="#">DELPHI</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- again -->
    <h2><a href="#">按品牌选货</a></h2>
    <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
      <h3><a href="#" style="color:#ff3333;">热销推荐</a></h3>
      <div class="h3_cat">
        <div class="shadow">
          <div class="shadow_border">
            <ul>
              <li><a href="#">LOGO设计</a></li>
              <li><a href="#">网站设计</a></li>
              <li><a href="#">网站广告</a></li>
              <li><a href="#">推广</a></li>
              <li><a href="#">建网站</a></li>
              <li><a href="#">网站推广</a></li>
              <li><a href="#">网站建设</a></li>
              <li><a href="#">SEO</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
      <h3><a href="#">网站建设</a></h3>
      <div class="h3_cat">
        <div class="shadow">
          <div class="shadow_border">
            <ul>
              <li><a href="#">LOGO设计</a></li>
              <li><a href="#">网站设计</a></li>
              <li><a href="#">推广</a></li>
              <li><a href="#">建网站</a></li>
              <li><a href="#">网站推广</a></li>
              <li><a href="#">推广</a></li>
              <li><a href="#">LOGO设计</a></li>
              <li><a href="#">网站设计</a></li>
              <li><a href="#">网站广告</a></li>
              <li><a href="#">推广</a></li>
              <li><a href="#">建网站</a></li>
              <li><a href="#">网站推广</a></li>
              <li><a href="#">网站建设</a></li>
              <li><a href="#">LOGO设计</a></li>
              <li><a href="#">网站设计</a></li>
              <li><a href="#">网站建设</a></li>
              <li><a href="#">SEO</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
      <h3><a href="#">网站程序</a></h3>
      <div class="h3_cat">
        <div class="shadow">
          <div class="shadow_border">
            <ul>
              <li><a href="#">PHP</a></li>
              <li><a href="#">ASP</a></li>
              <li><a href="#">JSP</a></li>
              <li><a href="#">ASP.Net</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="h2_cat_1" οnmοuseοver="this.className='h2_cat_1 active_cat'" οnmοuseοut="this.className='h2_cat_1'">
      <h3><a href="#">其他网站</a></h3>
    </div>
    <!-- again -->
    <h2><a href="#">按价格选货</a></h2>
    <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
      <h3><a href="#">低端价位</a></h3>
      <div class="h3_cat">
        <div class="shadow">
          <div class="shadow_border">
            <ul>
              <li><a href="#">50元以下</a></li>
              <li><a href="#">50-100元</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">
      <h3><a href="#">中高端价位</a></h3>
      <div class="h3_cat">
        <div class="shadow">
          <div class="shadow_border">
            <ul>
              <li><a href="#">100-150元</a></li>
              <li><a href="#">150-200元</a></li>
              <li><a href="#">200-300元</a></li>
              <li><a href="#">300元以上</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- again -->
    <h2><a href="#">超值特价区</a></h2>
    <h2><a href="#">现货区</a></h2>
    <!--测试复制end--> 
  </div>
</div>
</html>

http://www.niutw.com/view/310.html

ze_lin_huang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【H5】自己写了个仿360商城demo,欢迎大虾路过拍砖
wesleyq的博客
08-12 7265
1) 仿360商城写的demo，完成度较高。欢迎大神路过抛砖！ 可通过BAE在线链接直接打开：http://wesleyq5233pj360mall.duapp.com/html/index.html； 喜欢的话也可以通过我的github：https://github.com/WesleyQ5233/360Mall.git下载源码，喜欢的话你就star一下。 2） 主要功能及技术点：购物
高仿360导航源码
11-07
高仿360导航源码，PHP的，界面非常美观，排版清晰，演示地址：www.316317.com
仿360购物导航源码（单页）
04-22
仿360购物导航源码（单页）
仿360buy京东商城整站程序
10-28
仿京东商城最新版ecshop 保证能用 上传不了图片 下载了保证能用
模仿360商城
07-31
仿360商城写的demo，完成度较高。对web初学者还是很有学习意义的奥！！ 主要功能及技术点：购物车的增删改查、商品详情页的分页效果、登录注册逻辑的实现、二级菜单、吸顶、首页的楼梯效果、ajax、跨域、轮播图、选项卡、代码封装、css3悬浮效果、放大镜并根据用户习惯去完善细节等；
DIV+CSS实现仿京东商城导航条效果
01-21
本文实例讲述了DIV+CSS实现仿京东商城导航条效果。分享给大家供大家参考。具体如下： 这里演示了DIV+CSS实现仿京东商城导航条功能代码，鼠标滑过导航条选项即可弹出对应的子菜单列表，界面简洁大方。 运行效果截图...
DIV+CSS仿京东商城导航条.rar
12-14
标题中的“DIV+CSS仿京东商城导航条”指的是使用HTML中的`<div>`元素和CSS样式来模仿京东商城网站的导航栏设计。这种技术在网页前端开发中非常常见，因为`<div>`元素是用于创建网页布局的基本构建块，而CSS（层叠...
div+css布局大全
03-22
下面，我们将深入探讨div+css布局的相关知识点。 1. **Div元素**：HTML中的`<div>`（division）元素是一个通用容器，用于组合HTML元素，为页面提供结构。通过设置`<div>`的类或ID属性，我们可以对多个元素进行分组...
七套最新div+css中文html模板免费下载
03-27
现在网上到处都是div+css模板，但是真正能用的到底有几个？你自己说！ 无非是一些英文版的，但是国外的模板理念和国内的很不一样，英文的讲究框架合理，韩国的讲究视觉美，国内的刚好是二者的综合体。 现在模板界有...
最新仿360导航网站源码
02-21
源码名称：最新仿360导航网站源码 安装方法：新手菜鸟均可入手，简单、快捷，无须繁琐的安装，无须复杂的后台，无须数据库，无须PHP+MySQL。只要一般的空间就可以，上传即可使用。 内带FlashFXP_4.3.1.1969AB破解版上传工具 （重要注意：FXP工具破解方法是点击输入代码，点确认就可以了。以后用多久都可以）
最新仿360导航大全源码
12-11
仿360导航十二月版来了，新版界面大气，延续官方原味风格，钢琴导航栏，影视资讯自动更新，源码采用html+JS形式，适合所有主机空间，新手菜鸟均可入手，简单、快捷，无须数据库，无须繁琐的安装，上传即可使用，完全免费。美观、实用，是你快速建站的最好选择。 网址导航，所有网民都适用，以其实用性，安全性高，渐渐被大多数网民所熟知，包含大量实用网址,如搜索,音乐,娱乐,图片,小游戏,短信,社区,日记,相册,K歌,通讯簿,BLOG,天气预报,实用工具.最方便,最快捷,最多华人使用的安全上网导航。包含许多实用工具，如天气预报，身份证、IP 地 址，车查询、公交线路、车辆违章、 在线地图、在线翻译等。 默认首页：index.html 温馨提示： 　※ 下载后请更换自己的网站LOGO； 　※ 首页LOGO位置images/t0151320b1d0fc50be8.png； 　※ 内页LOGO位置images/logo.png； 　※ 默认搜索引擎可在index.html首页修改； 　※ 首页内容95%可在首页index.html完成修改，其余为js及远程调用； 　※ 统计代码在js\tj.js； 　※ 留言板管理后台http://你的网站/feedback/admin_index.asp 用户名：admin 密码：admin 上传即可使用。 2013-12-3 全新首页、全新体验。
仿360购物导航（单页）
01-07
360购物导航单页，精仿360购物导航，只有单页导航
仿360buy京东商城整站程序 ecshop仿京东商城.zip源码PHP项目源代码下载
03-16
仿360buy京东商城整站程序 ecshop仿京东商城.zip源码PHP项目源代码下载仿360buy京东商城整站程序 ecshop仿京东商城.zip源码PHP项目源代码下载 1.适合个人搭建网站项目参考 2.适合学生毕业设计搭建网站参考 3.适合小公司搭建网站项目参考
2015最新高仿360导航源码，上传既可用
01-30
默认首页：index.html 原始首页：indexY.html 温馨提示： 　※ 首页LOGO位置images/logo.png； 　※ 内页LOGO位置erji/logo.png； 　※ 默认搜索引擎可在index.html首页修改； 　※ 全站统计代码在js\tj.js； 　※ 留言板管理后台http://你的网站/feedback/admin_index.asp 用户名：admin 密码：admin 上传即可测试。
仿360菜单html5
11-30
仿360菜单html5，很切实际，亲自使用过，很赞，欢迎使用
仿京东html右侧侧导航菜单,【分享】自己做了个仿京东的导航栏，
weixin_30653101的博客
06-03 657
该楼层疑似违规已被系统折叠隐藏此楼查看此楼ul{width:90%;list-style:none;}li{float:left;width:5%;background-color:rgb(228,59,62);color:white;padding:12px;text-align:center;font-weight:bold;}li:hover{background-color:rgb(16...
【荐】DIV+CSS仿360buy京东商城导航条
weixin_34038293的博客
05-31 116
代码简介： 【荐】DIV+CSS仿360buy京东商城导航条 ，很棒的，赶快来试试。 代码内容： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>【荐】DIV+CSS仿360buy京东商城导航条_网页代码站(www.webdm.cn)</title> <s...
html 盒子模型基础（导航条实例:会出现高度塌陷问题）（七）
余正源的博客
02-07 1036
1.导航条: 导航条 /*清除默认样式*/ *{ margin: 0; padding: 0; } /*设置ul*/ ul{ /*去掉项目符号*/ list-style: none; /*设置背景颜色*/ background-color: #6495ED; /*设置宽度
html仿京东快速购物导航,jQuery仿京东楼层滑动侧边栏高亮(原创)
weixin_34625578的博客
06-08 559
插件描述：jQuery模仿京东侧边栏点击滑动到该楼层，同时侧边栏随着页面滚动对应导航高亮。更新时间：2017/9/30 下午2:48:37更新说明：1，添加了查看评论按钮来改变对应区的高度2，将floorList和navList作为匿名函数作用域的变量，不用在需要的函数再传递3，将data数组放到滚动监听和点击事件的位置，防止楼层高度变动导致的位置变化未更新导致的bug注意：本次更新就是为了解决楼...
使用div+css构建网站导航条教程
"接下来是导航条-十步学会div+css建站" 在网页设计中，Div+CSS是一种常见的布局方式，它将结构（HTML）与样式（CSS）分离，使得网页设计更加灵活、可维护性更强。在这个教程中，我们将专注于如何使用Div+CSS创建一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值