一朵盆栽
一朵盆栽

京东网页例子

链接: https://pan.baidu.com/s/17C0bcu24Q77dfx8-TjGHEQ 提取码: ryx6


<html>
<head>
  <title>产品详情页面title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
  <link href="css/common_07.css" type="text/css" rel="Stylesheet"/>
  <link href="css/product.css" type="text/css" rel="Stylesheet"/>
  <link href="css/product_left.css" type="text/css" rel="Stylesheet"/>
  <link href="css/product_right.css" type="text/css" rel="Stylesheet"/>
  <link href="css/product_right_detail.css" type="text/css" rel="Stylesheet"/>
  <link href="css/product_right_more.css" type="text/css" rel="Stylesheet"/>
head>
<body>

<div id="side_panel">
  <a class="research" href="3"><b>b>调查问卷a>
  <a class="gotop" href="#"><b>b>返回顶部a>
div>


<div id="top">
  <div id="top_box">
    <img src="Images/star.jpg"/>
    <a href="#">收藏京东 a>
    <pre> <br> pre>
    <div class="rt">
      <ul>
        <li>您好，欢迎来到京东！<a href="#">[登录]a> <a href="#">[免费注册]a>li>
        <li><b>b><a href="#">我的订单a>li>
        <li class="vip"><b>b><a href="#">会员俱乐部a>li>
        <li class="dakehu"><b>b><a href="#">企业频道a>li>
        <li id="app_jd" class="app_jd" name="show_hide">
          <b>b>
          <label class="rt">
            <a href="#">手机京东a>
          label>
          <div id="app_jd_items">
            <div class="app">
              <h3>京东客户端h3>
              <a href="#" class="app">a>
              <a href="#" class="android">a>
            div>
            <div class="bank">
              <h3>网银钱包客户端h3>
              <a href="#" class="app">a>
              <a href="#" class="android">a>
            div>
          div>
        li>
        <li id="service" class="service" name="show_hide">
          <b>b>
          <label class="rt">
            <a href="#"> 客户服务a>
          label>
          <ul id="service_items">
            <li><a href="#">帮助中心a>li>
            <li><a href="#">售后服务a>li>
            <li><a href="#">在线客服a>li>
            <li><a href="#">投诉中心a>li>
            <li><a href="#">客服邮箱a>li>
          ul>
        li>
        <li id="site_nav" class="site_nav" name="show_hide">
          <b>b>
          <label class="rt">
            <a href="#">网站导航a>
          label>
          <div id="site_nav_items">
            <h3>特色栏目h3>
            <ul>
              <li><a href="#">京东通信a>li>
              <li><a href="#">校园之星a>li>
              <li><a href="#">视频购物a>li>
              <li><a href="#">京东社区a>li>
              <li><a href="#">在线读书a>li>
              <li><a href="#">装机大师a>li>
              <li><a href="#">京东 E 卡a>li>
              <li><a href="#">家装城a>li>
              <li><a href="#">搭配购a>li>
              <li><a href="#">我喜欢a>li>
              <li><a href="#">游戏社区a>li>
            ul>
            <div>div>
            <h3>企业服务h3>
            <ul>
              <li><a href="#">企业采购a>li>
              <li><a href="#">办公直通车a>li>
            ul>
            <div>div>
            <h3>旗下网站h3>
            <ul>
              <li><a href="#">English Sitea>li>
            ul>
          div>
        li>
      ul>
    div>
  div>
div>
<div class="clear">div>


<div id="top_main">
  <a href="#" class="lf"><img src="images/logo-201305.png" alt="LOGO"/>a>
  <div id="search_box" class="lf">
    <div id="search_helper">
      <p>卫<b>33衣b><span>约1120个商品span>p>
      <p>卫<b>衣b><span>约1120个商品span>p>
      <ul>
        <li>在<b>男装 > 卫衣b>分类中搜索<span>约11731个商品span>li>
        <li>在<b>女装 > 卫衣b>分类中搜索<span>约10253个商品span>li>
      ul>
      <p>卫<b>新b><span>约1120个商品span>p>
      <p>卫<b>生纸b><span>约5100个商品span>p>
      <p>卫<b>浴b><span>约12758商品span>p>
      <p>卫<b>裤b><span>约1120个商品span>p>
      <p>卫<b>衣 套装b><span>约1486个商品span>p>
      <p>卫<b>衣 男b><span>约210个商品span>p>
      <p>卫<b>生纸 套装b><span>约631个商品span>p>
    div>
    <div class="search">
      <input id="txtSearch" type="text" class="text"/>
      <input class="button" name="" type="button" value="搜索"/>
    div>
    <div class="hot_words">
      <span>热门搜索：span>
      <a href="#">家纺11月大促a>
      <a href="#">彩虹电热毯a>
      <a href="#">博洋家纺a>
      <a href="#">霞珍a>
      <a href="#">床垫床褥a>
      <a href="#">九洲鹿被子a>
      <a href="#">南极人家纺a>
    div>
  div>
  <div id="my_jd" class="lf" name='show_hide'>
    <div class="my_jd_mt">
      我的京东<b>b>
    div>
    <div id="my_jd_items">
      <p>您好，请<a href="#">登录a>p>
      <ul class="lf">
        <li><a href="#">待处理订单a>li>
        <li><a href="#">咨询回复a>li>
        <li><a href="#">降价商品a>li>
        <li><a href="#">返修退换货a>li>
        <li><a href="#">优惠券a>li>
      ul>
      <ul class="lf">
        <li><a href="#">我的关注 >a>li>
        <li><a href="#">我的京豆 >a>li>
        <li><a href="#">我的理财 >a>li>
        <li><a href="#">我的白条 >a>li>
      ul>
    div>
  div>
  <div id="settle_up" class="lf" name='show_hide'>
    <div class="settle_up_mt">
      去购物车结算
      <b>b>
    div>
    <div id="settle_up_items">
      <div id="no_goods">
        <b>b>
        购物车中还没有商品，赶紧去选购吧
      div>
    div>
  div>
div>
<div class="clear">div>


<div id="nav">
  <div id="category" class="category" name='show_hide'>
    <div id="cate_mt">
      <a href="#">全部商品分类a>
      <span>span>
    div>
    <div id="category_items">
      <div class="cate_item">
        <h3>
          <a href="#">图书a><span>、span>
          <a href="#">音像a><span>、span>
          <a href="#">数字商品a>
        h3>
        <div class="sub_cate_box">
          <div class="sub_cate_items">
            <div>
              <a href="#">电子书a>
              <p>
                <a href="#">免费a>
                <a href="#">小说a>
                <a href="#">励志与成功a>
                <a href="#">婚恋/两性a>
                <a href="#">文学a>
                <a href="#">经营a>
                <a href="#">畅读VIPa>
              p>
            div>
            <div>
              <a href="#">数字音乐a>
              <p>
                <a href="#">通俗流行a>
                <a href="#">古典音乐a>
                <a href="#">摇滚说唱a>
                <a href="#">爵士蓝调a>
                <a href="#">乡村民谣a>
                <a href="#">有声读物a>
              p>
            div>
            <div>
              <a href="#">音像a>
              <p>
                <a href="#">音乐a>
                <a href="#">影视a>
                <a href="#">教育音像a>
                <a href="#">游戏a>
              p>
            div>
            <div>
              <a href="#">文艺a>
              <p>
                <a href="#">小说a>
                <a href="#">文学a>
                <a href="#">青春文学a>
                <a href="#">传记a>
                <a href="#">艺术a>
              p>
            div>
          div>
          <div class="sub_cate_banner">
            <div><img src="Images/cate_banner_01.jpg"/>div>
            <div><img src="Images/cate_banner_02.jpg"/>div>
            <div>
              <p>推荐品牌出版商/书店p>
              <ul>
                <li><a href="#">中华书局a>li>
                <li><a href="#">人民邮电出版社a>li>
                <li><a href="#">上海世纪出版股份有限公司a>li>
                <li><a href="#">电子工业出版社a>li>
                <li><a href="#">三联书店a>li>
                <li><a href="#">浙江少年儿童出版社a>li>
                <li><a href="#">人民文学出版社a>li>
                <li><a href="#">外语教学与研究出版社a>li>
                <li><a href="#">中信出版社a>li>
                <li><a href="#">化学工业出版社a>li>
                <li><a href="#">北京大学出版社a>li>
              ul>
            div>
          div>
        div>
      div>
      <div class="cate_item">
        <h3>
          <a href="#">家用电器a>
        h3>
        <div class="sub_cate_box">
          <div class="sub_cate_items">
            <div>
              <a href="#">大家电a>
              <p>
                <a href="#">家电爆品a>
                <a href="#">平板电视a>
                <a href="#">空调a>
                <a href="#">冰箱a>
                <a href="#">洗衣机a>
                <a href="#">家庭影院a>
                <a href="#">DVDa>
                <a href="#">迷你音响a>
                <a href="#">烟机/灶具a>
                <a href="#">热水器a>
                <a href="#">消毒柜/洗碗机a>
                <a href="#">酒柜/冷柜a>
                <a href="#">家电配件a>
              p>
            div>
            <div>
              <a href="#">生活电器a>
              <p>
                <a href="#">取暖电器a>
                <a href="#">净化器加湿器a>
                <a href="#">扫地机器人a>
                <a href="#">吸尘器a>
              p>
            div>
            <div>
              <a href="#">厨房电器a>
              <p>
                <a href="#">电压力锅a>
                <a href="#">电饭煲a>
                <a href="#">豆浆机a>
              p>
            div>
            <div>
              <a href="#">五金家电a>
              <p>
                <a href="#">电动工具a>
                <a href="#">手动工具a>
                <a href="#">仪器仪表a>
                <a href="#">浴霸/排气扇a>
                <a href="#">灯具a>
                <a href="#">洁身器a>
                <a href="#">LED灯a>
                <a href="#">水槽a>
                <a href="#">淋浴花洒a>
                <a href="#">厨卫五金a>
                <a href="#">家具五金a>
                <a href="#">门铃a>
                <a href="#">电气开关a>
                <a href="#">插座a>
                <a href="#">电工电料a>
                <a href="#">监控安防a>
                <a href="#">电线/线缆a>
              p>
            div>
          div>
          <div class="sub_cate_banner">

          div>
        div>
      div>
    div>
  div>
  <div id="nav_items">
    <ul>
      <li><a href="#">首页a>li>
      <li><a href="#">服装城a>li>
      <li><a href="#">食品a>li>
      <li><a href="#">团购a>li>
      <li><a href="#">夺宝岛a>li>
      <li><a href="#">闪购a>li>
      <li><a href="#">金融a>li>
    ul>
  div>
