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