index.html 代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>天天生鲜-首页</title> 6 <link rel="stylesheet" type="text/css" href="css/reset.css"> 7 <link rel="stylesheet" type="text/css" href="css/main.css"> 8 </head> 9 <body> 10 <!-- 页面顶部 --> 11 <div class="head_con"> 12 <div class="header"> 13 <div class="welcome fl">欢迎来到天天生鲜!</div> 14 <div class="user_con fr"> 15 <ul class="login_btns fl"> 16 <li><a href="#">登录</a></li> 17 <li><span>|</span></li> 18 <li><a href="#">注册</a></li> 19 </ul> 20 <div class="user_info fl"> 21 欢迎您:<em>张山</em> 22 </div> 23 <ul class="user_btns fl" > 24 <li><span>|</span></li> 25 <li><a href="#">我的购物车</a></li> 26 <li><span>|</span></li> 27 <li><a href="#">我的订单</a></li> 28 </ul> 29 </div> 30 </div> 31 </div> 32 33 <!-- logo、搜索框、购物车 --> 34 <div class="center_con"> 35 <a href="index.html" class="logo fl"><img src="image/logo.png" alt="天天生鲜网站logo"></a> 36 <div class="search_con fl"> 37 <form> 38 <input type="text" name="" class="input_txt fl" placeholder="搜索"> 39 <!-- placeholder="搜索" 在输入栏里默认显示搜索两个字,这里的fl是为了去掉搜索框和按键之间的空隙,因为两者类似内联系--> 40 <input type="submit" name="" class="input_sub fl" value="搜索"> 41 </form> 42 </div> 43 <div class="chart_con fr"> 44 <a href="#" class="chart_link fl">我的购物车</a> 45 <div class="chart_num fl">5</div> 46 </div> 47 </div> 48 49 <!-- 主菜单 --> 50 <div class="main_menu_con"> 51 <div class="center_con2"> 52 <h2>全部商品分类</h2> 53 <ul> 54 <li><a href="#">首页</a></li> 55 <li><a href="">手机生鲜</a></li> 56 <li><a href="">抽奖</a></li> 57 </ul> 58 </div> 59 </div> 60 61 <!-- 二级菜单、幻灯片、广告 --> 62 <div class="center_con3"> 63 <ul class="sub_menu_con fl"> 64 <li><a href="">新鲜水果</a></li> 65 <li><a href="" class="icon1">新鲜水果</a></li> 66 <li><a href="" class="icon2">新鲜水果</a></li> 67 <li><a href="" class="icon3">新鲜水果</a></li> 68 <li><a href="" class="icon4">新鲜水果</a></li> 69 <li><a href="" class="icon5">新鲜水果</a></li> 70 </ul> 71 <div class="slide_con fl"> 72 <ul class="slide"> 73 <li><a href="#"><img src="image/slide.png" alt="幻灯片" /></a></li> 74 <li><a href="#"><img src="image/slide1.png" alt="幻灯片" /></a></li> 75 <li><a href="#"><img src="image/slide.png" alt="幻灯片" /></a></li> 76 <li><a href="#"><img src="image/slide.png" alt="幻灯片" /></a></li> 77 <li><a href="#"><img src="image/slide.png" alt="幻灯片" /></a></li> 78 <li><a href="#"><img src="image/slide.png" alt="幻灯片" /></a></li> 79 </ul> 80 81 <div class="prev"></div> 82 <div class="next"></div> 83 84 <ul class="points"> 85 <li class="active"></li> 86 <li></li> 87 <li></li> 88 <li></li> 89 <li></li> 90 <li></li> 91 </ul> 92 93 </div> 94 <div class="advs fl"> 95 <a href="#"><img src="image/adv01.jpg" alt="广告图片" /></a> 96 <a href="#"><img src="image/adv02.jpg" alt="广告图片" /></a> 97 </div> 98 </div> 99 100 <!-- 二级菜单、幻灯片、广告 --> 101 <div class="common_model"> 102 <div class="common_title_con"> 103 <h3>新鲜水果</h3> 104 105 <ul> 106 <li><a href="">加州提子</a></li> 107 <li><a href="">加州提子</a></li> 108 <li><a href="">加州提子</a></li> 109 </ul> 110 111 <a href="#" class="more">查看更多></a> 112 </div> 113 114 <div class="goods_banner fl"><a href="#"><img src="image/banner01.jpg" alt="banner"></a></div> 115 116 <ul class="goods_list fl"> 117 <li> 118 <h4>草莓</h4> 119 <a href="#"><img src="image/goods01.jpg" alt="商品图片"></a> 120 <div class="price">¥ 38.00</div> 121 </li> 122 123 <li> 124 <h4>草莓</h4> 125 <a href="#"><img src="image/goods02.jpg" alt="商品图片"></a> 126 <div class="price">¥ 38.00</div> 127 </li> 128 129 <li> 130 <h4>草莓</h4> 131 <a href="#"><img src="image/goods03.jpg" alt="商品图片"></a> 132 <div class="price">¥ 38.00</div> 133 </li> 134 135 <li> 136 <h4>草莓</h4> 137 <a href="#"><img src="image/goods04.jpg" alt="商品图片"></a> 138 <div class="price">¥ 38.00</div> 139 </li> 140 </ul> 141 </div> 142 143 <div class="common_model"> 144 <div class="common_title_con"> 145 <h3>新鲜水果</h3> 146 147 <ul> 148 <li><a href="">加州提子</a></li> 149 <li><a href="">加州提子</a></li> 150 <li><a href="">加州提子</a></li> 151 </ul> 152 153 <a href="#" class="more">查看更多></a> 154 </div> 155 156 <div class="goods_banner fl"><a href="#"><img src="image/banner01.jpg" alt="banner"></a></div> 157 158 <ul class="goods_list fl"> 159 <li> 160 <h4>草莓</h4> 161 <a href="#"><img src="image/goods01.jpg" alt="商品图片"></a> 162 <div class="price">¥ 38.00</div> 163 </li> 164 165 <li> 166 <h4>草莓</h4> 167 <a href="#"><img src="image/goods02.jpg" alt="商品图片"></a> 168 <div class="price">¥ 38.00</div> 169 </li> 170 171 <li> 172 <h4>草莓</h4> 173 <a href="#"><img src="image/goods03.jpg" alt="商品图片"></a> 174 <div class="price">¥ 38.00</div> 175 </li> 176 177 <li> 178 <h4>草莓</h4> 179 <a href="#"><img src="image/goods04.jpg" alt="商品图片"></a> 180 <div class="price">¥ 38.00</div> 181 </li> 182 </ul> 183 </div> 184 185 <div class="footer"> 186 <div class="footer_link"> 187 <a href="#">关于我们</a> 188 <span>|</span> 189 <a href="#">联系我们</a> 190 <span>|</span> 191 <a href="#">招聘人才</a> 192 <span>|</span> 193 <a href="#">友情链接</a> 194 </div> 195 196 <p>CopyRight @ 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p> 197 <p>电话:010-****888 京ICP备*******8号</p> 198 </div> 199 </body> 200 </html>
reset.css 代码
1 /* 将标签默认的间距设为0 */ 2 body,p,h1,h2,h3,h4,h5,h6,ul,dl,dt,form,input{ 3 margin: 0; 4 padding: 0; 5 } 6 7 /* 去掉默认的小圆点 */ 8 ul,ol{ 9 list-style: none; 10 } 11 12 /* 去掉默认的下划线 */ 13 a{ 14 text-decoration: none; 15 } 16 17 /* 设置不倾斜 */ 18 em{ 19 font-style: normal; 20 } 21 22 /* 去掉在IE下图片做链接是生成的边框 */ 23 img{ 24 border: 0px; 25 } 26 27 /* 让h标签继承body的font-size设置 */ 28 h1,h2,h3,h4,h5,h6{ 29 font-size: 100% 30 } 31 32 /* 清除浮动解决margin-top塌陷 */ 33 .clearfix:before,.clearfix:after{ 34 content: ''; 35 clear: table; 36 } 37 38 .clearfix:after{ 39 clear: both; 40 } 41 .clearfix{ 42 zoom: 1; 43 } 44 45 .fl{ 46 float: left; 47 } 48 49 .fr{ 50 float: right; 51 }
main.css
1 /* 页面顶部样式 */ 2 3 body{ 4 font-family: 'Microsoft Yahei'; 5 font-size: 14px; 6 } 7 8 .head_con{ 9 height: 29px; 10 background-color: #f7f7f7; 11 border-bottom: 1px solid #dddddd; 12 } 13 14 .header{ 15 height: 29px; 16 width: 1200px; 17 margin: 0 auto; 18 } 19 20 .welcome{ 21 font-size: 12px; 22 color: #666; 23 line-height: 29px; 24 } 25 26 .user_con{ 27 /*background-color: gold;*/ 28 29 } 30 31 .user_info{ 32 display: none; 33 font-size: 12px; 34 line-height: 29px; 35 color: #666; 36 } 37 38 .user_info{ 39 color: #ff8800; 40 } 41 42 .login_btns li,.user_btns li{ 43 float: left; 44 height: 29px; 45 } 46 47 .login_btns a,.login_btns span,.user_btns a,.user_btns span{ 48 display: block; 49 line-height: 29px; 50 color: #666; 51 font-size: 12px; 52 } 53 54 .login_btns span,.user_btns span{ 55 color: #cecece; 56 padding: 0 10px; 57 } 58 59 .login_btns a:hover,.user_btns a:hover{ 60 color: #f80; 61 } 62 63 64 /* logo、搜索框、购物车样式 */ 65 .center_con{ 66 width: 1200px; 67 height: 115px; 68 margin: 0 auto; 69 /*background-color: gold;*/ 70 } 71 72 .logo{ 73 margin: 29px 0 0 17px; 74 } 75 76 .search_con{ 77 height: 38px; 78 width: 616px; 79 border: 1px solid #36ab40; 80 margin: 34px 0 0 124px; 81 background: url(../image/icons.png) 10px 10px no-repeat; /* 将搜索小图标作为背景图 */ 82 } 83 84 .search_con .input_txt{ 85 margin-left: 36px; 86 width: 480px; 87 height: 38px; 88 border: 0; 89 outline: none; /* 去掉激活搜索框后其自带的边框 */ 90 float: 91 } 92 93 .search_con .input_sub{ 94 width: 100px; 95 height: 38px; 96 background-color: #36ab40; 97 border: 0px; 98 font-size: 14px; 99 color: #fff; 100 cursor: pointer; 101 /* 设置鼠标形状为手*/ 102 } 103 104 .chart_con{ 105 width: 200px; 106 height: 40px; 107 margin-top: 34px; 108 background-color: cyan; 109 } 110 111 .chart_link{ 112 width: 158px; 113 height: 38px; 114 border: 1px solid #ddd; 115 background: url(../image/icos.png) 12px -42px no-repeat #f7f7f7; 116 text-indent: 56px; /* 首行缩进 */ 117 line-height: 38px; 118 font-size: 14px; 119 color: #36ab40; 120 } 121 122 .chart_num{ 123 width: 40px; 124 height: 40px; 125 background-color: #f80; 126 text-align: center; 127 color: #fff; 128 font: bold 18px/40px 'Microsoft Yahei'; /* bold加粗 */ 129 } 130 131 .main_menu_con{ 132 height: 40px; 133 border-bottom: 2px solid #39a93e; 134 135 } 136 137 .center_con2{ 138 width: 1200px; 139 height: 40px; 140 /* background: gold;*/ 141 margin: 0 auto; 142 } 143 144 .center_con2 h2{ 145 float: left; 146 width: 200px; 147 height: 40px; 148 background-color: #39a93e; 149 text-align: center; 150 font:normal 14px/40px 'Microsoft Yahei'; 151 color: #fff; 152 } 153 154 .center_con2 ul{ 155 float: left; 156 overflow: hidden; 157 } 158 159 .center_con2 li{ 160 height: 40px; 161 float: left; 162 } 163 164 .center_con2 li a{ 165 display: block; 166 height: 14px; 167 line-height: 14px; /* 这里设置14px是为了border生成的边框线不会占满整个父元素宽度 */ 168 padding: 0 20px; 169 margin-top: 13px; 170 border-left: 1px solid #666; /* 不用单独的用span标签做一个竖线*/ 171 margin-left: -1px; 172 /* 将border生成的线用margin撑开到前面的一个区域,再将前面区域设置overflow属性。裁切掉多余的最左边的竖线*/ 173 color: #666 174 } 175 176 .center_con2 li a:hover{ 177 color: #f80; 178 179 } 180 181 182 /* 二级菜单、幻灯片、广告 */ 183 184 .center_con3{ 185 width: 1200px; 186 height: 270px; 187 margin: 0 auto; 188 /* background-color: gold;*/ 189 } 190 191 .sub_menu_con{ 192 width: 200px; 193 height: 270px; 194 195 } 196 197 .sub_menu_con li{ 198 width: 198px; 199 height: 44px; 200 border: 1px solid #eee; 201 border-top: 0px; 202 background: url(../image/icons.png) 178px -384px no-repeat; 203 } 204 205 .sub_menu_con li .icon1{ 206 background-position: 33px -140px; 207 } 208 209 .sub_menu_con li .icon2{ 210 background-position: 33px -140px; 211 } 212 213 .sub_menu_con li .icon3{ 214 background-position: 33px -140px; 215 } 216 217 .sub_menu_con li .icon4{ 218 background-position: 33px -140px; 219 } 220 221 .sub_menu_con li .icon5{ 222 background-position: 33px -140px; 223 } 224 225 226 .sub_menu_con li a{ 227 display: block; 228 height: 44px; 229 line-height: 44px; 230 text-indent: 71px; 231 color: #333; 232 } 233 234 .sub_menu_con li a:hover{ 235 color: #f80; 236 } 237 238 .slide_con{ 239 width: 760px; 240 height: 270px; 241 position: relative; 242 overflow: hidden; 243 } 244 245 .slide_con .slide{ 246 width: 4560px; 247 height: 270px; 248 position: absolute; 249 left: 0px; 250 top: 0px; 251 } 252 253 .slide_con .slide li{ 254 float: left; 255 } 256 257 .prev,.next{ 258 position: absolute; 259 width: 15px; 260 height: 24px; 261 background: url(../image/icons.png) left -450px no-repeat; 262 cursor: pointer; 263 } 264 265 .prev{ 266 left: 11px; 267 top: 122px; 268 } 269 270 .next{ 271 background-position: left -500px; 272 left: 732px; 273 top: 122px; 274 } 275 276 .points{ 277 position: absolute; 278 width: 100%; /* 让其继承父级的100%宽度*/ 279 height: 11px; 280 left: 0; 281 bottom: 9px; 282 font-size: 0; /* 清除内联块间的间隙 */ 283 text-align: center; 284 } 285 286 .points li{ 287 display: inline-block; 288 width: 11px; 289 height: 11px; 290 background-color: #9f9f9f; 291 margin: 0 5px; 292 border-radius: 50%; /* 把方角设置成原点 */ 293 cursor: pointer; 294 } 295 .points .active{ 296 background-color: #cecece; 297 } 298 .advs{ 299 width: 240px; 300 height: 270px; 301 } 302 303 .advs img{ 304 display: block; /* 解决图片下3像素空白的bug */ 305 } 306 307 308 /**/ 309 .common_model{ 310 width: 1200px; 311 height: 337px; 312 margin: 20px auto 0; 313 } 314 315 .common_title_con{ 316 height: 35px; 317 border-bottom: 2px solid #42ad46; 318 } 319 320 .common_title_con h3{ 321 float: left; 322 font: bold 16px/35px 'Microsoft Yahei'; 323 color: #42ad46; 324 } 325 326 .common_title_con ul{ 327 float: left; 328 height: 12px; 329 font-size: 12px; 330 border-left: 1px solid #666; 331 margin: 12px 0 0 20px; 332 } 333 334 .common_title_con li{ 335 float: left; 336 line-height: 12px; 337 margin-left: 15px; 338 339 } 340 341 .common_title_con li a{ 342 line-height: 12px; 343 font-size: 12px; 344 color: #666 345 } 346 347 .common_title_con li a:hover{ 348 color: #f80; 349 } 350 351 .common_title_con .more{ 352 float: right; 353 font: normal 12px/35px 'Microsoft Yahei'; 354 color: #666; 355 } 356 357 .common_title_con .more:hover{ 358 color: #f80; 359 } 360 361 .goods_banner{ 362 width: 200px; 363 height: 300px; 364 } 365 366 .goods_list{ 367 width: 1000px; 368 height: 300px; 369 } 370 371 .goods_list li{ 372 width: 249px; 373 height: 299px; 374 border-left: 1px solid #ededed; 375 border-bottom: 1px solid #ededed; 376 float: left; 377 position: relative; 378 overflow: hidden; 379 } 380 381 .goods_list li h4{ 382 font: 14px/50px 'Microsoft Yahei'; 383 text-align: center; 384 color: #666; 385 } 386 387 .goods_list li a{ 388 display: block; 389 width: 180px; 390 height: 180px; 391 margin: 0 auto; 392 } 393 394 .goods_list li .price{ 395 font: bold 20px/50px 'Microsoft Yahei'; 396 color: #c400000; 397 text-align: center; 398 margin-top: 20px; 399 } 400 401 .footer{ 402 border-top: 2px solid #4ab14e; 403 margin: 30px 0 40px; 404 } 405 406 .footer_link{ 407 text-align: center; 408 margin-top: 38px; 409 } 410 411 .footer_link a{ 412 color: #4e4e4e; 413 font-size: 12px; 414 } 415 416 .footer_link span{ 417 color: #4e4e4e; 418 font-size: 12px; 419 padding: 10px; 420 } 421 422 .footer_link a:hover{ 423 color: #f80; 424 } 425 426 .footer p{ 427 text-align: center; 428 margin-top: 14px; 429 font-size: 12px; 430 color: #4e4e4e; 431 }