div>
<div class="clear">div>


<div id="main">
  
  <div class="bread-crumb">
    <a href="#"><b>家居家装b>a>
    <a href="#">清洁用品a>
    <span>>span>
    <a href="#">衣物清洁a>
    <span>>span>
    <a href="#">卫新a>
    <span>>span>
    <a href="#">卫新洗衣液a>
  div>

  
  <div id="product_intro">
    <div id="preview">
      <p id="medimImgContainer">
        <img id="mediumImg" src="images/products/product-s1-m.jpg"/>
        <span id="mask">span>
        <span id="maskTop">span>
        <span id="largeImgContainer">
          <img id="loading" src="images/loading.gif"/>
          <img id="largeImg"/>
        span>
      p>
      <h1>
        <a class="backward_disabled">a>
        <a class="forward_disabled">a>
        <div>
          <ul id="icon_list">
            <li><img src="images\products\product-s1.jpg"/>li>
            <li><img src="images\products\product-s2.jpg"/>li>
            <li><img src="images\products\product-s3.jpg"/>li>
            <li><img src="images\products\product-s4.jpg"/>li>
            <li><img src="images\products\product-s1.jpg"/>li>
            <li><img src="images\products\product-s2.jpg"/>li>
            <li><img src="images\products\product-s3.jpg"/>li>
            <li><img src="images\products\product-s4.jpg"/>li>
          ul>
        div>
      h1>
      <div id="short_share">
        <a href="#" class="lf">查看大图a>
        <span class="lf">span>
        <div class="lf" id="dd" style="width:155px;">
          <span>分享到：span>
          <a class="share_sina" href="#">a>
          <a class="share_qq" href="#">a>
          <a class="share_renren" href="#">a>
          <a class="share_kaixin" style="display:none;" href="#">a>
          <a class="share_douban" style="display:none;" href="#">a>
          <a class="share_more" id='shareMore'><b>b>a>
        div>
      div>
    div>
    <h1><span>卫新 薰衣草洗衣液 4.26kgspan><b>与威露士一起巩固健康生活b>h1>
    <ul id="summary">
      <li id="summary_price">
        <div class="title">京 东 价：div>
        <div class="content">
          <b>￥39.90b>
          <a href="#">(降价通知)a>
        div>
      li>
      <li id="summary_market">
        <div class="title">商品编号：div>
        <div class="content">
          <span>960148span>
        div>
      li>
      <li id="summary_grade">
        <div class="title">商品评分：div>
        <div class="content">
          <span>span>
          <a href="#">(已有<b>47662b>人评价)a>
          <a href="#" class="words">留言咨询a>
        div>
      li>
      <li id="summary_stock">
        <div class="title">配送至：div>
        <div class="content">
          
          <div id="store_select">
            <div class="text">
              <p>北京海淀区大钟寺p>
              <b>b>
            div>
            <div id="store_content">
              <ul id="store_tabs">
                <li class="hover">北京<b>b>li>
                <li>海淀区<b>b>li>
                <li>三环以内<b>b>li>
              ul>
              <ul id="store_items">
                <li><a href="#">北京a>li>
                <li><a href="#">上海a>li>
                <li><a href="#">天津a>li>
                <li><a href="#">重庆a>li>
                <li><a href="#">河北a>li>
                <li><a href="#">山西a>li>
                <li><a href="#">河南a>li>
                <li><a href="#">辽宁a>li>
                <li><a href="#">吉林a>li>
                <li><a href="#">黑龙江a>li>
                <li><a href="#">内蒙古a>li>
                <li><a href="#">江苏a>li>
                <li><a href="#">山东a>li>
                <li><a href="#">安徽a>li>
                <li><a href="#">浙江a>li>
                <li><a href="#">湖北a>li>
                <li><a href="#">福建a>li>
                <li><a href="#">四川a>li>
                <li><a href="#">云南a>li>
                <li><a href="#">新疆a>li>
                <li><a href="#">西藏a>li>
              ul>
            div>
            <div id="store_close">div>
          div>
          <b>有货b>，23:00前完成下单，预计<i>明日（12月06日）i>送达
        div>
      li>
      <li id="summary_service">
        <div class="title">服  务：div>
        <div class="content">
          由 <span>京东span> 发货并提供售后服务。
          支持：
          <a class="sendpay_211" href="#">a>
          <a class="jingdou_xiankuan" href="#">a>
          <a class="special_ziti" href="#">a>
        div>
      li>
    ul>
    <ul id="choose">
      <li id="choose_color">
        <div class="title">选择颜色：div>
        <div class="content">
          <a href="#" class="selected">
            <img src="images\products\p_icon_01.jpg"/>
            <span>薰衣草span>
            <b>b>
          a>
          <a href="#">
            <img src="images\products\p_icon_02.jpg"/>
            <span>索菲亚玫瑰span>
            <b>b>
          a>
        div>
      li>
      <li id="choose_amount">
        <div class="title">购买数量：div>
        <div class="content">
          <a href="#" class="btn_reduce">a>
          <input type="text" value="1"/>
          <a href="#" class="btn_add">a>
        div>
      li>
      <li id="choose_result">
        已选择<b>“薰衣草”b>，<b>“4.26kg”b>
      li>
      <li id="choose_btns" class="clear">
        <a href="#" class="choose_btn_append">a>
        <a href="#" class="choose_baitiao_fq">a>
        <a href="#" class="choose_mark">a>
        <div class="m_buy">
          <span>客户端首次下单span>
          <p>送 5 元京券 p>
        div>
      li>
    ul>
  div>

  
  <div id="left_product">
    
    <div id="related_sorts">
      <div class="m_title">相关分类div>
      <ul class="m_content">
        <li><a href="#">纸品湿巾a>li>
        <li><a href="#">衣物清洁a>li>
        <li><a href="#">清洁工具a>li>
        <li><a href="#">驱虫用品a>li>
        <li><a href="#">家庭清洁a>li>
        <li><a href="#">皮具护理a>li>
        <li><a href="#">一次性用品a>li>
      ul>
    div>

    
    <div id="related_brands">
      <div class="m_title">同类其他品牌div>
      <ul class="m_content">
        <li><a href="#">蓝月亮a>li>
        <li><a href="#">汰渍a>li>
        <li><a href="#">威露士a>li>
        <li><a href="#">奥妙a>li>
        <li><a href="#">卫新a>li>
        <li><a href="#">碧浪a>li>
        <li><a href="#">金纺a>li>
        <li><a href="#">立白a>li>
        <li><a href="#">白猫a>li>
        <li><a href="#">洛娃a>li>
        <li><a href="#">滴露a>li>
        <li><a href="#">亮净a>li>
        <li><a href="#">威洁士a>li>
        <li><a href="#">可柔可顺a>li>
        <li><a href="#">妈妈壹选a>li>
        <li><a href="#">纳爱斯a>li>
        <li><a href="#">好爸爸a>li>
        <li><a href="#">绿伞a>li>
        <li><a href="#">净安a>li>
        <li><a href="#">地球a>li>
      ul>
    div>

    
    <div class="view_buy">
      <div class="m_title">浏览了该商品的用户最终购买div>
      <ul class="m_content">
        <li>
          <p><a href="#"><img src="images/products/p001.jpg"/>a>p>
          <a href="#">卫新 护色洗衣液 2kg 袋装a>
          <h2><a href="#">￥22.90a>h2>
        li>
        <li>
          <p><a href="#"><img src="images/products/p002.jpg"/>a>p>
          <a href="#">卫新 护色洗衣液 2kg 袋装a>
          <h2><a href="#">￥39.90a>h2>
        li>
        <li>
          <p><a href="#"><img src="images/products/p004.jpg"/>a>p>
          <a href="#">卫新 护色洗衣液 2kg 袋装a>
          <h2><a href="#">￥69.90a>h2>
        li>
        <li class="no_bottom">
          <p><a href="#"><img src="images/products/p005.jpg"/>a>p>
          <a href="#">威露士（Walch）2kg+2kg洗衣液（有氧洗）特惠双袋组合装a>
          <h2><a href="#">￥39.90a>h2>
        li>
      ul>
    div>

    
    <div id="rank_list">
      <div class="m_title">衣物清洁排行榜div>
      <div class="m_content">
        <ul class="m_tabs">
          <li>同价位li>
          <li class="current">同品牌li>
          <li>同类别li>
        ul>
        <ul class="m_list">
          <li>
            <span class="hot">1span>
            <a href="#"><img src="images/products/product-s4.jpg"/>a>
            <p><a href="#">卫新洗衣液a>p>
            <h2>￥39.90h2>
          li>
          <li>
            <span class="hot">2span>
            <a href="#"><img src="images/products/product-s5.jpg"/>a>
            <p><a href="#">卫新消毒液a>p>
            <h2>￥49.90h2>
          li>
          <li>
            <span class="hot">3span>
            <a href="#"><img src="images/products/product-s6.jpg"/>a>
            <p><a href="#">卫新消毒液a>p>
            <h2>￥49.90h2>
          li>
          <li class="no_bottom">
            <span>4span>
            <a href="#"><img src="images/products/product-s7.jpg"/>a>
            <p><a href="#">卫新消毒液a>p>
            <h2>￥49.90h2>
          li>
        ul>
      div>
    div>

    
    <div class="view_buy">
      <div class="m_title">购买了该商品的用户还购买了div>
      <ul class="m_content">
        <li>
          <p><a href="#"><img src="images/products/p001.jpg"/>a>p>
          <a href="#">卫新 护色洗衣液 2kg 袋装a>
          <h2><a href="#">￥22.90a>h2>
        li>
        <li>
          <p><a href="#"><img src="images/products/p002.jpg"/>a>p>
          <a href="#">卫新 护色洗衣液 2kg 袋装a>
          <h2><a href="#">￥39.90a>h2>
        li>
        <li>
          <p><a href="#"><img src="images/products/p004.jpg"/>a>p>
          <a href="#">卫新 护色洗衣液 2kg 袋装a>
          <h2><a href="#">￥69.90a>h2>
        li>
        <li class="no_bottom">
          <p><a href="#"><img src="images/products/p005.jpg"/>a>p>
          <a href="#">威露士（Walch）2kg+2kg洗衣液（有氧洗）特惠双袋组合装a>
          <h2><a href="#">￥39.90a>h2>
        li>
      ul>
    div>

    
    <div class="view_buy">
      <div class="m_title">浏览了该商品的用户还浏览了div>
      <ul class="m_content">
        <li>
          <p><a href="#"><img src="images/products/p001.jpg"/>a>p>
          <a href="#">卫新 护色洗衣液 2kg 袋装a>
          <h2><a href="#">￥22.90a>h2>
        li>
        <li>
          <p><a href="#"><img src="images/products/p002.jpg"/>a>p>
          <a href="#">卫新 护色洗衣液 2kg 袋装a>
          <h2><a href="#">￥39.90a>h2>
        li>
        <li>
          <p><a href="#"><img src="images/products/p004.jpg"/>a>p>
          <a href="#">卫新 护色洗衣液 2kg 袋装a>
          <h2><a href="#">￥69.90a>h2>
        li>
        <li class="no_bottom">
          <p><a href="#"><img src="images/products/p005.jpg"/>a>p>
          <a href="#">威露士（Walch）2kg+2kg洗衣液（有氧洗）特惠双袋组合装a>
          <h2><a href="#">￥39.90a>h2>
        li>
      ul>
    div>

    
    <ul id="left_shows">
      <li>
        <a><img src="Images/products/left_p001.jpg"/>a>
      li>
      <li>
        <a><img src="Images/products/left_p002.jpg"/>a>
      li>
      <li>
        <a><img src="Images/products/left_p003.jpg"/>a>
      li>
    ul>
  div>

  
  <div id="right_product">
    
    <div id="favorable_suit">
      <p class="main_tabs">优惠套装p>
      <div class="m_content">
        <ul class="sub_tabs">
          <li class="current">优惠套装1li>
        ul>
        <div class="sub_content">
          <div class="master">
            <span class="add">span>
            <a href="#"><img src="images/products/product_01_m.jpg"/>a>
            <p><a href="#">卫新 薰衣草洗衣液 4.26kga>p>
          div>
          <div class="suits">
            <ul>
              <li>
                <span class="add">span>
                <a href="#"><img src="images/products/product_02_m.jpg"/>a>
                <p><a href="#">卫新 去静电柔顺剂 清怡樱花袋装 500a>p>
              li>
              <li>
                <span class="add">span>
                <a href="#"><img src="images/products/product_03_m.jpg"/>a>
                <p><a href="#">威露士（Walch） 手洗洗衣液单袋装 500mla>p>
              li>
              <li>
                <a href="#"><img src="images/products/product_04_m.jpg"/>a>
                <p><a href="#">威露士（Walch） 衣物家居消毒液 3a>p>
              li>
            ul>
          div>
          <div class="infos">
            <span>span>
            <h1><a href="#">威露士组合a>h1>
            <p>套装价：<b class="empasis">105.30b>p>
            <p>京东价：<b class="strike">142.40b>p>
            <p>立即节省：<b>37.10b>p>
            <div class="btns">
              <a href="#" class="btn_buy">购买套装a>
            div>
          div>
        div>
      div>
    div>

    
    <div id="recommend">
      <ul class="main_tabs">
        <li class="current"><a href="#">推荐配件a>li>
        <li><a href="#">人气组合a>li>
      ul>
      <div class="m_content">
        <ul class="sub_tabs">
          <li class="current">全部配件li>
          <li>清洁工具(1)li>
          <li>毛巾浴巾(3)li>
          <li>衬衫(1)li>
          <li>收纳用品(2)li>
          <li>商务男袜(1)li>
        ul>
        <div class="sub_content">
          <div class="master">
            <span class="add">span>
            <a href="#"><img src="images/products/product_01_m.jpg"/>a>
            <p><a href="#">卫新 薰衣草洗衣液 4.26kga>p>
          div>
          <div class="suits">
            <ul style="width:1000px;">
              <li>
                <span class="add">span>
                <a href="#"><img src="images/products/product_05_m.jpg"/>a>
                <p><a href="#">卫新 去静电柔顺剂 清怡樱花袋装 500a>p>
                <input type="checkbox" id="chk_01"/>
                <label for="chk_01">￥49.00label>
              li>
              <li>
                <span class="add">span>
                <a href="#"><img src="images/products/product_06_m.jpg"/>a>
                <p><a href="#">佳佰Hommy9丝压缩袋(2大2中4小)a>p>
                <input type="checkbox" id="Checkbox1"/>
                <label for="chk_01">￥49.00label>
              li>
              <li>
                <span class="add">span>
                <a href="#"><img src="images/products/product_07_m.jpg"/>a>
                <p><a href="#">【京东自营】INTERIGHT 100支全棉a>p>
                <input type="checkbox" id="Checkbox2"/>
                <label for="chk_01">￥49.00label>
              li>
              <li>
                <span class="add">span>
                <a href="#"><img src="images/products/product_08_m.jpg"/>a>
                <p><a href="#">INTERIGHT 商务休闲男袜 精梳棉中a>p>
                <input type="checkbox" id="Checkbox3"/>
                <label for="chk_01">￥49.00label>
              li>
              <li>
                <span class="add">span>
                <a href="#"><img src="images/products/product_09_m.jpg"/>a>
                <p><a href="#">威露士（Walch） 衣物家居消毒液 3a>p>
                <input type="checkbox" id="Checkbox4"/>
                <label for="chk_01">￥49.00label>
              li>
              <li>
                <a href="#"><img src="images/products/product_10_m.jpg"/>a>
                <p><a href="#">威露士（Walch） 衣物家居消毒液 3a>p>
                <input type="checkbox" id="Checkbox5"/>
                <label for="chk_01">￥49.00label>
              li>
            ul>
          div>
          <div class="infos">
            <span>span>
            <h1><a href="#">已选择<b>0b>个配件a>h1>
            <p>搭配价：<b class="empasis">39.90b>p>
            <p>获得优惠：<b class="strike">36.60b>p>
            <div class="btns">
              <a href="#" class="btn_buy">立即购买a>
            div>
          div>
        div>
      div>
    div>

    
    <div id="product_detail">
      
      <ul class="main_tabs">
        <li class="current"><a>商品介绍a>li>
        <li><a>规格参数a>li>
        <li><a>包装清单a>li>
        <li><a>商品评价(43390)a>li>
        <li><a>售后保障a>li>
      ul>
      
      <div id="minicart">
        <p><a href="#">a>p>
        <div style="display:none;">
          <img src="images/products/product_01_m.jpg"/>
          <h1>卫新 薰衣草洗衣液 4.26kgh1>
          <h2>京东价：<b>￥41.90b>h2>
        div>
      div>

      
      <div id="product_info">
        <ul class="detail_list">
          <li>商品名称：卫新洗衣液li>
          <li>商品编号：1039778li>
          <li>品牌：<a href="#" target="_blank">卫新a>li>
          <li>上架时间：2014-01-23 16:28:06li>
          <li>商品毛重：4.55kgli>
          <li>商品产地：广东省从化市li>
          <li>类别：手洗洗衣液，机洗洗衣液li>
          <li>规格：3kg以上li>
          <li>香型：香味li>
        ul>
        <div class="detail_correct">
          <b>b>
          如果您发现商品信息不准确，<a href="#" target="_blank">欢迎纠错a>
        div>
        <div class="detail_content" style="text-align:center;">
          <p><a src="#"><img src="images/products/weilushi.jpg"/>a>p>
          <div class="dotted_split">div>
          <div class="jd_split">
            <b>产品信息b>
            <span>Product Informationspan>
          div>
          <table>
            <tr>
              <td><img src="images/products/product_01.jpg"/>td>
              <td>
                <h1>卫新 薰衣草洗衣液 （新老包装 随机发货）h1>
                <p>净含量：4.26kgp>
                <p>产品功效：p>
                <p>
                  1.特别添加法国薰衣草精油成分，令衣物充满芬<br/>
                  2.纳米智能分解技术，深层渗透衣物纤维，自动逐一瓦解各种顽固污渍及细菌，不损衣物纤维，净白亮色。<br/>
                  3.特有去渍防护配方，减少污渍吸附在衣物表面，穿着时持久洁净更耐脏。<br/>
                  4.中性配方，成分更温和，温柔呵护家人皮肤。<br/>
                  5.全新低泡技术，用量少，易漂无残留。<br/>
                  6.含柔顺成分，令衣物恢复天然弹性不易变形，易熨更柔顺<br/>
                  7.环保更健康，不含磷、荧光增白剂。<br/>
                p>
                <p> 箱规：4支/箱p>
                <p><br/>更多容量选择: 3kg 4.26kgp>
              td>
            tr>
          table>
          <div class="jd_split">
            <b>产品特色b>
            <span>Selling Pointspan>
          div>
          <p><a src="#"><img src="images/products/product_02.jpg"/>a>p>
          <div class="dotted_split">div>
          <p><a src="#"><img src="images/products/product_03.jpg"/>a>p>
          <div class="dotted_split">div>
          <div class="jd_split">
            <b>适用范围b>
            <span>Heritagespan>
          div>
          <p><a src="#"><img src="images/products/product_04.jpg"/>a>p>
          <div class="dotted_split">div>
          <div class="jd_split">
            <b>使用说明b>
            <span>Instructionsspan>
          div>
          <p><a src="#"><img src="images/products/product_05.jpg"/>a>p>
          <div class="dotted_split">div>
          <div class="jd_split">
            <b>品牌介绍b>
            <span>Brand Introductionspan>
          div>
          <table>
            <tr>
              <td><img src="images/products/weilushi_01.jpg"/>td>
              <td>
                <h1>威莱为你每一天，未来健康每一天h1>
                <p>威莱集团是家用清洁及卫生消毒产品市场的领导者。在多个国家及地区，其消毒产品均占有领先的市场地位。p>
              td>
            tr>
          table>
        div>
      div>

      
      <div id="product_data">
        <div class="detail_correct">
          <b>b>
          如果您发现商品信息不准确，<a href="#" target="_blank">欢迎纠错a>
        div>
        <table cellpadding="0" cellspacing="1" width="100%" border="0" class="Ptable">
          <thead>
          <tr>
            <th colspan="2">主体th>
          tr>
          thead>
          <tbody>
          <tr>tr>
          <tr>
            <td class="td_title">品牌td>
            <td>威露士（Walch）td>
          tr>
          <tr>
            <td class="td_title">类别td>
            <td>洗衣液td>
          tr>
          <tr>
            <td class="td_title">产品规格（ml/kg）td>
            <td>4.26kgtd>
          tr>
          <tr>
            <td class="td_title">产品包装尺寸（cm）td>
            <td>254*117*326td>
          tr>
          <tr>
            <td class="td_title">香型td>
            <td>薰衣草td>
          tr>
          tbody>
        table>
      div>

      
      <div id="product_package">
        <p>卫新 薰衣草洗衣液 4.26kg*1p>
      div>

      <br/>
      
      <div id='product_comment'>div>

      
      <div id="product_saleAfter">
        <p>本产品全国联保，享受三包服务，质保期为：无质保p>
      div>
    div>

    
    <div id="promise">
      <b>服务承诺：b>
      <p>
        京东向您保证所售商品均为正品行货，京东自营商品开具机打发票或电子发票。凭质保证书及京东发票，可享受全国联保服务（奢侈品、钟表除外；奢侈品、钟表由京东联系保修，享受法定三包售后服务），与您亲临商场选购的商品享受相同的质量保证。京东还为您提供具有竞争力的商品价格和<a
        href="#">运费政策a>，请您放心购买！ p>
      <p>
        注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！p>
    div>

    
    <div id="state">
      <span>权利声明：span>
      <p>京东上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是京东重要的经营资源，未经许可，禁止非法转载使用。p>
      <p><b>注：b>本站商品信息均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任。p>
    div>

    
    <div id="comment">
      <p class="main_tabs">商品评价p>
      <div class="m_content">
        <div class="rate">
          <span>97span><b>%b>
          <p>好评度p>
        div>
        <div class="percent">
          <dl>
            <dt>好评(<span>97%span>)dt>
            <dd><p style="width:97px;">p>dd>
          dl>
          <dl>
            <dt>中评(<span>2%span>)dt>
            <dd><p style="width:2px;">p>dd>
          dl>
          <dl>
            <dt>差评(<span>1%span>)dt>
            <dd><p style="width:1px;">p>dd>
          dl>
        div>
        <div class="buyers">
          <p>买家印象：p>
          <ul>
            <li>比超市便宜<span>(8450)span>li>
            <li>味道不错<span>(6931)span>li>
            <li>质量不错<span>(5034)span>li>
            <li>洗衣效果好<span>(5003)span>li>
            <li>洗涤效果好<span>(4834)span>li>
            <li>洗衣服干净<span>(4712)span>li>
          ul>
        div>
        <div class="btns">
          您可对已购商品进行评价
          <a class="btn_comment" href="#">发评价拿京豆a>
          <b>前五名可获双倍京豆b><a href="#">[规则]a>
        div>
      div>
    div>

    
    <div id="comment_list">
      <ul class="main_tabs">
        <li class="current"><a href="#">全部评价(49639)a>li>
        <li><a href="#">好评(48232)a>li>
        <li><a href="#">中评(992)a>li>
        <li><a href="#">差评(415)a>li>
        <li><a href="#">有晒单的评价(962)a>li>
      ul>
      
      <div id="comment_0">
        <div class="comment_item">
          <ul>
            <li><a href="#"><img src="images/user_01.jpg"/>a>li>
            <li>kkngj2008li>
            <li><b>金牌会员b><span>广东span>li>
          ul>
          <div>
            <div class="topic">
              <p class="star3">p>
              <a href="#">2014-08-12 19:01a>
            div>
            <table>
              <tr>
                <td class="comment_option">标签：td>
                <td class="comment_tag">
                  <span>比洗衣粉好span>
                  <span>去污能力强span>
                td>
              tr>
              <tr>
                <td class="comment_option">心得：td>
                <td>味道清香..价格也比较公道td>
              tr>
              <tr>
                <td class="comment_option">用户晒单：td>
                <td class="comment_show">
                  <a href="#"><img src="images/products/show_01.jpg"/>a>
                  <a href="#"><img src="images/products/show_02.jpg"/>a>
                  <a href="#"><img src="images/products/show_03.jpg"/>a>
                  共<b>3b>张图片<a href="#">查看晒单>a>
                td>
              tr>
              <tr>
                <td class="comment_option">购买日期：td>
                <td>2014-08-11td>
              tr>
            table>
            <p class="btns">
              <a href="#">有用(3)a>
              <a href="#">回复(0)a>
            p>
            <div class="reply_lz">
              <div class="reply_form">
                <p>回复<a>kkngj2008 a>：p>
                <input class="txt" type="text"/>
                <input class="btn" type="button" value="回复"/>
              div>
            div>
            <div class="comment_reply">
              <span>22span>
              <p><b>Koolmengb>回复<b>SE7EN_Garyb>：p>
              <h4>牛也没那么厉害！你真牛Xh4>
              <div>
                <b>2014-12-16 15:09b>
                <a>回复a>
              div>
            div>
            <div class="reply_lz">
              <div class="reply_form">
                <p>回复<a>kkngj2008 a>：p>
                <input class="txt" type="text"/>
                <input class="btn" type="button" value="回复"/>
              div>
            div>
            <div class="comment_reply">
              <span>21span>
              <p><b>Koolmengb>回复<b>SE7EN_Garyb>：p>
              <h4>牛也没那么厉害！你真牛Xh4>
              <div>
                <b>2014-12-16 15:09b>
                <a>回复a>
              div>
            div>
            <div class="reply_lz">
              <div class="reply_form">
                <p>回复<a>kkngj2008 a>：p>
                <input class="txt" type="text"/>
                <input class="btn" type="button" value="回复"/>
              div>
            div>
          div>
          <div class="corner">div>
        div>
        <div class="comment_item">
          <ul>
            <li><a href="#"><img src="images/user_01.jpg"/>a>li>
            <li>kkngj2008li>
            <li><b>金牌会员b><span>广东span>li>
          ul>
          <div>
            <div class="topic">
              <p class="star4">p>
              <a href="#">2014-08-12 19:01a>
            div>
            <table>
              <tr>
                <td class="comment_option">标签：td>
                <td class="comment_tag">
                  <span>比洗衣粉好span>
                  <span>去污能力强span>
                td>
              tr>
              <tr>
                <td class="comment_option">心得：td>
                <td>味道清香..价格也比较公道td>
              tr>
              <tr>
                <td class="comment_option">用户晒单：td>
                <td class="comment_show">
                  <a href="#"><img src="images/products/show_01.jpg"/>a>
                  <a href="#"><img src="images/products/show_02.jpg"/>a>
                  <a href="#"><img src="images/products/show_03.jpg"/>a>
                  共<b>3b>张图片<a href="#">查看晒单>a>
                td>
              tr>
              <tr>
                <td class="comment_option">购买日期：td>
                <td>2014-08-11td>
              tr>
            table>
            <p class="btns">
              <a href="#">有用(3)a>
              <a href="#">回复(0)a>
            p>
            <div class="reply_lz">
              <div class="reply_form">
                <p>回复<a>kkngj2008 a>：p>
                <input class="txt" type="text"/>
                <input class="btn" type="button" value="回复"/>
              div>
            div>
            <div class="comment_reply">
              <span>22span>
              <p><b>Koolmengb>回复<b>SE7EN_Garyb>：p>
              <h4>牛也没那么厉害！你真牛Xh4>
              <div>
                <b>2014-12-16 15:09b>
                <a>回复a>
              div>
            div>
            <div class="reply_lz">
              <div class="reply_form">
                <p>回复<a>kkngj2008 a>：p>
                <input class="txt" type="text"/>
                <input class="btn" type="button" value="回复"/>
              div>
            div>
          div>
          <div class="corner">div>
        div>
        <div class="comment_item">
          <ul>
            <li><a href="#"><img src="images/user_01.jpg"/>a>li>
            <li>kkngj2008li>
            <li><b>金牌会员b><span>广东span>li>
          ul>
          <div>
            <div class="topic">
              <p class="star5">p>
              <a href="#">2014-08-12 19:01a>
            div>
            <table>
              <tr>
                <td class="comment_option">标签：td>
                <td class="comment_tag">
                  <span>比洗衣粉好span>
                  <span>去污能力强span>
                td>
              tr>
              <tr>
                <td class="comment_option">心得：td>
                <td>味道清香..价格也比较公道td>
              tr>
              <tr>
                <td class="comment_option">购买日期：td>
                <td>2014-08-11td>
              tr>
            table>
            <p class="btns">
              <a href="#">有用(3)a>
              <a href="#">回复(0)a>
            p>
            <div class="reply_lz">
              <div class="reply_form">
                <p>回复<a>kkngj2008 a>：p>
                <input class="txt" type="text"/>
                <input class="btn" type="button" value="回复"/>
              div>
            div>
            <div class="comment_reply">
              <span>22span>
              <p><b>Koolmengb>回复<b>SE7EN_Garyb>：p>
              <h4>牛也没那么厉害！你真牛Xh4>
              <div>
                <b>2014-12-16 15:09b>
                <a>回复a>
              div>
            div>
            <div class="reply_lz">
              <div class="reply_form">
                <p>回复<a>kkngj2008 a>：p>
                <input class="txt" type="text"/>
                <input class="btn" type="button" value="回复"/>
              div>
            div>
            <div class="comment_reply">
              <span>21span>
              <p><b>Koolmengb>回复<b>SE7EN_Garyb>：p>
              <h4>牛也没那么厉害！你真牛Xh4>
              <div>
                <b>2014-12-16 15:09b>
                <a>回复a>
              div>
            div>
            <div class="reply_lz">
              <div class="reply_form">
                <p>回复<a>kkngj2008 a>：p>
                <input class="txt" type="text"/>
                <input class="btn" type="button" value="回复"/>
              div>
            div>
          div>
          <div class="corner">div>
        div>
      div>
      
      <div>
        <a class="comment_show_all" href="#">[查看全部评价]a>
        <div id="pages">
          <a class="current">1a>
          <a href="#">2a>
          <a href="#">3a>
          <a href="#">4a>
          <a href="#">5a>
          <a href="#">6a>
          <a href="#">....a>
          <a href="#">3421a>
          <a href="#">下一页a>
        div>
      div>
    div>

    <div class="clear">div>
    
    <div id="consult">
      <ul class="main_tabs">
        <li class="current"><a href="#">全部购买咨询a>li>
        <li><a href="#">商品咨询a>li>
        <li><a href="#">库存配送a>li>
        <li><a href="#">支付a>li>
        <li><a href="#">发票保修a>li>
        <li><a href="#">支付帮助a>li>
        <li><a href="#">配送帮助a>li>
        <li><a href="#">常见问题a>li>
        <li>
          <input type="text" id="txt_consult_search" value="请输入关键词"/>
          <input type="button" value="搜索" id="btn_consult_search"/>
        li>
        <li>
          <a id="add_consult" href="#">发表咨询a>
        li>
      ul>
      <div class="m_content">
        <b>温馨提示：b>因厂家更改产品包装、产地或者更换随机附件等没有任何提前通知，且每位咨询者购买情况、提问时间等不同，为此以下回复仅对提问者3天内有效，其他网友仅供参考！<br/>若由此给您带来不便请多多谅解，谢谢！
      div>
      <div id="consult_0">
        <div id="consult_result">
          <p>共搜索到<span>14span>条相关咨询<a>返回a>p>
          <h4>声明：以下回复仅对提问者3天内有效，其他网友仅供参考！h4>
        div>
        <div class="consult_item">
          <p>网        友：<b>135*****193_pb><span>2014-11-23 12:27:13span>p>
          <ul class="consult_ask">
            <li class="consult_title">咨询内容：li>
            <li><a href="#">怎么买呀？a>li>
          ul>
          <ul class="consult_answer">
            <li class="consult_title">京东回复：li>
            <li>您好！请您于京东客服联系。感谢您对京东的支持！祝您购物愉快！li>
            <li class="consult_answer_time">2014-11-24 15:25:59li>
          ul>

        div>
        <div class="consult_item">
          <p>网        友：<b>jd_158998lubb><span>2014-11-11 14:19:00span>p>
          <ul class="consult_ask">
            <li class="consult_title">咨询内容：li>
            <li><a href="#">请问一箱里面装几瓶?a>li>
          ul>
          <ul class="consult_answer">
            <li class="consult_title">京东回复：li>
            <li>您好！4瓶/箱， 感谢您对京东的支持！祝您购物愉快！li>
            <li class="consult_answer_time">2014-11-11 16:44:06li>
          ul>

        div>
        <div class="consult_item">
          <p>网        友：<b>jd_158998lubb><span>2014-11-11 14:19:00span>p>
          <ul class="consult_ask">
            <li class="consult_title">咨询内容：li>
            <li><a href="#">请问一箱里面装几瓶?a>li>
          ul>
          <ul class="consult_answer">
            <li class="consult_title">京东回复：li>
            <li>您好！4瓶/箱， 感谢您对京东的支持！祝您购物愉快！li>
            <li class="consult_answer_time">2014-11-11 16:44:06li>
          ul>

        div>
      div>
      <div id="consult_extra">
        购买之前，如有问题，请咨询<a class="offline" href="#">留言咨询a>，或<a href="#"> [发表咨询]a>
        <p>共<span>101span>条 <a href="#">浏览所有咨询信息>>a>p>
      div>
    div>

    
    <div id="discuss">
      <ul class="main_tabs">
        <li class="current"><a href="#">网友讨论圈a>li>
        <li><a href="#">晒单帖a>li>
        <li><a href="#">讨论帖a>li>
        <li><a href="#">问答贴a>li>
        <li><a href="#">圈子贴a>li>
      ul>
      <table id="discuss-datas">
        <tr class="header">
          <td class="col1">主题td>
          <td class="col2">回复/浏览td>
          <td class="col3">作者td>
          <td class="col4">时间td>
        tr>
        <tbody>
        <tr>
          <td class="col1">
            <b class="topic shai">b>
            <a href="#">好大一瓶，不错a>
          td>
          <td>0/0td>
          <td>
            <a href="#">2001年冬天a>
          td>
          <td>2014-11-19td>
        tr>
        <tr>
          <td class="col1">
            <b class="topic lun">b>
            <a href="#">洗衣液超级划算，活动给力a>
          td>
          <td>0/0td>
          <td>
            <a href="#">xpx2001a>
          td>
          <td>2014-11-18td>
        tr>
        <tr>
          <td class="col1">
            <b class="topic lun">b>
            <a href="#">洗衣液超级划算，活动给力a>
          td>
          <td>0/0td>
          <td>
            <a href="#">xpx2001a>
          td>
          <td>2014-11-18td>
        tr>
        <tr>
          <td class="col1">
            <b class="topic shai">b>
            <a href="#">好大一瓶，不错a>
          td>
          <td>0/0td>
          <td>
            <a href="#">2001年冬天a>
          td>
          <td>2014-11-19td>
        tr>
        tbody>
      table>
      <div class="discuss_extra">
        <div class="newdiscuss">
          <span>有问题要与其他用户讨论？span>
          <a href="#">[发表帖子]a>
        div>
        <div class="totaldiscuss">
          <span>共900个话题span>
          <a href="#">浏览全部话题>>a>
        div>
      div>

    div>
  div>
