主要是几个模块的浮动和定位不好处理，另外还缺少右侧导航，及幻灯片。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script src="jquery.js" type="text/javascript"></script>

     <style type="text/css">

         *{

             margin: 0;

         }

         #head img{

             position: absolute;

             left: 50%;

             margin-left:-595px;

         }

         #head{

             position: relative;

             width: 100%;

             height: 80px;

             background-color: #f00;

         }

         .clear{

             clear: both;

         }

         #nav li{

             list-style: none;

             float: left;

             border: 1px solid #000;

             font-family: 微软雅黑;

             font-weight: bold;

             cursor: pointer;

             margin-left: 10px;

         }

         #nav{

             margin-left: 200px;

         }

         #left li{

             list-style: none;

             margin-top: 0px;

             border: 1px solid #000;

             padding-top: 2px;

             padding-bottom: 2px;

             padding-left: 10px;

             font-family: 微软雅黑;

             color: #fff;

         }

         #left ul{

             background-color: #888;

             width: 190px;

             height: 480px;

             margin-left: 50px;

             margin-top: 10px;

             padding-top: 10px;

             padding-left: 0px;

         }

         #left span{

             cursor: pointer;

         }

         #left{

             float: left;

             position: relative;

         }

         #images{

             margin-left: 10px;

             float: left;

             position: relative;

         }

         #largeImg{

             /*margin-left: 10px;*/

             margin-top: 10px;

         }

         #smallImg{

             margin-top: 10px;

             /*margin-left: 10px;*/

         }

         #welcom{

             width: 190px;

             height: 480px;

             background-color: #00f;

             margin-top: 10px;

             margin-left: 10px;

             float: left;

             position: relative;

         }

         #main{

             position: relative;

             /*position: absolute;*/

             left: 50%;

             margin-left: -595px;

         }

     </style>

 </head>

 <body>

     <!-- 广告 -->

     <div id="head"><img src="head.jpg"></div>

     <!-- main把三个div合到一起 -->

     <div id="main">

         <!-- 上侧导航 -->

         <div id="nav">

             <ul>

                 <li>秒杀</li>

                 <li>优惠券</li>

                 <li>闪购</li>

                 <li>拍卖</li>

             </ul>

         </div>

         <div class="clear"></div>

         <!-- 左侧导航 -->

         <div id="left">

             <ul>

                 <li><span>家用电器</span></li>

                 <li><span>手机/数码</span></li>

                 <li><span>男装/女装</span></li>

                 <li><span>电脑/办公</span></li>

             </ul>

         </div>

         <!-- 右侧广告 -->

         <div id="images">

             <div id="largeImg">

                 <img src="1.jpg" alt="">

             </div>

             <!-- <div class="clear"></div> -->

             <div id="smallImg">

                 <img src="4.jpg" alt="">

                 <img src="5.jpg" alt="">

             </div>

         </div>

         <!-- 最右侧充话费 -->

         <div id="welcom">

             <div>注册</div>

             <div>登录</div>

         </div>

     </div>

 </body>

 <script>

     $('#nav li').hover(

         function(){

             $(this).css({"color":"#f00"});

         },

         function(){

             $(this).css({"color":"#000"});

         }

     );

     $('#left li').hover(

         function(){

             $(this).css({"background-color":"#ddd"});

         },

         function(){

             $(this).css({"background-color":"#888"});

         }

     );

     $('#left span').hover(

         function(){

             $(this).css({"color":"#f00"});

         },

         function(){

             $(this).css({"color":"#fff"});

         }

     );

 </script>

 </html>

Jquery学习笔记（7）--京东导航菜单的更多相关文章

  1. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  2. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  3. jQuery ui背景色动态渐变导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  5. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  6. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  7. jQuery漂亮图标的垂直导航菜单

    效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...

  8. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  9. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  10. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

随机推荐

  1. HDU 4372 - Count the Buildings（组合计数）

    首先想过n^3的组合方法,即f(i,j,k)=f(i-1,j,k)*(i-2)+f(i-1,j-1,k)+f(i-1,j,k-1),肯定搞不定 然后想了好久没有效果,就去逛大神博客了,结果发现需要用到 ...

  2. mysql多实例介绍及配置

    mysql多实例介绍及配置 1.mysql多实例介绍 1.1 什么是mysql多实例 mysql多实例就是在一台机器上开启多个不同的服务端口(如:3306,3307),运行多个MySQL服务进程,通过 ...

  3. 接口测试框架开发（三）：maven+restAssured+Excel（jxl）+testng+extentreports的接口自动化

    1.http://www.cnblogs.com/lin-123/p/7151031.html 2.http://www.cnblogs.com/lin-123/p/7151046.html 3.ht ...

  4. java调用机器上的shell脚本

    java调用机器上的shell脚本,可以这样方便的通过shell脚本调用本机的C.C++等程序 Process process = null; Runtime runTime = Runtime.ge ...

  5. super.getclass()的结果是父类还是子类？

    package as; import java.util.Date; public class Test extends Date{ public static void main(String[] ...

  6. 《The Story of My Life》Introductiom - Historical and Literary Context - Education of the Deaf and Blind

    At the time the Story of My Life was published, the idea of a disabled person as an active member of ...

  7. Android五天乐（第二天）Activity跳转与传输数据，Fragment

    1 Activity的生命周期 activity在生命周期内共同拥有执行.暂停,和停止三种状态.每次发生状态转换时,都有一个Activity方法将状态改变的消息通知给activity.activity ...

  8. android项目解刨之时间轴

    近期开发的app中要用到时间轴这东西.须要实现的效果例如以下: 想想这个东西应该能够用listview实现吧. 然后近期就模拟着去写了: 首先写  listview的item的布局: listview ...

  9. Navicat Premium如何打开SQL文件.MDF和.LDF文件

    相信大家再装SQL Server时都会遇到一件很头疼的事情--装完SQL server之后发现没有启动程序.没有经验的会以为SQL SERVER安装失败了于是选择重装.可是呵呵,重装了4,5次还是一样 ...

  10. Cacti监控MySQL实现过程中碰到的问题解汇总

    前言:cacti监控mysql服务器的大概50张graphs都弄出来了,也出图了,当中遇到一些问题,印象比較深刻的记录例如以下: (一):加入io监控 点击Create Graphs for this ...