一、前言：

前端学习经典练手网页，重新整理网页版代码，如果你是初学者，请试着做一下这个网页

素材：文末完整版代码中。。。。。。

二、效果图：

三、主要需求：


  
   
    
     
    
    
     
      1.
      login最外侧盒子设定高29 
      背景颜色#f7f7f7 
      下边框1 
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
      1.1 
      login内容部分设置  
      高20 
      宽1200 
      居中
     
    
   
    
     
    
    
      
      1.11
      左侧欢迎栏设置居中注意浮动 
     
    
   
    
     
    
    
      
      1.12
      右侧我的订单设置宽290 
      高29 
      居中注意浮动 
     
    
   
    
     
    
    
      
      1.12
      登录与未登录设置隐藏  
      注意浮动
     
    
   
    
     
    
    
      
      1.121
      已经登录设置 
      a颜色orange 
     
    
   
    
     
    
    
      
      1.122
      未登录设置 
      span左右间距 
      a 
      鼠标点击变颜色; 
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      2.
      search部分设置宽默认高90 
     
    
   
    
     
    
    
     
      内部内容盒子设置宽1200 
      高90 
      居中背景颜色主要测试用
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      2.1
      左侧logo设置位置上29 
      左17 
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      2.2
      搜索框设置宽616 
      高38 
      边框位置左120 
      上36 
      浮动 
     
    
   
    
     
    
    
      
      搜索框搜索栏设置宽516 
      高38 
      居中背景图  
      缩进40 
     
    
   
    
     
    
    
      
      搜索框搜索按钮设置宽100 
      高39 
      背景颜色字白 
      14 
      行高38居中浮动
     
    
   
    
     
    
    
     
       
     
    
   
    
     
    
    
     
      2.3
      右侧购物车宽200 
      高40 
      右浮动位置上36 
     
    
   
    
     
    
    
      
      设置a 
      宽158 
      高38 
      居中背景图字14颜色缩进56 
     
    
   
    
     
    
    
      
      设置span 
      宽40 
      高40 
      背景颜色字18 
      白居中 
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      3
      .全部商品分类最外侧高40 
      上26 
      边框2 
      #37ab40 
     
    
   
    
     
    
    
     
        
      内容设置宽1200 
      高40 
      居中 
     
    
   
    
     
    
    
     
        
     
    
   
    
     
    
    
     
      3.1
      全部商品分类宽200高40  
      居中字14 
      白背景色浮动 
     
    
   
    
     
    
    
     
         
      设置浮动主要是给首页list找边界 
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      3.2
      首页设置宽215高40 
      左35 
      上下居中 
     
    
   
    
     
    
    
      
      设置li 
      字14 
      横排一行浮动 
     
    
   
    
     
    
    
     
        
      span 
      a 
      标签设置左右20 
      字体颜色 
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      4.
      slide 
      高270 
      内容宽1200高270 
      居中
     
    
   
    
     
    
    
     
        
     
    
   
    
     
    
    
     
      4.1
      左侧水果列表设置宽200高270 
      有问题找浮动 
     
    
   
    
     
    
    
     
        
      水果列表宽198 
      高44 
      边框居中背景图 
     
    
   
    
     
    
    
     
        
      雪碧图位置设置采用 
      nth选择器 
     
    
   
    
     
    
    
     
        
      a 
      字14 
      背景图有问题找浮动 
      yo
     
    
   
    
     
    
    
     
        
     
    
   
    
     
    
    
     
      4.2
      轮播图设置宽760 
      高279 
      有问题找浮动 
     
    
   
    
     
    
    
     
      4.21
      轮播图宽760*4 
      高270 
      有问题找浮动
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      4.22
      左右按钮宽25高25 
      背景图定位
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      4.23
      小圆点设置 
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      4.3
      右侧广告消除行间距设置父元素为0
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      5.
      foods 
      设置外高335 
      上25 
      内宽1200高335 
      居中
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      5.1
      上面文字 
     
    
   
    
     
    
    
      
      a 
      海鲜水产  
      16px   
      margin-right:20px; 
     
    
   
    
     
    
    
      
      li标签高29 
      左10 
      更多设置高20 
     
    
   
    
     
    
    
     
        
     
    
   
    
     
    
    
     
      5.2
      左侧广告宽200 
      高300 
      有问题找浮动 
     
    
   
    
     
    
    
     
        
     
    
   
    
     
    
    
     
      5.3
      右侧列表产品  
      宽1000 
      高300
     
    
   
    
     
    
    
     
        
      列表设置宽249 
      高299 
      边框下右居中 
     
    
   
    
     
    
    
     
        
      基围虾设置字14 
      高50 
      下10 
     
    
   
    
     
    
    
      
      39.9
      元设置字20  
      红加粗高35 
      上17

四、Html代码赏析：