div>
<div class="clear">div>


<div id="footmark">
  <div id="may_like">
    <p>
      <span class="lf">根据浏览猜你喜欢span>
      <b class="rt">换一批b>
    p>
    <ul>
      <li>
        <div><a href="#"><img src="Images/products/p001.jpg"/>a>div>
        <p><a href="#">卫新 香薰洗衣液4.26kg （索菲亚玫瑰）a>p>
        <h5><a href="#">(已有46242人评价)a>h5>
        <h6>￥49.90h6>
      li>
      <li>
        <div><a href="#"><img src="Images/products/p002.jpg"/>a>div>
        <p><a href="#">威露士（Walch） 衣物除菌液（阳光清香）2.5L送1.5La>p>
        <h5><a href="#">(已有46242人评价)a>h5>
        <h6>￥49.90h6>
      li>
      <li>
        <div><a href="#"><img src="Images/products/p003.jpg"/>a>div>
        <p><a href="#">威露士（Walch） 衣物除菌液（阳光清香）2.5L送1.5La>p>
        <h5><a href="#">(已有46242人评价)a>h5>
        <h6>￥49.90h6>
      li>
      <li>
        <div><a href="#"><img src="Images/products/p004.jpg"/>a>div>
        <p><a href="#">卫新 香薰洗衣液4.26kg （索菲亚玫瑰）a>p>
        <h5><a href="#">(已有46242人评价)a>h5>
        <h6>￥49.90h6>
      li>
      <li>
        <div><a href="#"><img src="Images/products/p005.jpg"/>a>div>
        <p><a href="#">卫新 香薰洗衣液4.26kg （索菲亚玫瑰）a>p>
        <h5><a href="#">(已有46242人评价)a>h5>
        <h6>￥49.90h6>
      li>
    ul>
  div>
  <div id="recent_view">
    <p>
      <span class="lf">最近浏览span>
      <b class="rt">更多浏览记录b>
    p>
    <ul>
      <li>
        <div><a href="#"><img src="Images/products/p_small_001.jpg"/>a>div>
        <h6>￥49.90h6>
      li>
      <li>
        <div><a href="#"><img src="Images/products/p_small_002.jpg"/>a>div>
        <h6>￥49.90h6>
      li>
      <li>
        <div><a href="#"><img src="Images/products/p_small_003.jpg"/>a>div>
        <h6>￥49.90h6>
      li>
      <li>
        <div><a href="#"><img src="Images/products/p_small_004.jpg"/>a>div>
        <h6>￥49.90h6>
      li>
      <li>
        <div><a href="#"><img src="Images/products/p_small_005.jpg"/>a>div>
        <h6>￥49.90h6>
      li>
      <li>
        <div><a href="#"><img src="Images/products/p_small_006.jpg"/>a>div>
        <h6>￥49.90h6>
      li>
      <li>
        <div><a href="#"><img src="Images/products/p_small_007.jpg"/>a>div>
        <h6>￥49.90h6>
      li>
      <li>
        <div><a href="#"><img src="Images/products/p_small_008.jpg"/>a>div>
        <h6>￥49.90h6>
      li>
      <li>
        <div><a href="#"><img src="Images/products/p_small_009.jpg"/>a>div>
        <h6>￥49.90h6>
      li>
    ul>
  div>
