摘要：
这主要是因为几个模块的浮动和定位不容易处理。此外，还缺少正确的导航和幻灯片。DOCTYPEhtml˃2345文档678*{9margin:0；10}11#headimg｛12位置：绝对；13left:50%；14marginleft:-595px；15}16#head｛17位置：相对；18width:100%；19height:80px；20backgroundcolor:#f00；21 22.清除｛23clear:两者；24｝25#navli｛26列表样式：无；27float:左；28border:1pxsolid#000；29font-family:Microsoft Yahei；30font-weight:bold；31cursor:指针；32margin left:10px；3334｝35#nav｛36margin left:200px；37｝38#leftli｛39列表样式：没有；40margin top:0px；41border:1pxsolid#000；42padding top:2px；43padding bottom:2px；44padding left:10 px；45font-familly:Microsoft Yahei；46color:#fff；47｝4849#leftul｛50背景色：#888；51宽度：190px；52高度：480px；53左边距：50px；54左边距：10px；55左边距：10 px；56左边距：0px；57｝58#leftspan｛59光标：指针；60｝61#左边距｛62左边距：左边距；63位置：相对；6465｝66#图像｛67左边距：10mpx；68左边距：左距；69位置：相对的；7071｝72#largeImg｛73/*左边距：1px；*/74左边距：10%；75｝76#小Img｛77margin top:10px；78/*左边距：10px；*/7980｝81#welcom｛82width:190px；83height:480px；84backgroundcolor:#00f；85margin op:10px；86margin left：10px；87float:left；88position:relative；8990｝91#main｛92 position:相对；93/*position:绝对；*/94 left:50%；95margin leaft:-595px；9697｝9899100101104105106107108秒杀109优惠券110闪购˂/li]111拍卖˂/li˂112113114115116117118家用家用电器119移动/数字120男/女˂/span]˂/li˂121˃计算机/办公室˂/span˂˂/li]122123124136137注册138139140˂/div˂141142143144美元。结束152$.悬停161$.悬停171172˂/scri
主要是几个模块的浮动和定位不好处理，另外还缺少右侧导航，及幻灯片。
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>