html文件：


  
   
    
     
    
    
     
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    
   
    
     
    
    
     
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
     
    
   
    
     
    
    
     
      <head>
     
    
   
    
     
    
    
     	
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
     
    
   
    
     
    
    
     	
      <title>天天生鲜-首页
      </title>
     
    
   
    
     
    
    
     	
      <link rel="stylesheet" type="text/css" href="css/reset.css">
     
    
   
    
     
    
    
     	
      <link rel="stylesheet" type="text/css" href="css/main.css">
     
    
   
    
     
    
    
     	
      <script type="text/javascript" src="js/jquery-1.12.4.min.js">
      </script>
     
    
   
    
     
    
    
     	
      <script type="text/javascript" src="js/jquery-ui.min.js">
      </script>
     
    
   
    
     
    
    
     	
      <script type="text/javascript" src="js/slide.js">
      </script>
     
    
   
    
     
    
    
     
      </head>
     
    
   
    
     
    
    
     
      <body>
     
    
   
    
     
    
    
     	
      <div class="header_con">
     
    
   
    
     
    
    
     		
      <div class="header">
     
    
   
    
     
    
    
     			
      <div class="welcome fl">欢迎来到天天生鲜!
      </div>
     
    
   
    
     
    
    
     			
      <div class="fr">
     
    
   
    
     
    
    
     				
      <div class="login_info fl">
     
    
   
    
     
    
    
     
      					欢迎您：
      <em>张 山
      </em>
     
    
   
    
     
    
    
     				
      </div>
     
    
   
    
     
    
    
     				
      <div class="login_btn fl">
     
    
   
    
     
    
    
     					
      <a href="../templates/login.html">登录
      </a>
     
    
   
    
     
    
    
     					
      <span>|
      </span>
     
    
   
    
     
    
    
     					
      <a href="../templates/register.html">注册
      </a>
     
    
   
    
     
    
    
     				
      </div>
     
    
   
    
     
    
    
     				
      <div class="user_link fl">
     
    
   
    
     
    
    
     					
      <span>|
      </span>
     
    
   
    
     
    
    
     					
      <a href="user_center_info.html">用户中心
      </a>
     
    
   
    
     
    
    
     					
      <span>|
      </span>
     
    
   
    
     
    
    
     					
      <a href="cart.html">我的购物车
      </a>
     
    
   
    
     
    
    
     					
      <span>|
      </span>
     
    
   
    
     
    
    
     					
      <a href="user_center_order.html">我的订单
      </a>
     
    
   
    
     
    
    
     				
      </div>
     
    
   
    
     
    
    
     			
      </div>
     
    
   
    
     
    
    
     		
      </div>		
     
    
   
    
     
    
    
     	
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     	
      <div class="search_bar clearfix">
     
    
   
    
     
    
    
     		
      <a href="index.html" class="logo fl">
      <img src="images/logo.png">
      </a>
     
    
   
    
     
    
    
     		
      <div class="search_con fl">
     
    
   
    
     
    
    
     			
      <input type="text" class="input_text fl" name="" placeholder="搜索商品">
     
    
   
    
     
    
    
     			
      <input type="button" class="input_btn fr" name="" value="搜索">
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
     		
      <div class="guest_cart fr">
     
    
   
    
     
    
    
     			
      <a href="#" class="cart_name fl">我的购物车
      </a>
     
    
   
    
     
    
    
     			
      <div class="goods_count fl" id="show_count">1
      </div>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
     	
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     	
      <div class="navbar_con">
     
    
   
    
     
    
    
     		
      <div class="navbar">
     
    
   
    
     
    
    
     			
      <h1 class="fl">全部商品分类
      </h1>
     
    
   
    
     
    
    
     			
      <ul class="navlist fl">
     
    
   
    
     
    
    
     				
      <li>
      <a href="">首页
      </a>
      </li>
     
    
   
    
     
    
    
     				
      <li class="interval">|
      </li>
     
    
   
    
     
    
    
     				
      <li>
      <a href="">手机生鲜
      </a>
      </li>
     
    
   
    
     
    
    
     				
      <li class="interval">|
      </li>
     
    
   
    
     
    
    
     				
      <li>
      <a href="">抽奖
      </a>
      </li>
     
    
   
    
     
    
    
     			
      </ul>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
     	
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     	
      <div class="center_con clearfix">
     
    
   
    
     
    
    
     		
      <ul class="subnav fl">
     
    
   
    
     
    
    
     			
      <li>
      <a href="#model01" class="fruit">新鲜水果
      </a>
      </li>
     
    
   
    
     
    
    
     			
      <li>
      <a href="#model02" class="seafood">海鲜水产
      </a>
      </li>
     
    
   
    
     
    
    
     			
      <li>
      <a href="#model03" class="meet">猪牛羊肉
      </a>
      </li>
     
    
   
    
     
    
    
     			
      <li>
      <a href="#model04" class="egg">禽类蛋品
      </a>
      </li>
     
    
   
    
     
    
    
     			
      <li>
      <a href="#model05" class="vegetables">新鲜蔬菜
      </a>
      </li>
     
    
   
    
     
    
    
     			
      <li>
      <a href="#model06" class="ice">速冻食品
      </a>
      </li>
     
    
   
    
     
    
    
     		
      </ul>
     
    
   
    
     
    
    
     		
      <div class="slide fl">
     
    
   
    
     
    
    
     			
      <ul class="slide_pics">
     
    
   
    
     
    
    
     				
      <li>
      <img src="images/slide.jpg" alt="幻灯片">
      </li>
     
    
   
    
     
    
    
     				
      <li>
      <img src="images/slide02.jpg" alt="幻灯片">
      </li>
     
    
   
    
     
    
    
     				
      <li>
      <img src="images/slide03.jpg" alt="幻灯片">
      </li>
     
    
   
    
     
    
    
     				
      <li>
      <img src="images/slide04.jpg" alt="幻灯片">
      </li>
     
    
   
    
     
    
    
     			
      </ul>
     
    
   
    
     
    
    
     			
      <div class="prev">
      </div>
     
    
   
    
     
    
    
     			
      <div class="next">
      </div>
     
    
   
    
     
    
    
     			
      <ul class="points">
      </ul>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
     		
      <div class="adv fl">
     
    
   
    
     
    
    
     			
      <a href="#">
      <img src="images/adv01.jpg">
      </a>
     
    
   
    
     
    
    
     			
      <a href="#">
      <img src="images/adv02.jpg">
      </a>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
     	
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     	
      <div class="list_model">
     
    
   
    
     
    
    
     		
      <div class="list_title clearfix">
     
    
   
    
     
    
    
     			
      <h3 class="fl" id="model01">新鲜水果
      </h3>
     
    
   
    
     
    
    
     			
      <div class="subtitle fl">
     
    
   
    
     
    
    
     				
      <span>|
      </span>
     
    
   
    
     
    
    
     				
      <a href="#">鲜芒
      </a>
     
    
   
    
     
    
    
     				
      <a href="#">加州提子
      </a>
     
    
   
    
     
    
    
     				
      <a href="#">亚马逊牛油果
      </a>
     
    
   
    
     
    
    
     			
      </div>
     
    
   
    
     
    
    
     			
      <a href="#" class="goods_more fr" id="fruit_more">查看更多 >
      </a>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     		
      <div class="goods_con clearfix">
     
    
   
    
     
    
    
     			
      <div class="goods_banner fl">
      <img src="images/banner01.jpg">
      </div>
     
    
   
    
     
    
    
     			
      <ul class="goods_list fl">
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">草莓
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods/goods003.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 30.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods/goods002.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 5.50
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">柠檬
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods/goods001.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 3.90
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">奇异果
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods/goods012.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 25.80
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     			
      </ul>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
     	
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     	
      <div class="list_model">
     
    
   
    
     
    
    
     		
      <div class="list_title clearfix">
     
    
   
    
     
    
    
     			
      <h3 class="fl" id="model02">海鲜水产
      </h3>
     
    
   
    
     
    
    
     			
      <div class="subtitle fl">
     
    
   
    
     
    
    
     				
      <span>|
      </span>
     
    
   
    
     
    
    
     				
      <a href="#">河虾
      </a>
     
    
   
    
     
    
    
     				
      <a href="#">扇贝
      </a>				
     
    
   
    
     
    
    
     			
      </div>
     
    
   
    
     
    
    
     			
      <a href="#" class="goods_more fr">查看更多 >
      </a>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     		
      <div class="goods_con clearfix">
     
    
   
    
     
    
    
     			
      <div class="goods_banner fl">
      <img src="images/banner02.jpg">
      </div>
     
    
   
    
     
    
    
     			
      <ul class="goods_list fl">
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">青岛野生海捕大青虾
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods/goods018.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 48.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">扇贝
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods/goods019.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 46.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">冷冻秋刀鱼
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods/goods020.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 19.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">基围虾
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods/goods021.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 25.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     			
      </ul>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
     	
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     	
      <div class="list_model">
     
    
   
    
     
    
    
     		
      <div class="list_title clearfix">
     
    
   
    
     
    
    
     			
      <h3 class="fl" id="model03">猪牛羊肉
      </h3>
     
    
   
    
     
    
    
     			
      <div class="subtitle fl">
     
    
   
    
     
    
    
     				
      <span>|
      </span>
     
    
   
    
     
    
    
     				
      <a href="#">鲜芒
      </a>
     
    
   
    
     
    
    
     				
      <a href="#">加州提子
      </a>
     
    
   
    
     
    
    
     				
      <a href="#">亚马逊牛油果
      </a>
     
    
   
    
     
    
    
     			
      </div>
     
    
   
    
     
    
    
     			
      <a href="#" class="goods_more fr">查看更多 >
      </a>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     		
      <div class="goods_con clearfix">
     
    
   
    
     
    
    
     			
      <div class="goods_banner fl">
      <img src="images/banner03.jpg">
      </div>
     
    
   
    
     
    
    
     			
      <ul class="goods_list fl">
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     			
      </ul>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
     	
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     	
      <div class="list_model">
     
    
   
    
     
    
    
     		
      <div class="list_title clearfix">
     
    
   
    
     
    
    
     			
      <h3 class="fl" id="model04">禽类蛋品
      </h3>
     
    
   
    
     
    
    
     			
      <div class="subtitle fl">
     
    
   
    
     
    
    
     				
      <span>|
      </span>
     
    
   
    
     
    
    
     				
      <a href="#">鲜芒
      </a>
     
    
   
    
     
    
    
     				
      <a href="#">加州提子
      </a>
     
    
   
    
     
    
    
     				
      <a href="#">亚马逊牛油果
      </a>
     
    
   
    
     
    
    
     			
      </div>
     
    
   
    
     
    
    
     			
      <a href="#" class="goods_more fr">查看更多 >
      </a>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     		
      <div class="goods_con clearfix">
     
    
   
    
     
    
    
     			
      <div class="goods_banner fl">
      <img src="images/banner04.jpg">
      </div>
     
    
   
    
     
    
    
     			
      <ul class="goods_list fl">
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     			
      </ul>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
     	
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     	
      <div class="list_model">
     
    
   
    
     
    
    
     		
      <div class="list_title clearfix">
     
    
   
    
     
    
    
     			
      <h3 class="fl" id="model05">新鲜蔬菜
      </h3>
     
    
   
    
     
    
    
     			
      <div class="subtitle fl">
     
    
   
    
     
    
    
     				
      <span>|
      </span>
     
    
   
    
     
    
    
     				
      <a href="#">鲜芒
      </a>
     
    
   
    
     
    
    
     				
      <a href="#">加州提子
      </a>
     
    
   
    
     
    
    
     				
      <a href="#">亚马逊牛油果
      </a>
     
    
   
    
     
    
    
     			
      </div>
     
    
   
    
     
    
    
     			
      <a href="#" class="goods_more fr">查看更多 >
      </a>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     		
      <div class="goods_con clearfix">
     
    
   
    
     
    
    
     			
      <div class="goods_banner fl">
      <img src="images/banner05.jpg">
      </div>
     
    
   
    
     
    
    
     			
      <ul class="goods_list fl">
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     			
      </ul>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
     	
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     	
      <div class="list_model">
     
    
   
    
     
    
    
     		
      <div class="list_title clearfix">
     
    
   
    
     
    
    
     			
      <h3 class="fl" id="model06">速冻食品
      </h3>
     
    
   
    
     
    
    
     			
      <div class="subtitle fl">
     
    
   
    
     
    
    
     				
      <span>|
      </span>
     
    
   
    
     
    
    
     				
      <a href="#">鲜芒
      </a>
     
    
   
    
     
    
    
     				
      <a href="#">加州提子
      </a>
     
    
   
    
     
    
    
     				
      <a href="#">亚马逊牛油果
      </a>
     
    
   
    
     
    
    
     			
      </div>
     
    
   
    
     
    
    
     			
      <a href="#" class="goods_more fr">查看更多 >
      </a>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     		
      <div class="goods_con clearfix">
     
    
   
    
     
    
    
     			
      <div class="goods_banner fl">
      <img src="images/banner06.jpg">
      </div>
     
    
   
    
     
    
    
     			
      <ul class="goods_list fl">
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     				
      <li>
     
    
   
    
     
    
    
     					
      <h4>
      <a href="#">维多利亚葡萄
      </a>
      </h4>
     
    
   
    
     
    
    
     					
      <a href="#">
      <img src="images/goods.jpg">
      </a>
     
    
   
    
     
    
    
     					
      <div class="prize">¥ 38.00
      </div>
     
    
   
    
     
    
    
     				
      </li>
     
    
   
    
     
    
    
     			
      </ul>
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
     	
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     	
      <div class="footer">
     
    
   
    
     
    
    
     		
      <div class="foot_link">
     
    
   
    
     
    
    
     			
      <a href="#">关于我们
      </a>
     
    
   
    
     
    
    
     			
      <span>|
      </span>
     
    
   
    
     
    
    
     			
      <a href="#">联系我们
      </a>
     
    
   
    
     
    
    
     			
      <span>|
      </span>
     
    
   
    
     
    
    
     			
      <a href="#">招聘人才
      </a>
     
    
   
    
     
    
    
     			
      <span>|
      </span>
     
    
   
    
     
    
    
     			
      <a href="#">友情链接
      </a>		
     
    
   
    
     
    
    
     		
      </div>
     
    
   
    
     
    
    
     		
      <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved
      </p>
     
    
   
    
     
    
    
     		
      <p>电话：010-****888    京ICP备*******8号
      </p>
     
    
   
    
     
    
    
     	
      </div>
     
    
   
    
     
    
    
     	
      <script type="text/javascript" src="js/slideshow.js">
      </script>
     
    
   
    
     
    
    
     	
      <script type="text/javascript">
      
     
    
   
    
     
    
    
     
      		BCSlideshow(
      'focuspic');
     
    
   
    
     
    
    
     		
      var oFruit = 
      document.getElementById(
      'fruit_more');
     
    
   
    
     
    
    
     		
      var oShownum = 
      document.getElementById(
      'show_count');
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     		
      var hasorder = 
      localStorage.getItem(
      'order_finish');
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     		
      if(hasorder)
     
    
   
    
     
    
    
     
      		{
     
    
   
    
     
    
    
     
      			oShownum.innerHTML = 
      '2';
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      		oFruit.onclick = 
      function(){
     
    
   
    
     
    
    
     			
      window.location.href = 
      'list.html';
     
    
   
    
     
    
    
     
      		}
     
    
   
    
     
    
    
     	
      </script>
     
    
   
    
     
    
    
     
      </body>
     
    
   
    
     
    
    
     
      </html>

Css格式文件代码：


  
   
    
     
    
    
     
      body{
      font-family:
      'Microsoft Yahei';
      font-size:
      12px;
      color:
      #666;}
     
    
   
    
     
    
    
     
      html,
      body{
      height:
      100%}
     
    
   
    
     
    
    
     
      /* 顶部样式 */
     
    
   
    
     
    
    
     
      .header_con{
     
    
   
    
     
    
    
     	
      background-color:
      #f7f7f7;
     
    
   
    
     
    
    
     	
      height:
      29px;
     
    
   
    
     
    
    
     	
      border-bottom:
      1px solid 
      #dddddd
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .header{
     
    
   
    
     
    
    
     	
      width:
      1200px;
     
    
   
    
     
    
    
     	
      height:
      29px;
     
    
   
    
     
    
    
     	
      margin:
      0 auto;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .welcome,
      .login_info,
      .login_btn,
      .user_link{
     
    
   
    
     
    
    
     	
      line-height:
      29px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .login_info{
     
    
   
    
     
    
    
     	
      display:none;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .login_info 
      em{
      color:
      #ff8800}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .login_btn 
      a,
      .user_link 
      a{
     
    
   
    
     
    
    
     	
      color:
      #666;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .login_btn 
      a
      :hover,
      .user_link 
      a
      :hover{
     
    
   
    
     
    
    
     	
      color:
      #ff8800;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .login_btn 
      span,
      .user_link 
      span{
     
    
   
    
     
    
    
     	
      color:
      #cecece;
     
    
   
    
     
    
    
     	
      margin:
      0 
      10px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /* logo、搜索框、购物车样式 */
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .search_bar{
      width:
      1200px;
      height:
      115px;
      margin:
      0 auto;}
     
    
   
    
     
    
    
     
      .logo{
      width:
      150px;
      height:
      59px;
      margin:
      29px 
      0 
      0 
      17px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .search_con{
      width:
      616px;
      height:
      38px;
      border:
      1px solid 
      #37ab40;
      margin:
      34px 
      0 
      0 
      124px;
      background:
      url(../images/icons.png) 
      10px -
      338px no-repeat;}
     
    
   
    
     
    
    
     
      .search_con 
      .input_text{
      width:
      470px;
      height:
      34px;
      border:
      0px;
      margin:
      2px 
      0 
      0 
      36px;
      outline:none;
      font-size:
      12px;
      color:
      #737272;
      font-family:
      'Microsoft Yahei'}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .search_con 
      .input_btn{
     
    
   
    
     
    
    
     	
      width:
      100px;
      height:
      38px;
      background-color:
      #37ab40;
      border:
      0px;
      font-size:
      14px;
      color:
      #fff;
      font-family:
      'Microsoft Yahei';
      outline:none;
      cursor:pointer;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .guest_cart{
     
    
   
    
     
    
    
     	
      width:
      200px;
      height:
      40px;
      margin-top:
      34px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .guest_cart 
      .cart_name{
     
    
   
    
     
    
    
     	
      width:
      158px;
      height:
      38px;
      line-height:
      38px;
      border:
      1px solid 
      #dddddd;
      display:block;
      background:
      url(../images/icons.png) 
      13px -
      300px no-repeat;
      font-size:
      14px;
      color:
      #37ab40;
      text-indent:
      56px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .guest_cart 
      .goods_count{
     
    
   
    
     
    
    
     	
      width:
      40px;
      height:
      40px;
      text-align:center;
      line-height:
      40px;
      font-size:
      18px;
     
    
   
    
     
    
    
     	
      font-weight:bold;
      color:
      #fff;
      background-color:
      #ff8800;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /* 菜单、幻灯片样式 */
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .navbar_con{
      height:
      40px;
      border-bottom:
      2px solid 
      #39a93e}
     
    
   
    
     
    
    
     
      .navbar{
      width:
      1200px;
      margin:
      0 auto;}
     
    
   
    
     
    
    
     
      .navbar 
      h1{
      width:
      200px;
      height:
      40px;
      line-height:
      40px;
      text-align: center;
      font-size:
      14px;
      color:
      #fff;
      background-color:
      #39a93e;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .navbar 
      .subnav_con{
      width:
      200px;
      height:
      40px;
      background-color:
      #39a93e;
      position:relative;
      cursor:pointer;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .navbar 
      .subnav_con 
      h1{
      position:absolute;
      left:
      0;
      top:
      0;
      text-align:left;
      text-indent:
      40px}
     
    
   
    
     
    
    
     
      .navbar 
      .subnav_con 
      span{
      display:block;
      width:
      16px;
      height:
      9px;
      background:
      url(../images/down.png) no-repeat;
      position:absolute;
      right:
      27px;
      top:
      16px;
      transition:all 
      300ms ease-in;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .navbar 
      .subnav_con
      :hover 
      span{
      transform:
      rotateZ(
      180deg)}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .navbar 
      .subnav_con 
      .subnav{
      position:absolute;
      left:
      0;
      top:
      40px;
      display:none;
      border-top:
      2px solid  
      #39a93e;}
     
    
   
    
     
    
    
     
      .navbar 
      .subnav_con
      :hover 
      .subnav{
      display:block;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .navlist{
      margin-left:
      34px;}
     
    
   
    
     
    
    
     
      .navlist 
      li{
      height:
      40px;
      float:left;
      line-height:
      40px;}
     
    
   
    
     
    
    
     
      .navlist 
      li 
      a{
      color:
      #666;
      font-size:
      14px}
     
    
   
    
     
    
    
     
      .navlist 
      li 
      a
      :hover{
      color:
      #ff8800}
     
    
   
    
     
    
    
     
      .navlist 
      .interval{
      margin:
      0 
      15px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .center_con{
      width:
      1200px;
      height:
      270px;
      margin:
      0 auto;}
     
    
   
    
     
    
    
     
      .subnav{
      width:
      198px;
      height:
      270px;
      border-left:
      1px solid 
      #eee;
      border-right:
      1px solid 
      #eee;}
     
    
   
    
     
    
    
     
      .subnav 
      li{
      height:
      44px;
      border-bottom:
      1px solid 
      #eee;
      background:
      url(../images/icons.png) 
      178px -
      257px no-repeat 
      #fff;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .subnav 
      li 
      a{
      display:block;
      height:
      44px;
      line-height:
      44px;
      text-indent:
      71px;
      font-size:
      14px;
      color:
      #333}
     
    
   
    
     
    
    
     
      .subnav 
      li 
      a
      :hover{
      color:
      #ff8800}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .subnav 
      li 
      .fruit{
      background:
      url(../images/icons.png) 
      28px 
      0px no-repeat;}
     
    
   
    
     
    
    
     
      .subnav 
      li 
      .seafood{
      background:
      url(../images/icons.png) 
      28px -
      43px no-repeat;}
     
    
   
    
     
    
    
     
      .subnav 
      li 
      .meet{
      background:
      url(../images/icons.png) 
      28px -
      86px no-repeat;}
     
    
   
    
     
    
    
     
      .subnav 
      li 
      .egg{
      background:
      url(../images/icons.png) 
      28px -
      132px no-repeat;}
     
    
   
    
     
    
    
     
      .subnav 
      li 
      .vegetables{
      background:
      url(../images/icons.png) 
      28px -
      174px no-repeat;}
     
    
   
    
     
    
    
     
      .subnav 
      li 
      .ice{
      background:
      url(../images/icons.png) 
      28px -
      220px no-repeat;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .slide{
      width:
      760px;
      height:
      270px;
      position:relative;
      overflow:hidden;}
     
    
   
    
     
    
    
     
      .slide 
      .slide_pics{
      position:relative;
      left:
      0;
      top:
      0;
      width:
      760px;
      height:
      270px;}
     
    
   
    
     
    
    
     
      .slide 
      .slide_pics 
      li{
      width:
      760px;
      height:
      270px;
      position:absolute;
      left:
      0;
      top:
      0}
     
    
   
    
     
    
    
     
      .slide 
      .prev,
      .slide 
      .next{
      width:
      17px;
      height:
      23px;
      background:
      url(../images/icons.png) left -
      388px no-repeat;
      position:absolute;
      left:
      11px;
      top:
      122px;
      cursor:pointer;}
     
    
   
    
     
    
    
     
      .slide 
      .next{
      background-position:left -
      428px;
      left:
      732px;}
     
    
   
    
     
    
    
     
      .points{
      width:
      100%;
      height:
      11px;
      position:absolute;
      left:
      0;
      top:
      250px;
      text-align:center;}
     
    
   
    
     
    
    
     
      .points 
      li{
      display:inline-block;
      width:
      11px;
      height:
      11px;
      margin:
      0 
      5px;
      background-color:
      #9f9f9f;
      border-radius:
      50%;
      cursor:pointer;}
     
    
   
    
     
    
    
     
      .points 
      li
      .active{
      background-color:
      #cecece}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .adv{
      width:
      240px;
      height:
      270px; 
      overflow:hidden; 
      background-color:gold;}
     
    
   
    
     
    
    
     
      .adv 
      a{
      display:block;
      float:left;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /* 商品列表样式 */
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .list_model{
      width:
      1200px;
      height:
      340px;
      margin:
      15px auto 
      0;}
     
    
   
    
     
    
    
     
      .list_title{
      height:
      40px;
      border-bottom:
      2px solid 
      #42ad46}
     
    
   
    
     
    
    
     
      .list_title 
      h3{
      height:
      40px;
      line-height:
      40px;
      font-size:
      16px;
      color:
      #37ab40;
      font-weight:bold;}
     
    
   
    
     
    
    
     
      .list_title 
      .subtitle{
      height:
      20px;
      line-height:
      20px;
      margin-top:
      15px;}
     
    
   
    
     
    
    
     
      .list_title 
      .subtitle 
      span{
      color:
      #666;
      margin:
      0 
      10px 
      0 
      20px;}
     
    
   
    
     
    
    
     
      .list_title 
      .subtitle 
      a{
      color:
      #666;
      margin:
      0 
      5px;}
     
    
   
    
     
    
    
     
      .list_title 
      .subtitle 
      a
      :hover,
      .goods_more
      :hover{
      color:
      #ff8800}
     
    
   
    
     
    
    
     
      .goods_more{
      height:
      20px;
      margin-top:
      15px;
      color:
      #666}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .goods_con{
      height:
      300px;}
     
    
   
    
     
    
    
     
      .goods_banner{
      width:
      200px;
      height:
      300px;}
     
    
   
    
     
    
    
     
      .goods_banner 
      img{
      width:
      200px;
      height:
      300px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .goods_list{
      width:
      1000px;
      height:
      299px;
      border-bottom:
      1px solid 
      #ededed}
     
    
   
    
     
    
    
     
      .goods_list 
      li{
      height:
      299px;
      width:
      249px;
      border-right:
      1px solid 
      #ededed;
      float:left}
     
    
   
    
     
    
    
     
      .goods_list 
      li
      :hover{
      width:
      248px;
      height:
      297px;
      border:
      1px solid gold;}
     
    
   
    
     
    
    
     
      .goods_list 
      li
      :hover 
      img{
      opacity:
      0.8}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .goods_list 
      li 
      h4{
      width:
      200px;
      height:
      50px;
      margin:
      20px auto 
      0;
      text-align:center;}
     
    
   
    
     
    
    
     
      .goods_list 
      li 
      h4 
      a{
      font-size:
      14px;
      color:
      #666;
      font-weight:normal;
      line-height:
      24px;}
     
    
   
    
     
    
    
     
      .goods_list 
      li 
      h4 
      a
      :hover{
      color:
      #ff8800}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .goods_list 
      li 
      img{
      display:block;
      width:
      180px;
      height:
      180px;
      margin:
      0 auto;}
     
    
   
    
     
    
    
     
      .goods_list 
      li 
      .prize{
      text-align:center;
      font-size:
      20px;
      color:
      #c40000;
      margin-top:
      5px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /* 页面底部样式 */
     
    
   
    
     
    
    
     
      .footer{
     
    
   
    
     
    
    
     	
      border-top:
      2px solid 
      #42ad46;
     
    
   
    
     
    
    
     	
      margin:
      30px 
      0;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .foot_link{
      text-align:center;
      margin-top:
      30px;}
     
    
   
    
     
    
    
     
      .foot_link 
      a,
      .foot_link 
      span{
      color:
      #4e4e4e;}
     
    
   
    
     
    
    
     
      .foot_link 
      a
      :hover{
      color:
      #ff8800}
     
    
   
    
     
    
    
     
      .foot_link 
      span{
      padding:
      0 
      10px}
     
    
   
    
     
    
    
     
      .footer 
      p{
      text-align:center; 
      margin-top:
      10px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /* 二级页面面包屑导航 */
     
    
   
    
     
    
    
     
      .breadcrumb{
     
    
   
    
     
    
    
     	
      width:
      1200px;
      height:
      40px;
      margin:
      0 auto;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      .breadcrumb 
      a{
      line-height:
      40px;
      color:
      #37ab40}
     
    
   
    
     
    
    
     
      .breadcrumb 
      a
      :hover{
      color:
      #ff8800}
     
    
   
    
     
    
    
     
      .breadcrumb 
      span{
      line-height:
      40px;
      color:
      #666;
      padding:
      0 
      5px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .main_wrap{
      width:
      1200px;
      margin:
      0 auto;}
     
    
   
    
     
    
    
     
      .l_wrap{
      width:
      200px;}
     
    
   
    
     
    
    
     
      .r_wrap{
      width:
      980px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /* 新品推荐样式 */
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .new_goods{
     
    
   
    
     
    
    
     	
      border:
      1px solid 
      #ededed;
     
    
   
    
     
    
    
     	
      border-top:
      2px solid 
      #37ab40;
     
    
   
    
     
    
    
     	
      padding-bottom:
      10px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .new_goods 
      h3{
     
    
   
    
     
    
    
     	
      height:
      33px;
      line-height:
      33px;
      background-color:
      #fcfcfc;
      border-bottom:
      1px solid 
      #ededed;
      font-size:
      14px;
      font-weight:normal;
      text-indent:
      10px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .new_goods 
      ul{
      width:
      160px;
      margin:
      0 auto;
      overflow:hidden;}
     
    
   
    
     
    
    
     
      .new_goods 
      li{
      border-bottom:
      1px solid 
      #ededed;
      margin-bottom:-
      1px;}
     
    
   
    
     
    
    
     
      .new_goods 
      li 
      img{
      display:block;
      width:
      150px;
      height:
      150px;
      margin:
      10px auto;}
     
    
   
    
     
    
    
     
      .new_goods 
      li 
      h4{
      width:
      160px;
      margin:
      0 auto;}
     
    
   
    
     
    
    
     
      .new_goods 
      li 
      h4 
      a{
      font-weight:normal;
      color:
      #666;
      display:block;
      width:
      160px;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;}
     
    
   
    
     
    
    
     
      .new_goods 
      li 
      .prize{
      font-size:
      14px;
      color:
      #da260e;
      margin:
      10px auto;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /* 商品列表样式 */
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .sort_bar{
      height:
      30px;
      background-color:
      #f0fdec}
     
    
   
    
     
    
    
     
      .sort_bar 
      a{
      display:block;
      height:
      30px;
      line-height:
      30px;
      padding:
      0 
      20px;
      float:left;
      color:
      #000}
     
    
   
    
     
    
    
     
      .sort_bar 
      .active{
      background-color:
      #37ab40;
      color:
      #fff;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .goods_type_list{
     
    
   
    
     
    
    
     	
      margin:
      10px auto 
      0;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .goods_type_list 
      li{
     
    
   
    
     
    
    
     	
      width:
      196px;
     
    
   
    
     
    
    
     	
      float:left;
     
    
   
    
     
    
    
     	
      margin-bottom:
      10px
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .goods_type_list 
      li 
      img{
      width:
      160px;
      height:
      160px;
      display:block;
      margin:
      10px auto;}
     
    
   
    
     
    
    
     
      .goods_type_list 
      li 
      h4{
      width:
      160px;
      margin:
      0 auto;}
     
    
   
    
     
    
    
     
      .goods_type_list 
      li 
      h4 
      a{
      font-weight:normal;
      color:
      #666;
      display:block;
      width:
      160px;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;}
     
    
   
    
     
    
    
     
      .operate{
      width:
      160px;
      margin:
      10px auto;
      position:relative;}
     
    
   
    
     
    
    
     
      .goods_type_list 
      .operate 
      .prize{
      color:
      #da260e; 
      font-size:
      14px;} 
     
    
   
    
     
    
    
     
      .goods_type_list 
      .operate 
      .unit{
      color:
      #999;
      padding-left:
      5px;}
     
    
   
    
     
    
    
     
      .goods_type_list 
      .operate 
      .add_goods{
      display:inline-block;
      width:
      15px;
      height:
      15px;
      background:
      url(../images/shop_cart.png);
      position:absolute;
      right:
      0;
      top:
      3px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /* 分页样式 */
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .pagenation{
      height:
      32px;
      text-align:center;
      font-size:
      0;
      margin:
      30px auto;}
     
    
   
    
     
    
    
     
      .pagenation 
      a{
      display:inline-block;
      border:
      1px solid 
      #d2d2d2;
      background-color:
      #f8f6f7;
      font-size:
      12px;
      padding:
      7px 
      10px;
      color:
      #666;
      margin:
      5px}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .pagenation 
      .active{
      background-color:
      #fff;
      color:
      #43a200}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /* 商品详情样式 */
     
    
   
    
     
    
    
     
      .goods_detail_con{
     
    
   
    
     
    
    
     	
      width:
      1198px;
     
    
   
    
     
    
    
     	
      height:
      398px;
     
    
   
    
     
    
    
     	
      border:
      1px solid 
      #ededed;
     
    
   
    
     
    
    
     	
      margin:
      0 auto 
      20px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .goods_detail_pic{
      width:
      350px;
      height:
      350px;
      margin:
      24px 
      0 
      0 
      24px;}
     
    
   
    
     
    
    
     
      .goods_detail_list{
     
    
   
    
     
    
    
     	
      width:
      730px;
      height:
      350px;
      margin:
      24px 
      24px 
      0 
      0;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      .goods_detail_list 
      h3{
      font-size:
      24px;
      line-height:
      24px;
      color:
      #666;
      font-weight:normal;}
     
    
   
    
     
    
    
     
      .goods_detail_list 
      p{
      color:
      #666;
      line-height:
      40px;}
     
    
   
    
     
    
    
     
      .prize_bar{
      height:
      72px;
      background-color:
      #fff5f5;
      line-height:
      72px;}
     
    
   
    
     
    
    
     
      .prize_bar 
      .show_pirze{
      font-size:
      20px;
      color:
      #ff3e3e;
      padding-left:
      20px}
     
    
   
    
     
    
    
     
      .prize_bar 
      .show_pirze 
      em{
      font-style:normal;
      font-size:
      36px;
      padding-left:
      10px}
     
    
   
    
     
    
    
     
      .prize_bar 
      .show_unit{
      padding-left:
      150px}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .goods_num{
      height:
      52px;
      margin-top:
      19px;}
     
    
   
    
     
    
    
     
      .goods_num 
      .num_name{
      width:
      70px;
      height:
      52px;
      line-height:
      52px;}
     
    
   
    
     
    
    
     
      .goods_num 
      .num_add{
      width:
      75px;
      height:
      50px;
      border:
      1px solid 
      #dddddd}
     
    
   
    
     
    
    
     
      .goods_num 
      .num_add 
      input{
      width:
      49px;
      height:
      50px;
      text-align:center;
      line-height:
      50px;
      border:
      0px;
      outline:none;
      font-size:
      14px;
      color:
      #666}
     
    
   
    
     
    
    
     
      .goods_num 
      .num_add 
      .add,
      .goods_num 
      .num_add 
      .minus{
      width:
      25px;
      line-height:
      25px;
      text-align:center;
      border-left:
      1px solid 
      #ddd;
      border-bottom:
      1px solid 
      #ddd;
      color:
      #666;
      font-size:
      14px}
     
    
   
    
     
    
    
     
      .goods_num 
      .num_add 
      .minus{
      border-bottom:
      0px}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .total{
      height:
      35px;
      line-height:
      35px;
      margin-top:
      25px;}
     
    
   
    
     
    
    
     
      .total 
      em{
      font-style:normal;
      color:
      #ff3e3e;
      font-size:
      18px}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .operate_btn{
      height:
      40px;
      margin-top:
      35px;
      font-size:
      0;
      position:relative;}
     
    
   
    
     
    
    
     
      .operate_btn 
      .buy_btn,
      .operate_btn 
      .add_cart{
      display:inline-block;
      width:
      178px;
      height:
      38px;
      border:
      1px solid 
      #c40000;
      font-size:
      14px;
      color:
      #c40000;
      line-height:
      38px;
      text-align:center;
      background-color:
      #ffeded;}
     
    
   
    
     
    
    
     
      .operate_btn 
      .add_cart{
      background-color:
      #c40000;
      color:
      #fff;
      margin-left:
      10px;
      position:relative;
      z-index:
      10;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .add_jump{
      width:
      20px;
      height:
      20px;
      background-color:
      #c40000;
      position:absolute;
      left:
      268px;
      top:
      10px;
      border-radius:
      50%;
      z-index:
      9;
      display:none;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .detail_tab{
     
    
   
    
     
    
    
     	
      height:
      35px;
     
    
   
    
     
    
    
     	
      border-bottom:
      1px solid 
      #37ab40
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .detail_tab 
      li{
      height:
      34px;
      line-height:
      34px;
      padding:
      0 
      30px;
      font-size:
      14px;
      color:
      #333333;
      float:left;
      border:
      1px solid 
      #e8e8e8;
      border-bottom:
      0px;
      cursor:pointer;
      background-color:
      #faf8f8}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .detail_tab 
      li
      .active{
      border-top:
      2px solid 
      #37ab40;
      position:relative;
      background-color:
      #fff;
      border-left:
      1px solid 
      #37ab40;
      border-right:
      1px solid 
      #37ab40;
      top:-
      1px;
      height:
      35px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .tab_content 
      dt{
      margin-top:
      10px;
      font-size:
      16px;
      color:
      #044d39}
     
    
   
    
     
    
    
     
      .tab_content 
      dd{
      line-height:
      24px;
      margin-top:
      5px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /* 登录页 */
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .login_top{
      width:
      960px;
      height:
      130px;
      margin:
      0 auto;}
     
    
   
    
     
    
    
     
      .login_logo{
      display:block;
      width:
      193px;
      height:
      76px;
      margin-top:
      30px;}
     
    
   
    
     
    
    
     
      .login_form_bg{
      height:
      480px;
      background-color:
      #518e17}
     
    
   
    
     
    
    
     
      .no-mp{
      margin-top:
      0px;}
     
    
   
    
     
    
    
     
      .login_form_wrap{
      width:
      960px;
      height:
      480px;
      margin:
      0 auto;}
     
    
   
    
     
    
    
     
      .login_banner{
      width:
      381px;
      height:
      322px;
      background:
      url(../images/login_banner.png) no-repeat;
      margin-top:
      90px;}
     
    
   
    
     
    
    
     
      .slogan{
      width:
      40px;
      height:
      300px;
      font-size:
      30px;
      color:
      #f0f9e8;
      text-align:center;
      line-height:
      36px;
      margin:
      80px 
      0 
      0 
      120px}
     
    
   
    
     
    
    
     
      .login_form{
      width:
      368px;
      height:
      378px;
      border:
      1px solid 
      #c6c6c5;
      background-color:
      #fff; 
      margin-top:
      50px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .login_title{
      height:
      60px;
      width:
      308px;
      margin:
      10px auto;
      border-bottom:
      1px solid 
      #e0e0e0;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .login_title 
      h1{
      font-size:
      24px;
      height:
      60px;
      line-height:
      60px;
      color:
      #a8a8a8;
      float:left;
      font-weight:bold;
      margin-left:
      44px;}
     
    
   
    
     
    
    
     
      .login_title 
      a{
      width:
      100px;
      height:
      20px;
      display:block;
      font-size:
      16px;
      color:
      #5fb42a;
      text-indent:
      26px;
      background:
      url(../images/icons02.png) left 
      5px no-repeat;
      float:left;
      margin:
      20px 
      0 
      0 
      36px}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .form_input{
      width:
      308px;
      height:
      250px;
      margin:
      20px auto;
      position:relative;}
     
    
   
    
     
    
    
     
      .name_input,
      .pass_input{
      width:
      306px;
      height:
      36px;
      border:
      1px solid 
      #e0e0e0;
      background:
      url(../images/icons02.png) 
      280px -
      41px no-repeat 
      #f8f8f8;
      outline:none;
      font-size:
      14px;
      text-indent:
      10px;
      position: absolute;
      left:
      0;
      top:
      0}
     
    
   
    
     
    
    
     
      .pass_input{
      top:
      65px;
      background-position:
      280px -
      95px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .user_error,
      .pwd_error{
      color:
      #f00;
      position:absolute;
      left:
      0;
      top:
      43px;
      /*display:none*/}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .pwd_error{
      top:
      110px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .more_input{
      position:absolute;
      left:
      0;
      top:
      130px;
      width:
      100%}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .more_input 
      input{
      float:left;
      margin-top:
      2px;}
     
    
   
    
     
    
    
     
      .more_input 
      label{
      float:left;
      margin-left:
      10px;}
     
    
   
    
     
    
    
     
      .more_input 
      a{
      float:right;
      color:
      #666}
     
    
   
    
     
    
    
     
      .more_input 
      a
      :hover{
      color:
      #ff8800}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .input_submit{
      width:
      100%;
      height:
      40px;
      position:absolute;
      left:
      0;
      top:
      180px;
      background-color:
      #47aa34;
      color:
      #fff;
      font-size:
      22px;
      border:
      0px;
      font-family:
      'Microsoft Yahei';
      cursor:pointer;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /* 注册页面 */
     
    
   
    
     
    
    
     
      .register_con{
     
    
   
    
     
    
    
     	
      width:
      700px;
     
    
   
    
     
    
    
     	
      height:
      560px;
     
    
   
    
     
    
    
     	
      margin:
      50px auto 
      0;
     
    
   
    
     
    
    
     	
      background:
      url(../images/interval_line.png) 
      300px top no-repeat;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .l_con{
      width:
      300px;}
     
    
   
    
     
    
    
     
      .reg_logo{
      width:
      200px;
      height:
      76px;
      float:right;
      margin-right:
      30px;}
     
    
   
    
     
    
    
     
      .reg_slogan{
      width:
      300px;
      height:
      30px;
      float:right;
      text-align:right;
      font-size:
      24px;
      color:
      #69a81e;
      margin:
      20px 
      30px 
      0 
      0;}
     
    
   
    
     
    
    
     
      .reg_banner{
      width:
      251px;
      height:
      329px;
      background:
      url(../images/register_banner.png) no-repeat;
      float:right; 
      margin:
      20px 
      10px 
      0 
      0;
      opacity:
      0.5}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .r_con{
      width:
      400px;}
     
    
   
    
     
    
    
     
      .reg_title{
      width:
      360px;
      height:
      50px;
      float:left;
      margin-left:
      30px;
      border-bottom:
      1px solid 
      #e0e0e0}
     
    
   
    
     
    
    
     
      .reg_title 
      h1{
      height:
      50px;
      line-height:
      50px;
      float:left;
      font-size:
      24px;
      color:
      #a8a8a8;
      font-weight:bold;}
     
    
   
    
     
    
    
     
      .reg_title 
      a{
      float:right;
      height:
      20px;
      line-height:
      20px;
      font-size:
      16px;
      color:
      #5fb42a;
      padding-right:
      20px;
      background:
      url(../images/icons02.png) 
      35px 
      3px no-repeat;
      margin-top:
      15px}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .reg_form{
      width:
      360px;
      margin:
      30px 
      0 
      0 
      30px;
      float:left;
      position:relative;}
     
    
   
    
     
    
    
     
      .reg_form 
      li{
      height:
      70px;}
     
    
   
    
     
    
    
     
      .reg_form 
      li 
      label{
      width:
      70px;
      height:
      40px;
      line-height:
      40px;
      float:left;
      font-size:
      14px;
      color:
      #a8a8a8}
     
    
   
    
     
    
    
     
      .reg_form 
      li 
      input{
      width:
      288px;
      height:
      38px;
      border:
      1px solid 
      #e0e0e0;
      float:left;
      outline:none;
      text-indent:
      10px;
      background-color:
      #f8f8f8}
     
    
   
    
     
    
    
     
      .reg_form 
      li
      .agreement 
      input{
      width:
      15px;
      height:
      15px;
      float:left;
      margin-top:
      13px}
     
    
   
    
     
    
    
     
      .reg_form 
      li
      .agreement 
      label{
      width:
      300px;
      float:left;
      margin-left:
      10px;}
     
    
   
    
     
    
    
     
      .reg_form 
      li
      .reg_sub 
      input{
      width:
      360px;
      height:
      40px;
      background-color:
      #47aa34;
      font-size:
      18px;
      color:
      #fff;
      font-family:
      'Microsoft Yahei';
      cursor:pointer;}
     
    
   
    
     
    
    
     
      .reg_form 
      li 
      .error_tip{
      float:left;
      height:
      30px;
      line-height:
      30px;
      margin-left:
      70px;
      color:
      #e62e2e;
      display:none;}
     
    
   
    
     
    
    
     
      .reg_form 
      li 
      .error_tip2{
      float:left;
      height:
      20px;
      line-height:
      20px;
      color:
      #e62e2e;
      display:none;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .sub_page_name{
      font-size:
      18px;
      color:
      #666;
      margin:
      50px 
      0 
      0 
      20px}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .total_count{
     
    
   
    
     
    
    
     	
      width:
      1200px;
      margin:
      0 auto;
      height:
      40px;
      line-height:
      40px;
      font-size:
      14px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      .total_count 
      em{
     
    
   
    
     
    
    
     	
      font-size:
      16px;
      color:
      #ff4200;
      margin:
      0 
      5px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .cart_list_th{
      width:
      1198px;
      border:
      1px solid 
      #ddd;
      background-color:
      #f7f7f7;
      margin:
      0 auto;}
     
    
   
    
     
    
    
     
      .cart_list_th 
      li{
      height:
      40px;
      line-height:
      40px;
      float:left;
      text-align:center;}
     
    
   
    
     
    
    
     
      .cart_list_th 
      .col01{
      width:
      26%;}
     
    
   
    
     
    
    
     
      .cart_list_th 
      .col02{
      width:
      16%;}
     
    
   
    
     
    
    
     
      .cart_list_th 
      .col03{
      width:
      13%;}
     
    
   
    
     
    
    
     
      .cart_list_th 
      .col04{
      width:
      12%;}
     
    
   
    
     
    
    
     
      .cart_list_th 
      .col05{
      width:
      15%;}
     
    
   
    
     
    
    
     
      .cart_list_th 
      .col06{
      width:
      18%;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .cart_list_td{
      width:
      1198px;
      border:
      1px solid 
      #ddd;
      background-color:
      #edfff9;
      margin:
      0 auto;
      margin-top:-
      1px;}
     
    
   
    
     
    
    
     
      .cart_list_td 
      li{
      height:
      120px;
      line-height:
      120px;
      float:left;
      text-align:center;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col01{
      width:
      4%;}
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col02{
      width:
      12%;}
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col03{
      width:
      10%;}
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col04{
      width:
      16%;}
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col05{
      width:
      13%;}
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col06{
      width:
      12%;}
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col07{
      width:
      15%;}
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col08{
      width:
      18%;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col02 
      img{
      width:
      100px;
      height:
      100px;
      border:
      1px solid 
      #ddd;
      display:block;
      margin:
      10px auto 
      0;}
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col03{
      height:
      48px;
      text-align:left;
      line-height:
      24px;
      margin-top:
      38px;}
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col03 
      em{
      color:
      #999}
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col08 
      a{
      color:
      #666}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col06 
      .num_add{
      width:
      98px;
      height:
      28px;
      border:
      1px solid 
      #ddd;
      margin:
      40px auto 
      0;}
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col06 
      .num_add 
      a{
      width:
      29px;
      height:
      28px;
      line-height:
      28px;
      background-color:
      #f3f3f3;
      font-size:
      14px;
      color:
      #666}
     
    
   
    
     
    
    
     
      .cart_list_td 
      .col06 
      .num_add 
      input{
      width:
      38px;
      height:
      28px;
      text-align:center;
      line-height:
      30px;
      border:
      0px;
      display:block;
      float:left;
      outline:none;
      border-left:
      1px solid 
      #ddd;
      border-right:
      1px solid 
      #ddd;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .settlements{
      width:
      1198px;
      height:
      78px;
      border:
      1px solid 
      #ddd;
      background-color:
      #fff4e8;
      margin:-
      1px auto 
      0;}
     
    
   
    
     
    
    
     
      .settlements 
      li{
      line-height:
      78px;
      float:left;}
     
    
   
    
     
    
    
     
      .settlements 
      .col01{
      width:
      4%;
      text-align:center}
     
    
   
    
     
    
    
     
      .settlements 
      .col02{
      width:
      12%;}
     
    
   
    
     
    
    
     
      .settlements 
      .col03{
      width:
      69%; 
      height:
      48px; 
      line-height:
      28px;
      text-align:right;
      margin-top:
      10px;}
     
    
   
    
     
    
    
     
      .settlements 
      .col03 
      span{
      color:
      #ff0000;
      padding-right:
      5px}
     
    
   
    
     
    
    
     
      .settlements 
      .col03 
      em{
      color:
      #ff3d3d;
      font-size:
      22px;
      font-weight:bold;}
     
    
   
    
     
    
    
     
      .settlements 
      .col03 
      span{
      color:
      #ff0000;}
     
    
   
    
     
    
    
     
      .settlements 
      .col03 
      b{
      color:
      #ff0000;
      font-size:
      14px;
      padding:
      0 
      5px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .settlements 
      .col04{
      width:
      14%;
      text-align:center;
      float:right;}
     
    
   
    
     
    
    
     
      .settlements 
      .col04 
      a{
      display:block;
      height:
      78px;
      background-color:
      #ff3d3d;
      text-align:center;
      line-height:
      78px;
      color:
      #fff;
      font-size:
      24px}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .common_title{
      width:
      1200px;
      margin:
      20px auto 
      0;
      font-size:
      14px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .common_list_con{
      width:
      1200px;
      border:
      1px solid 
      #dddddd;
      border-top:
      2px solid 
      #00bc6f;
      margin:
      10px auto 
      0;
      background-color:
      #f7f7f7;
      position:relative;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .common_list_con 
      dl{
      margin:
      20px;}
     
    
   
    
     
    
    
     
      .common_list_con 
      dt{
      font-size:
      14px;
      font-weight:bold;
      margin-bottom:
      10px}
     
    
   
    
     
    
    
     
      .common_list_con 
      dd 
      input{
      vertical-align:bottom;
      margin-right:
      10px}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .edit_site{
      position:absolute; 
      right:
      20px;
      top:
      30px;
      width:
      100px;
      height:
      30px;
      background-color:
      #37ab40;
      text-align:center;
      line-height:
      30px;
      color:
      #fff}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .pay_style_con{
      margin:
      20px;}
     
    
   
    
     
    
    
     
      .pay_style_con 
      input{
      float:left;
      margin:
      14px 
      7px 
      0 
      0;}
     
    
   
    
     
    
    
     
      .pay_style_con 
      label{
      float:left;
      border:
      1px solid 
      #ccc;
      background-color:
      #fff;
      padding:
      10px 
      10px 
      10px 
      40px;
      margin-right:
      25px}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .pay_style_con 
      .cash{
      background:
      url(../images/pay_icons.png) 
      8px top no-repeat 
      #fff;}
     
    
   
    
     
    
    
     
      .pay_style_con 
      .weixin{
      background:
      url(../images/pay_icons.png) 
      6px -
      36px no-repeat 
      #fff;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .pay_style_con 
      .zhifubao{
      background:
      url(../images/pay_icons.png) 
      12px -
      72px no-repeat 
      #fff;
      width:
      50px;
      height:
      16px}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .pay_style_con 
      .bank{
      background:
      url(../images/pay_icons.png) 
      6px -
      108px no-repeat 
      #fff;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .goods_list_th{
      height:
      40px;
      border-bottom:
      1px solid 
      #ccc}
     
    
   
    
     
    
    
     
      .goods_list_th 
      li{
      float:left;
      line-height:
      40px;
      text-align:center;}
     
    
   
    
     
    
    
     
      .goods_list_th 
      .col01{
      width:
      25%}
     
    
   
    
     
    
    
     
      .goods_list_th 
      .col02{
      width:
      20%}
     
    
   
    
     
    
    
     
      .goods_list_th 
      .col03{
      width:
      25%}
     
    
   
    
     
    
    
     
      .goods_list_th 
      .col04{
      width:
      15%}
     
    
   
    
     
    
    
     
      .goods_list_th 
      .col05{
      width:
      15%}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .goods_list_td{
      height:
      80px;
      border-bottom:
      1px solid 
      #eeeded}
     
    
   
    
     
    
    
     
      .goods_list_td 
      li{
      float:left;
      line-height:
      80px;
      text-align:center;}
     
    
   
    
     
    
    
     
      .goods_list_td 
      .col01{
      width:
      4%}
     
    
   
    
     
    
    
     
      .goods_list_td 
      .col02{
      width:
      6%}
     
    
   
    
     
    
    
     
      .goods_list_td 
      .col03{
      width:
      15%}
     
    
   
    
     
    
    
     
      .goods_list_td 
      .col04{
      width:
      20%}
     
    
   
    
     
    
    
     
      .goods_list_td 
      .col05{
      width:
      25%}
     
    
   
    
     
    
    
     
      .goods_list_td 
      .col06{
      width:
      15%}
     
    
   
    
     
    
    
     
      .goods_list_td 
      .col07{
      width:
      15%}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .goods_list_td 
      .col02{
      text-align:right}
     
    
   
    
     
    
    
     
      .goods_list_td 
      .col02 
      img{
      width:
      63px;
      height:
      63px;
      border:
      1px solid 
      #ddd;
      display:block;
      margin:
      7px 
      0;
      float:right;}
     
    
   
    
     
    
    
     
      .goods_list_td 
      .col03{
      text-align:left;
      text-indent:
      20px}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .settle_con{
      margin:
      10px}
     
    
   
    
     
    
    
     
      .total_goods_count,
      .transit,
      .total_pay{
      line-height:
      24px;
      text-align:right}
     
    
   
    
     
    
    
     
      .total_goods_count 
      em,
      .total_goods_count 
      b,
      .transit 
      b,
      .total_pay 
      b{
      font-size:
      14px;
      color:
      #ff4200;
      padding:
      0 
      5px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .order_submit{
      width:
      1200px;
      margin:
      20px auto;}
     
    
   
    
     
    
    
     
      .order_submit 
      a{
      width:
      160px;
      height:
      40px;
      line-height:
      40px;
      text-align:center;
      background-color:
      #47aa34;
      color:
      #fff;
      font-size:
      16px;
      display:block;
      float:right}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .order_list_th{
      width:
      1198px;
      border:
      1px solid 
      #ddd;
      background-color:
      #f7f7f7;
      margin:
      20px auto 
      0;}
     
    
   
    
     
    
    
     
      .order_list_th 
      li{
      float:left;
      height:
      30px;
      line-height:
      30px}
     
    
   
    
     
    
    
     
      .order_list_th 
      .col01{
      width:
      20%;
      margin-left:
      20px}
     
    
   
    
     
    
    
     
      .order_list_th 
      .col02{
      width:
      20%}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .order_list_table{
     
    
   
    
     
    
    
     	
      width:
      1200px;
     
    
   
    
     
    
    
     	
      border-collapse:collapse;
     
    
   
    
     
    
    
     	
      border-spacing:
      0px;
     
    
   
    
     
    
    
     	
      border:
      1px solid 
      #ddd;
     
    
   
    
     
    
    
     	
      margin:-
      1px auto 
      0;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .order_list_table 
      td{
     
    
   
    
     
    
    
     	
      border:
      1px solid 
      #ddd;	
     
    
   
    
     
    
    
     	
      text-align:center;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .order_goods_list{
      border-bottom:
      1px solid 
      #ddd;
      margin-bottom:-
      2px;}
     
    
   
    
     
    
    
     
      .order_goods_list 
      li{
      float:left; 
      height:
      80px;
      line-height:
      80px;}
     
    
   
    
     
    
    
     
      .order_goods_list 
      .col01{
      width:
      20%}
     
    
   
    
     
    
    
     
      .order_goods_list 
      .col01 
      img{
      width:
      60px;
      height:
      60px;
      border:
      1px solid 
      #ddd;
      margin:
      10px auto;}
     
    
   
    
     
    
    
     
      .order_goods_list 
      .col02{
      width:
      50%;
      text-align:left;}
     
    
   
    
     
    
    
     
      .order_goods_list 
      .col02 
      em{
      color:
      #999;
      margin-left:
      10px}
     
    
   
    
     
    
    
     
      .order_goods_list 
      .col03{
      width:
      10%}
     
    
   
    
     
    
    
     
      .order_goods_list 
      .col04{
      width:
      20%}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .oper_btn{
      display:inline-block;
      border:
      1px solid 
      #ddd;
      color:
      #666;
      padding:
      5px 
      10px}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .popup_con{
      display:none;}
     
    
   
    
     
    
    
     
      .popup{
      width:
      300px;
      height:
      150px;
      border:
      1px solid 
      #dddddd;
      border-top:
      2px solid 
      #00bc6f;
      background-color:
      #f7f7f7;
      position:fixed;
     
    
   
    
     
    
    
     	
      left:
      50%;
     
    
   
    
     
    
    
     	
      margin-left:-
      150px;
     
    
   
    
     
    
    
     	
      top:
      50%;
     
    
   
    
     
    
    
     	
      margin-top:-
      75px;
     
    
   
    
     
    
    
     	
      z-index:
      1000;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .popup 
      p{
      height:
      150px;
      line-height:
      150px;
      text-align:center;
      font-size:
      18px;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .mask{
      width:
      100%;
      height:
      100%;
      position:fixed;
      left:
      0;
      top:
      0;
      background-color:
      #000;
      opacity:
      0.3;
      z-index:
      999;}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .main_con{
     
    
   
    
     
    
    
     	
      width:
      1200px;
     
    
   
    
     
    
    
     	
      margin:
      0 auto;
     
    
   
    
     
    
    
     	
      background:
      url(../images/left_bg.jpg) repeat-y;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .left_menu_con{
     
    
   
    
     
    
    
     	
      width:
      200px;
     
    
   
    
     
    
    
     	
      float:left;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .left_menu_con 
      h3{
     
    
   
    
     
    
    
     	
      font-size:
      16px;
     
    
   
    
     
    
    
     	
      line-height:
      40px;
     
    
   
    
     
    
    
     	
      border-bottom:
      1px solid 
      #ddd;
     
    
   
    
     
    
    
     	
      text-align:center;
     
    
   
    
     
    
    
     	
      margin-bottom:
      10px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .left_menu_con 
      ul 
      li{
     
    
   
    
     
    
    
     	
      line-height:
      40px;
     
    
   
    
     
    
    
     	
      text-align:center;
     
    
   
    
     
    
    
     	
      font-size:
      14px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .left_menu_con 
      ul 
      li 
      a{
     
    
   
    
     
    
    
     	
      color:
      #666;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .left_menu_con 
      ul 
      li 
      .active{
     
    
   
    
     
    
    
     	
      color:
      #ff8800;
     
    
   
    
     
    
    
     	
      font-weight:bold;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .right_content{
     
    
   
    
     
    
    
     	
      width:
      980px;
     
    
   
    
     
    
    
     	
      float:right;
     
    
   
    
     
    
    
     	
      min-height:
      500px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .w980{
     
    
   
    
     
    
    
     	
      width:
      980px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .w978{
     
    
   
    
     
    
    
     	
      width:
      978px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .common_title2{
      height:
      20px;
      line-height:
      20px;
      font-size:
      16px;
      margin:
      10px 
      0;}
     
    
   
    
     
    
    
     
      .user_info_list{
     
    
   
    
     
    
    
     	
      background-color:
      #f9f9f9;
     
    
   
    
     
    
    
     	
      margin:
      10px 
      0 
      15px;
     
    
   
    
     
    
    
     	
      padding:
      10px 
      0;
     
    
   
    
     
    
    
     	
      height:
      90px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .user_info_list 
      li{
     
    
   
    
     
    
    
     	
      line-height:
      30px;
     
    
   
    
     
    
    
     	
      text-indent:
      30px;
     
    
   
    
     
    
    
     	
      font-size:
      14px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .user_info_list 
      li 
      span{
     
    
   
    
     
    
    
     	
      width:
      100px;
     
    
   
    
     
    
    
     	
      float:left;
     
    
   
    
     
    
    
     	
      text-align:right;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .info_con{
     
    
   
    
     
    
    
     	
      width:
      980px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .info_l{
     
    
   
    
     
    
    
     	
      width:
      600px;
     
    
   
    
     
    
    
     	
      float:left;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .info_r{
     
    
   
    
     
    
    
     	
      width:
      360px;
     
    
   
    
     
    
    
     	
      float:right;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .site_con{
     
    
   
    
     
    
    
     	
      background-color:
      #f9f9f9;
     
    
   
    
     
    
    
     	
      padding:
      10px 
      0;
     
    
   
    
     
    
    
     	
      margin-bottom:
      20px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .site_con 
      dt{
     
    
   
    
     
    
    
     	
      font-size:
      14px;
     
    
   
    
     
    
    
     	
      line-height:
      30px;
     
    
   
    
     
    
    
     	
      text-indent:
      30px;
     
    
   
    
     
    
    
     	
      font-weight:bold;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .site_con 
      dd{
     
    
   
    
     
    
    
     	
      font-size:
      14px;
     
    
   
    
     
    
    
     	
      line-height:
      30px;
     
    
   
    
     
    
    
     	
      text-indent:
      30px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .site_con 
      .form_group{
     
    
   
    
     
    
    
     	
      height:
      40px;
     
    
   
    
     
    
    
     	
      line-height:
      40px;
     
    
   
    
     
    
    
     	
      margin-top:
      10px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .site_con 
      .form_group 
      label{
     
    
   
    
     
    
    
     	
      width:
      100px;
     
    
   
    
     
    
    
     	
      float:left;
     
    
   
    
     
    
    
     	
      text-align:right;
     
    
   
    
     
    
    
     	
      font-size:
      14px;
     
    
   
    
     
    
    
     	
      height:
      40px;
     
    
   
    
     
    
    
     	
      line-height:
      40px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .site_con 
      .form_group 
      input{
     
    
   
    
     
    
    
     	
      width:
      300px;
     
    
   
    
     
    
    
     	
      height:
      25px;
     
    
   
    
     
    
    
     	
      border:
      1px solid 
      #ddd;
     
    
   
    
     
    
    
     	
      float:left;
     
    
   
    
     
    
    
     	
      outline:none;
     
    
   
    
     
    
    
     	
      margin-top:
      7px;
     
    
   
    
     
    
    
     	
      text-indent:
      10px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .site_con 
      .form_group2{
     
    
   
    
     
    
    
     	
      height:
      90px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .site_area{
     
    
   
    
     
    
    
     	
      width:
      280px;
     
    
   
    
     
    
    
     	
      height:
      60px;
     
    
   
    
     
    
    
     	
      border:
      1px solid 
      #ddd;
     
    
   
    
     
    
    
     	
      outline:none;
     
    
   
    
     
    
    
     	
      padding:
      10px;
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      .info_submit{
     
    
   
    
     
    
    
     	
      width:
      80px;
     
    
   
    
     
    
    
     	
      height:
      30px;
     
    
   
    
     
    
    
     	
      background-color:
      #37ab40;
     
    
   
    
     
    
    
     	
      border:
      0px;
     
    
   
    
     
    
    
     	
      color:
      #fff;
     
    
   
    
     
    
    
     	
      margin:
      10px 
      0 
      10px 
      100px;
     
    
   
    
     
    
    
     	
      cursor:pointer;
     
    
   
    
     
    
    
     	
      font-family:
      'Microsoft Yahei'
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      .stress{
     
    
   
    
     
    
    
     	
      color:
      #ff8800;
     
    
   
    
     
    
    
     
      }

五、完整版代码：

代码地址：https://gitee.com/xun527/ttsx.git

转载：https://blog.csdn.net/xun527/article/details/77822274

查看评论

小言_互联网的博客

小言_互联网的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

html-css练习题（天天生鲜静态网页制作）文末有完整版代码地址链接

一、前言：

前端学习经典练手网页，重新整理网页版代码，如果你是初学者，请试着做一下这个网页

素材：文末完整版代码中。。。。。。

二、效果图：

三、主要需求：

四、Html代码赏析：

html文件：

Css格式文件代码：

五、完整版代码：

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场