div>
<div class="clear">div>


<div id="foot_box">
  <p class="shopping_guide">p>
  <ul>
    <li><b>购物指南b>li>
    <li><a href="#">购物流程a>li>
    <li><a href="#">会员介绍a>li>
    <li><a href="#">团购/机票a>li>
    <li><a href="#">常见问题a>li>
    <li><a href="#">大家电a>li>
    <li><a href="#">联系客服a>li>
  ul>
  <p class="send_type">p>
  <ul>
    <li><b>配送方式b>li>
    <li><a href="#">上门自提a>li>
    <li><a href="#">211限时达a>li>
    <li><a href="#">配送服务查询a>li>
    <li><a href="#">配送费收取标准a>li>
    <li><a href="#">海外配送a>li>
  ul>
  <p class="pay_type">p>
  <ul>
    <li><b>支付方式b>li>
    <li><a href="#">货到付款a>li>
    <li><a href="#">在线支付a>li>
    <li><a href="#">分期付款a>li>
    <li><a href="#">邮局汇款a>li>
    <li><a href="#">公司转账a>li>
  ul>
  <p class="sale_service">p>
  <ul>
    <li><b>售后服务b>li>
    <li><a href="#">售后政策a>li>
    <li><a href="#">价格保护a>li>
    <li><a href="#">退款说明a>li>
    <li><a href="#">返修/退换货a>li>
    <li><a href="#">取消订单a>li>
  ul>
  <p class="special_service">p>
  <ul>
    <li><b>特色服务b>li>
    <li><a href="#">夺宝岛a>li>
    <li><a href="#">DIY装机a>li>
    <li><a href="#">延保服务a>li>
    <li><a href="#">京东E卡a>li>
    <li><a href="#">节能补贴a>li>
    <li><a href="#">京东通信a>li>
  ul>
