Jquery学习笔记（7）--京东导航菜单

主要是几个模块的浮动和定位不好处理，另外还缺少右侧导航，及幻灯片。
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <script src="jquery.js" type="text/javascript"></script>
  7     <style type="text/css">
  8         *{
  9             margin: 0;
 10         }
 11         #head img{
 12             position: absolute;
 13             left: 50%;
 14             margin-left:-595px;
 15         }
 16         #head{
 17             position: relative;
 18             width: 100%;
 19             height: 80px;
 20             background-color: #f00;
 21         }
 22         .clear{
 23             clear: both;
 24         }
 25         #nav li{
 26             list-style: none;
 27             float: left;
 28             border: 1px solid #000;
 29             font-family: 微软雅黑;
 30             font-weight: bold;
 31             cursor: pointer;
 32             margin-left: 10px;
 33 
 34         }
 35         #nav{
 36             margin-left: 200px;
 37         }
 38         #left li{
 39             list-style: none;
 40             margin-top: 0px;
 41             border: 1px solid #000;
 42             padding-top: 2px;
 43             padding-bottom: 2px;
 44             padding-left: 10px;
 45             font-family: 微软雅黑;
 46             color: #fff;
 47         }
 48         
 49         #left ul{
 50             background-color: #888;
 51             width: 190px;
 52             height: 480px;
 53             margin-left: 50px;
 54             margin-top: 10px;
 55             padding-top: 10px;
 56             padding-left: 0px;
 57         }
 58         #left span{
 59             cursor: pointer;
 60         }
 61         #left{
 62             float: left;
 63             position: relative;
 64             
 65         }
 66         #images{
 67             margin-left: 10px;
 68             float: left;
 69             position: relative;
 70             
 71         }
 72         #largeImg{
 73             /*margin-left: 10px;*/
 74             margin-top: 10px;
 75         }
 76         #smallImg{
 77             margin-top: 10px;
 78             /*margin-left: 10px;*/
 79 
 80         }
 81         #welcom{
 82             width: 190px;
 83             height: 480px;
 84             background-color: #00f;
 85             margin-top: 10px;
 86             margin-left: 10px;
 87             float: left;
 88             position: relative;
 89             
 90         }
 91         #main{
 92             position: relative;
 93             /*position: absolute;*/
 94             left: 50%;
 95             margin-left: -595px;
 96             
 97         }
 98     </style>
 99 </head>
100 <body>
101     <!-- 广告 -->
102     <div id="head"><img src="head.jpg"></div>
103     <!-- main把三个div合到一起 -->
104     <div id="main">
105         <!-- 上侧导航 -->
106         <div id="nav">
107             <ul>
108                 <li>秒杀</li>
109                 <li>优惠券</li>
110                 <li>闪购</li>
111                 <li>拍卖</li>
112             </ul>
113         </div>
114         <div class="clear"></div>
115         <!-- 左侧导航 -->
116         <div id="left">
117             <ul>
118                 <li><span>家用电器</span></li>
119                 <li><span>手机/数码</span></li>
120                 <li><span>男装/女装</span></li>
121                 <li><span>电脑/办公</span></li>
122             </ul>
123         </div>
124         <!-- 右侧广告 -->
125         <div id="images">
126             <div id="largeImg">
127                 <img src="1.jpg" alt="">
128             </div>
129             <!-- <div class="clear"></div> -->
130             <div id="smallImg">
131                 <img src="4.jpg" alt="">
132                 <img src="5.jpg" alt="">
133             </div>
134         </div>
135         <!-- 最右侧充话费 -->
136         <div id="welcom">
137             <div>注册</div>
138             <div>登录</div>
139         </div>
140     </div>
141     
142 </body>
143 <script>
144     $('#nav li').hover(
145         function(){
146             $(this).css({"color":"#f00"});
147         },
148         function(){
149             $(this).css({"color":"#000"});
150         }
151     );
152     $('#left li').hover(
153         function(){
154             $(this).css({"background-color":"#ddd"});
155         },
156         function(){
157             $(this).css({"background-color":"#888"});
158 
159         }
160     );
161     $('#left span').hover(
162         function(){
163             $(this).css({"color":"#f00"});
164 
165         },
166         function(){
167             $(this).css({"color":"#fff"});
168 
169         }
170     );
171 
172 </script>
173 </html>