div>
<div class="clear">div>


<div id="footer">
  <div class="links"><a href="#">关于我们a>|<a href="#">联系我们a>|<a href="#">人才招聘a>|<a href="#">商家入驻a>|<a href="#">广告服务a>|<a
    href="#">手机京东a>|<a href="#">友情链接a>|<a href="#">销售联盟a>|<a href="#">京东社区a>|<a href="#">京东公益a>div>
  <div class="copyright">北京市公安局朝阳分局备案编号110105014669 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-非经营性-2011-0034<br/>
    <a href="#">音像制品经营许可证苏宿批005号 a> | 出版物经营许可证编号新出发(苏)批字第N-012号 | 互联网出版许可证编号新出网证(京)字150号<br/>
    <a href="#">网络文化经营许可证京网文[2011]0168-061号 a> Copyright © 2004-2014 京东JD.com 版权所有 <br/>
    京东旗下网站：
    <a href="#">English Sitea> <a href="#">拍拍网a> <a href="#">网银在线a>
  div>
  <div class="authentication">
    <a href=""><img src="images/jy.jpg" width="108" height="40"/>a>
    <a href=""><img src="images/kx.jpg" width="108" height="40"/>a>
    <a href=""><img src="images/cy.jpg" width="108" height="40"/>a>
    <a href=""><img src="images/cx.jpg" width="112" height="40"/>a>
  div>
div>

<script type="text/javascript" src="js/jquery-1.10.1.js">script>
<script type="text/javascript" src="js/app.js">script>
body>
html>


/*
 1. 鼠标移入显示,移出隐藏
 目标: 手机京东, 客户服务, 网站导航, 我的京东, 去购物车结算, 全部商品
 2. 鼠标移动切换二级导航菜单的切换显示和隐藏
 3. 输入搜索关键字, 列表显示匹配的结果
 4. 点击显示或者隐藏更多的分享图标
 5. 鼠标移入移出切换地址的显示隐藏
 6. 点击切换地址tab

 7. 鼠标移入移出切换显示迷你购物车
 8. 点击切换产品选项 (商品详情等显示出来)

 9. 点击向右/左, 移动当前展示商品的小图片
 10. 当鼠标悬停在某个小图上,在上方显示对应的中图
 11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域
 https://www.bilibili.com/video/BV114411G7xZ?p=54
 */

/*
1. 对哪个/些元素绑定什么监听?
2. 对哪个/些元素进行什么DOM操作?
 */
$(function () {

  showhide()
  hoverSubMenu()
  search()
  share()
  address()
  clickTabs()
  hoverMiniCart()
  clickProductTabs()
  moveMiniImg()
  hoverMiniImg()
  bigImg()

  /*
   11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域
   */
  function bigImg () {
    var $mediumImg = $('#mediumImg')//中图
    var $mask = $('#mask') // 小黄块
    var $maskTop = $('#maskTop')//事件span
    var $largeImgContainer = $('#largeImgContainer')//大图外侧span
    var $loading = $('#loading')
    var $largeImg = $('#largeImg')//大图
    var maskWidth = $mask.width()
    var maskHeight = $mask.height()
    var maskTopWidth = $maskTop.width()
    var maskTopHeight = $maskTop.height()

    $maskTop.hover(function () {// 进入，事件可以加在mediumImg上，不加在maskTop上
      $mask.show()

      // 动态加载对应的大图
      // images\products\product-s2-m.jpg
      // images/products/product-s2-l.jpg
      var src = $mediumImg.attr('src').replace('-m.', '-l.')
      $largeImg.attr('src', src)
      $largeImgContainer.show()
      // 绑定加载完成的监听
      $largeImg.on('load', function () { // 大图加载完成

        // 得到大图的尺寸
        var largeWidth = $largeImg.width()
        var largeHeight = $largeImg.height()

        // 给$largeImgContainer设置尺寸，实际尺寸一半
        $largeImgContainer.css({
          width: largeWidth/2,
          height: largeHeight/2
        })
        // 显示大图
        $largeImg.show()
        // 隐藏加载进度条
        $loading.hide()
        console.log($largeImg.width(), $largeImg.height())

        //鼠标移动的监听
        $maskTop.mousemove(function (event) {//event在这
          /*
          1. 移动小黄块
          2. 移动大图
           */
          /*1. 移动小黄块*/
          //计算left/top
          var left = 0
          var top = 0
          // 事件的坐标
          var eventLeft = event.offsetX
          var eventTop = event.offsetY
          left = eventLeft - maskWidth/2
          top = eventTop - maskHeight/2
          // left在[0, maskTopWidth-maskWidth]
          //作范围限制
          if(left<0) {
            left = 0
          } else if(left>maskTopWidth-maskWidth) {
            left = maskTopWidth-maskWidth
          }
          // top在[0, maskTopHeight-maskHeight]
          if(top<0) {
            top = 0
          } else if(top>maskTopHeight-maskHeight) {
            top = maskTopHeight-maskHeight
          }
          //给$mask重新定位
          $mask.css({
            left: left,
            top: top
          })

          /*2. 移动大图*/
          // 得到大图的坐标，比例
          left = -left *  largeWidth / maskTopWidth
          top = -top * largeHeight / maskTopHeight
          // 设置大图的坐标
          $largeImg.css({
            left: left,
            top: top
          })
        })
      })

    }, function () {
      $mask.hide()
      $largeImgContainer.hide()
      $largeImg.hide()
    })
  }

  /*
   10. 当鼠标悬停在某个小图上,在上方显示对应的中图
   */
  function hoverMiniImg () {
    $('#icon_list>li').hover(function () {
      // this.children()[0].className = 'hoveredThumb'
      var $img = $(this).children()
      $img.addClass('hoveredThumb')
      //显示对应的中图
      var src = $img.attr('src').replace('.jpg', '-m.jpg')
      $('#mediumImg').attr('src', src)
    }, function () {
      $(this).children().removeClass('hoveredThumb')
    })
  }

  /*
   9. 点击向右/左, 移动当前展示商品的小图片
   */
  function moveMiniImg () {
    var $as = $('#preview>h1>a')
    var $backward = $as.first()
    var $forward = $as.last()
    var $Ul = $('#icon_list')
    var SHOW_COUNT = 5
    var imgCount = $Ul.children('li').length
    var moveCount = 0 //移动的次数(向右为正, 向左为负)
    var liWidth = $Ul.children(':first').width()

    // 初始化更新
    if(imgCount>SHOW_COUNT) {
      // $forward[0].className = 'forward'
      $forward.attr('class', 'forward')
    }

    // 给向右的按钮绑定点击监听
    $forward.click(function () {
      // 判断是否需要移动, 如果不需要直接结束，不然会一直向右出现空白
      if(moveCount===imgCount-SHOW_COUNT) {
        return;
      }
      moveCount++
      //更新向左的按钮
      $backward.attr('class', 'backward')
      // 更新向右的按钮
      if(moveCount===imgCount-SHOW_COUNT) {
        $forward.attr('class', 'forward_disabled')
      }
      // 移动ul
      $Ul.css({
        left: -moveCount * liWidth
      })
    })

    // 给向左的按钮绑定点击监听
    $backward.click(function () {
      // 判断是否需要移动, 如果不需要直接结束
      if(moveCount===0) {
        return
      }
      moveCount--
      //更新向右的按钮
      $forward.attr('class', 'forward')
      // 更新向左的按钮
      if(moveCount===0) {
        $backward.attr('class', 'backward_disabled')
      }
      // 移动ul
      $Ul.css({
        left: -moveCount * liWidth
      })
    })
  }

  /*
   8. 点击切换产品选项 (商品详情等显示出来)
   */
  function clickProductTabs () {
    var $lis =  $('#product_detail>ul>li')
    var $contents = $('#product_detail>div:gt(0)')
    $lis.click(function () {
      $lis.removeClass('current')//全部移除
      this.className = 'current'
      //隐藏所有$contents
      $contents.hide()
      //显示当前对应的content
      var index = $(this).index()
      // $contents.eq(index).show();//注意区分jQ对象
      $contents[index].style.display = 'block'//dom
    })
  }

  /*
   7. 鼠标移入移出切换显示迷你购物车
   */
  function hoverMiniCart () {
    $('#minicart').hover(function () {
      this.className = 'minicart'
      $(this).children(':last').show()
    }, function () {
      this.className = ''
      $(this).children(':last').hide()
    })
  }

  /*
   6. 点击切换地址tab
   */
  function clickTabs() {
    $('#store_tabs>li').click(function () {
      $('#store_tabs>li').removeClass('hover')
      // $('#store_tabs>li').attr('class')
      this.className = 'hover'
      // $(this).addClass('hover')
    })
  }

  /*
   5. 鼠标移入移出切换地址的显示隐藏
   */
  function address () {
    var $select = $('#store_select')

    $select.hover(function () {
        $(this).children(':gt(0)').show()//这样写是为了提高搜索效率
      }, function () {
        $(this).children(':gt(0)').hide()
      })
      .children(':last')
      .click(function () {
        $select.children(':gt(0)').hide()// 不能用$(this)
      })
  }

  /*
   4. 点击显示或者隐藏更多的分享图标
   */
  function share () {
    var isOpen = false //标识当前的状态(初始为关闭)
    var $shareMore = $('#shareMore')//先保存一份，这叫缓存
    var $parent = $shareMore.parent()
    var $as = $shareMore.prevAll('a:lt(2)')//顺序是反的，从近往远
    var $b = $shareMore.children()
    $shareMore.click(function () {
      if(isOpen) { // 去关闭
        isOpen = false
        $parent.css('width', 155)
        $as.hide()
        $b.removeClass('backword')
      } else { // 去打开
        isOpen = true
        $parent.css('width', 200)
        $as.show()
        $b.addClass('backword')
      }
      // isOpen = !isOpen
    })
  }

  /*
   3. 输入搜索关键字, 列表显示匹配的结果
   */
  function search () {
    $('#txtSearch')
      .on('keyup focus', function () {
        // 如果输入框有文本才显示列表，trim消除空格
        var txt = this.value.trim()//$.trim(this.value)
        if(txt) {
          $('#search_helper').show()
        }
      })
      .blur(function () {
        // 隐藏列表
        $('#search_helper').hide()
      })
  }

  /*
   2. 鼠标移动切换二级导航菜单的切换显示和隐藏
   */
  function hoverSubMenu () {
    $('#category_items>div').hover(function () {
      $(this).children(':last').show()
    }, function () {
      $(this).children(':last').hide()
    })
  }

  /*
   1. 鼠标移入显示,移出隐藏
   目标: 手机京东, 客户服务, 网站导航, 我的京东, 去购物车结算, 全部商品
   */
  function showhide () {
    $('[name=show_hide]').hover(function () { // 显示
      var id = this.id + '_items'
      $('#'+id).show()
    }, function () {// 隐藏
      var id = this.id + '_items'
      $('#'+id).hide()
    })
  }
})`在这里插入代码片`

你可能感兴趣的:(javascript,html,jquery)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • html 中如何使用 uniapp 的部分方法 某公司摸鱼前端 htmluni-app前端
    示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
  • 四章-32-点要素的聚合 彩云飘过
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 详解：如何设计出健壮的秒杀系统？ 夜空_2cd3
    作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 斟一小组鸡血视频 和自己一起成长
    http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
  • Dockerfile命令详解之 FROM 清风怎不知意 容器化java前端javascript
    许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
    【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • spring mvc @RequestBody String类型参数 zoyation spring-mvcspringmvc
    通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
  • ubuntu安装opencv最快的方法 Derek重名了
    最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
  • 处理标签包裹的字符串，并取出前250字符 周bro 前端javascript开发语言
    //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • h5小游戏定制开发 红匣子实力推荐
    随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 非关系型数据库 天秤-white nosql
    一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大，单个数据库完全足够。那时候更多使用的静态网页html，服务器根本没有太大压力。这时候网站的瓶颈是什么？-数据量如果太大，一个机器放不下。-数据量太大需要建立数据的索引（B+Tree），一个服务器内存放不下。-访问量读写混合，一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分（读写分离）。网站80%
  • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
    Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
  • JAVA中的Enum 周凡杨 javaenum枚举
    Enum是计算机编程语言中的一种数据类型---枚举类型。 在实际问题中，有些变量的取值被限定在一个有限的范围内。     例如，一个星期内只有七天 我们通常这样实现上面的定义： public String monday; public String tuesday; public String wensday; public String thursday
  • 赶集网mysql开发36条军规 Bill_chen mysql业务架构设计mysql调优mysql性能优化
    (一)核心军规 (1)不在数据库做运算    cpu计算务必移至业务层； (2)控制单表数据量    int型不超过1000w，含char则不超过500w；    合理分表；    限制单库表数量在300以内； (3)控制列数量    字段少而精，字段数建议在20以内
  • Shell test命令 daizj shell字符串test数字文件比较
    Shell test命令 Shell中的 test 命令用于检查某个条件是否成立，它可以进行数值、字符和文件三个方面的测试。 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于则为真 -lt 小于则为真 -le 小于等于则为真 实例演示： num1=100 num2=100if test $[num1]
  • XFire框架实现WebService(二) 周凡杨 javawebservice
       有了XFire框架实现WebService(一)，就可以继续开发WebService的简单应用。 Webservice的服务端(WEB工程)： 两个java bean类： Course.java    package cn.com.bean; public class Course {     private
  • 重绘之画图板 朱辉辉33 画图板
           上次博客讲的五子棋重绘比较简单，因为只要在重写系统重绘方法paint（）时加入棋盘和棋子的绘制。这次我想说说画图板的重绘。        画图板重绘难在需要重绘的类型很多，比如说里面有矩形，园，直线之类的，所以我们要想办法将里面的图形加入一个队列中，这样在重绘时就
  • Java的IO流 西蜀石兰 java
    刚学Java的IO流时，被各种inputStream流弄的很迷糊，看老罗视频时说想象成插在文件上的一根管道，当初听时觉得自己很明白，可到自己用时，有不知道怎么代码了。。。 每当遇到这种问题时，我习惯性的从头开始理逻辑，会问自己一些很简单的问题，把这些简单的问题想明白了，再看代码时才不会迷糊。 IO流作用是什么？ 答：实现对文件的读写，这里的文件是广义的； Java如何实现程序到文件
  • No matching PlatformTransactionManager bean found for qualifier 'add' - neither 林鹤霄
    java.lang.IllegalStateException: No matching PlatformTransactionManager bean found for qualifier 'add' - neither qualifier match nor bean name match!   网上找了好多的资料没能解决，后来发现：项目中使用的是xml配置的方式配置事务，但是
  • Row size too large (> 8126). Changing some columns to TEXT or BLOB aigo column
    原文：http://stackoverflow.com/questions/15585602/change-limit-for-mysql-row-size-too-large   异常信息： Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DYNAM
  • JS 格式化时间 alxw4616 JavaScript
    /** * 格式化时间 2013/6/13 by 半仙 [email protected] * 需要 pad 函数 * 接收可用的时间值. * 返回替换时间占位符后的字符串 * * 时间占位符:年 Y 月 M 日 D 小时 h 分 m 秒 s 重复次数表示占位数 * 如 YYYY 4占4位 YY 占2位<p></p> * MM DD hh mm
  • 队列中数据的移除问题 百合不是茶 队列移除
         队列的移除一般都是使用的remov();都可以移除的,但是在昨天做线程移除的时候出现了点问题,没有将遍历出来的全部移除,  代码如下;      // package com.Thread0715.com; import java.util.ArrayList; public class Threa
  • Runnable接口使用实例 bijian1013 javathreadRunnablejava多线程
    Runnable接口 a.       该接口只有一个方法：public void run(); b.       实现该接口的类必须覆盖该run方法 c.       实现了Runnable接口的类并不具有任何天
  • oracle里的extend详解 bijian1013 oracle数据库extend
    扩展已知的数组空间，例： DECLARE TYPE CourseList IS TABLE OF VARCHAR2(10); courses CourseList; BEGIN -- 初始化数组元素，大小为3 courses := CourseList('Biol 4412 ', 'Psyc 3112 ', 'Anth 3001 '); --
  • 【httpclient】httpclient发送表单POST请求 bit1129 httpclient
    浏览器Form Post请求 浏览器可以通过提交表单的方式向服务器发起POST请求，这种形式的POST请求不同于一般的POST请求 1. 一般的POST请求，将请求数据放置于请求体中，服务器端以二进制流的方式读取数据，HttpServletRequest.getInputStream()。这种方式的请求可以处理任意数据形式的POST请求，比如请求数据是字符串或者是二进制数据 2. Form
  • 【Hive十三】Hive读写Avro格式的数据 bit1129 hive
     1. 原始数据 hive> select * from word; OK 1 MSN 10 QQ 100 Gtalk 1000 Skype      2. 创建avro格式的数据表   hive> CREATE TABLE avro_table(age INT, name STRING)STORE
  • nginx+lua+redis自动识别封解禁频繁访问IP ronin47
    在站点遇到攻击且无明显攻击特征，造成站点访问慢，nginx不断返回502等错误时，可利用nginx+lua+redis实现在指定的时间段 内，若单IP的请求量达到指定的数量后对该IP进行封禁，nginx返回403禁止访问。利用redis的expire命令设置封禁IP的过期时间达到在 指定的封禁时间后实行自动解封的目的。 一、安装环境： CentOS x64 release 6.4(Fin
  • java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历 bylijinnan java
    import java.util.LinkedList; import java.util.List; import java.util.Stack; public class BinTreeTraverse { //private int[] array={ 1, 2, 3, 4, 5, 6, 7, 8, 9 }; private int[] array={ 10,6,
  • Spring源码学习-XML 配置方式的IoC容器启动过程分析 bylijinnan javaspringIOC
    以FileSystemXmlApplicationContext为例，把Spring IoC容器的初始化流程走一遍： ApplicationContext context = new FileSystemXmlApplicationContext ("C:/Users/ZARA/workspace/HelloSpring/src/Beans.xml&q
  • [科研与项目]民营企业请慎重参与军事科技工程 comsci 企业
         军事科研工程和项目 并非要用最先进，最时髦的技术，而是要做到“万无一失”    而民营科技企业在搞科技创新工程的时候，往往考虑的是技术的先进性，而对先进技术带来的风险考虑得不够，在今天提倡军民融合发展的大环境下，这种“万无一失”和“时髦性”的矛盾会日益凸显。。。。。。所以请大家在参与任何重大的军事和政府项目之前，对
  • spring 定时器-两种方式 cuityang springquartz定时器
    方式一： 间隔一定时间 运行 <bean id="updateSessionIdTask" class="com.yang.iprms.common.UpdateSessionTask" autowire="byName" /> <bean id="updateSessionIdSchedule
  • 简述一下关于BroadView站点的相关设计 damoqiongqiu view
    终于弄上线了，累趴，戳这里http://www.broadview.com.cn   简述一下相关的技术点   前端：jQuery+BootStrap3.2+HandleBars，全站Ajax（貌似对SEO的影响很大啊！怎么破？），用Grunt对全部JS做了压缩处理，对部分JS和CSS做了合并（模块间存在很多依赖，全部合并比较繁琐，待完善）。   后端：U
  • 运维 PHP问题汇总 dcj3sjt126com windows2003
    1、Dede(织梦)发表文章时,内容自动添加关键字显示空白页 解决方法： 后台>系统>系统基本参数>核心设置>关键字替换（是/否），这里选择“是”。 后台>系统>系统基本参数>其他选项>自动提取关键字，这里选择“是”。   2、解决PHP168超级管理员上传图片提示你的空间不足 网站是用PHP168做的，反映使用管理员在后台无法
  • mac 下 安装php扩展 - mcrypt dcj3sjt126com PHP
    MCrypt是一个功能强大的加密算法扩展库，它包括有22种算法，phpMyAdmin依赖这个PHP扩展，具体如下： 下载并解压libmcrypt-2.5.8.tar.gz。 在终端执行如下命令： tar zxvf libmcrypt-2.5.8.tar.gz cd libmcrypt-2.5.8/ ./configure --disable-posix-threads --
  • MongoDB更新文档 [四] eksliang mongodbMongodb更新文档
    MongoDB更新文档 转载请出自出处：http://eksliang.iteye.com/blog/2174104 MongoDB对文档的CURD，前面的博客简单介绍了，但是对文档更新篇幅比较大，所以这里单独拿出来。 语法结构如下： db.collection.update( criteria, objNew, upsert, multi) 参数含义 参数   
  • Linux下的解压，移除，复制，查看tomcat命令 y806839048 tomcat
    重复myeclipse生成webservice有问题删除以前的，干净 1、先切换到：cd usr/local/tomcat5/logs 2、tail -f catalina.out 3、这样运行时就可以实时查看运行日志了 Ctrl+c 是退出tail命令。 有问题不明的先注掉   cp /opt/tomcat-6.0.44/webapps/g
  • Spring之使用事务缘由(3-XML实现) ihuning spring
      用事务通知声明式地管理事务   事务管理是一种横切关注点。为了在 Spring 2.x 中启用声明式事务管理，可以通过 tx Schema 中定义的 <tx:advice> 元素声明事务通知，为此必须事先将这个 Schema 定义添加到 <beans> 根元素中去。声明了事务通知后，就需要将它与切入点关联起来。由于事务通知是在 <aop:
  • GCD使用经验与技巧浅谈 啸笑天 GC
    前言 GCD(Grand Central Dispatch)可以说是Mac、iOS开发中的一大“利器”，本文就总结一些有关使用GCD的经验与技巧。 dispatch_once_t必须是全局或static变量 这一条算是“老生常谈”了，但我认为还是有必要强调一次，毕竟非全局或非static的dispatch_once_t变量在使用时会导致非常不好排查的bug，正确的如下： 1
  • linux（Ubuntu）下常用命令备忘录1 macroli linux工作ubuntu
    在使用下面的命令是可以通过--help来获取更多的信息1,查询当前目录文件列表：ls ls命令默认状态下将按首字母升序列出你当前文件夹下面的所有内容，但这样直接运行所得到的信息也是比较少的，通常它可以结合以下这些参数运行以查询更多的信息：  ls / 显示/.下的所有文件和目录  ls -l 给出文件或者文件夹的详细信息 ls -a 显示所有文件，包括隐藏文
  • nodejs同步操作mysql qiaolevip 学习永无止境每天进步一点点mysqlnodejs
    // db-util.js var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit : 10, host: 'localhost', user: 'root', password: '', database: 'test', port: 3306 });
  • 一起学Hive系列文章 superlxw1234 hiveHive入门
      [一起学Hive]系列文章 目录贴，入门Hive，持续更新中。   [一起学Hive]之一—Hive概述，Hive是什么 [一起学Hive]之二—Hive函数大全-完整版 [一起学Hive]之三—Hive中的数据库(Database)和表(Table) [一起学Hive]之四-Hive的安装配置 [一起学Hive]之五-Hive的视图和分区 [一起学Hive
  • Spring开发利器：Spring Tool Suite 3.7.0 发布 wiselyman spring
    Spring Tool Suite(简称STS)是基于Eclipse，专门针对Spring开发者提供大量的便捷功能的优秀开发工具。   在3.7.0版本主要做了如下的更新：   将eclipse版本更新至Eclipse Mars 4.5 GA Spring Boot(JavaEE开发的颠覆者集大成者，推荐大家学习)的配置语言YAML编辑器的支持(包含自动提示，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他