<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>农产品商城</title> </head> <body style="margin:0px auto;"> <div style="height:40px;background-color:#f1f1f1;"> <div style="width: 1500px;margin: 0 auto;line-height: 40px"> <div style="float:left">*收藏本站</div> <div style="float:right"> <span>登录 |</span> <span>注册 |</span> <span>我的订单 |</span> <span>我的收藏 |</span> <span>VIP会员俱乐部 |</span> <span>客户服务 |</span> <span>关注 |</span> <span>手机版</span> </div> </div> </div> <div style="height:120px;"> <div style="height:100%;width:20%;float: right;"> <div style="border:1px solid #000;background-color:#f1f1f1;height:40px;width:150px;margin: 45px auto"> <div style="margin-left: 35px;line-height: 40px"> <div style="margin-left:auto;line-height: 40px;float: left">购物车</div> <div style="color:red;margin-left:auto;line-height: 40px;float: left">2</div> <div style="margin-left:auto;line-height: 40px;float: left">件</div> </div> </div> </div> <div style="height:100%;width:60%;float: right;"> <div style="height:100%;width:40%;float: left;"> <img src="image/1.png" style="margin-top:10px;height: 100px;width: auto"> </div> <div style="height:100%;width:60%;float: right;"> <div style="height: 60%;width:100%;"> <div style="width: 70%;float: left;margin-top: 45px;"> <input type="text" style="width:99.5%;height: 40px;"/> </div> <div style="width: 30%;float: left;margin-top: 45px;"> <input type="button" value='搜索' style="width: 100%;height: 45px;"/> </div> <div style="clear: both"></div> </div> <div style="height: 40%;width:100%;margin-top: 20px;"> <label>热门搜索：火龙果 柚子 西瓜</label> </div> </div> <div style="clear: both"></div> </div> </div> <div style="height:40px;background-color:red;"> <div style="float: left;height:100%;width: 5%;"> </div> <div style="float: left;height:100%;width: 15%;"> <div style="color:#f1f1f1;width: 100%;margin-left: 60px;line-height: 40px">全部商品分类</div> </div> <div style="float: left;height:100%;width: 80%;"> <div style="width: 75%;float: left;line-height: 40px"> <div style="width: auto;float: left;margin-right: 35px;color:#f1f1f1;">首页</div> <div style="width: auto;float: left;margin-right: 35px;color:#f1f1f1;">网上超市</div> <div style="width: auto;float: left;margin-right: 35px;color:#f1f1f1;">水果超市</div> <div style="width: auto;float: left;margin-right: 35px;color:#f1f1f1;">便利店</div> <div style="width: auto;float: left;margin-right: 35px;color:#f1f1f1;">批发</div> <div style="width: auto;float: left;margin-right: 35px;color:#f1f1f1;">代理商</div> </div> <div style="width: 25%;float: left;line-height: 40px"> <div style="width: auto;float: right;margin-right: 35px;color:#f1f1f1;">淘宝</div> <div style="width: auto;float: right;margin-right: 35px;color:#f1f1f1;">天猫</div> <div style="width: auto;float: right;margin-right: 35px;color:#f1f1f1;">京东</div> </div> </div> </div> <div style="height:800px;"> <div style="float: left;height:100%;width: 5%;"> </div> <div style="width:15%;height:100%;float: left;"> <div style="border: 2px solid #E3E3E3;width:100%;height:420px;float: left;"> <div style="height:70px;width:100%;border-bottom: 1px solid #E3E3E3;"> <div style="height:50%;width:100%;margin-left: 15px;line-height: 35px;font-size: 20px;font-weight:900;">南方水果</div> <div style="height:50%;width:100%;margin-left: 15px;line-height: 35px">杏子 荔枝 猕猴桃</div> </div> <div style="height:70px;width:100%;border-bottom: 1px solid #E3E3E3;"> <div style="height:50%;width:100%;margin-left: 15px;line-height: 35px;font-size: 20px;font-weight:900;">北方水果</div> <div style="height:50%;width:100%;margin-left: 15px;line-height: 35px">李子 柿子 榴莲</div> </div> <div style="height:70px;width:100%;border-bottom: 1px solid #E3E3E3;"> <div style="height:50%;width:100%;margin-left: 15px;line-height: 35px;font-size: 20px;font-weight:900;">欧美水果</div> <div style="height:50%;width:100%;margin-left: 15px;line-height: 35px">柚子 芒果 木瓜</div> </div> <div style="height:70px;width:100%;border-bottom: 1px solid #E3E3E3;"> <div style="height:50%;width:100%;margin-left: 15px;line-height: 35px;font-size: 20px;font-weight:900;">南亚水果</div> <div style="height:50%;width:100%;margin-left: 15px;line-height: 35px">哈密瓜 桃子 菠萝</div> </div> <div style="height:70px;width:100%;border-bottom: 1px solid #E3E3E3;"> <div style="height:50%;width:100%;margin-left: 15px;line-height: 35px;font-size: 20px;font-weight:900;">拉丁水果</div> <div style="height:50%;width:100%;margin-left: 15px;line-height: 35px">樱桃 梨子 草莓</div> </div> <div style="height:65px;width:100%;border-bottom: 1px solid #E3E3E3;"> <div style="height:50%;width:100%;margin-left: 15px;line-height: 35px;font-size: 20px;font-weight:900;">非洲水果</div> <div style="height:50%;width:100%;margin-left: 15px;line-height: 35px">葡萄 香蕉 橘橙</div> </div> </div> <div style="border: 2px solid #E3E3E3;margin-top:20px;width:100%;height:50px;float: left;"> <div style="border-bottom: 1px solid #E3E3E3;height:60%;width:100%;line-height: 30px;font-size: 15px;font-weight:900;">热销排行</div> <div style="margin-left: 10px;height:40%;width:100%;line-height: 20px;font-size: 15px;">苹果 西瓜</div> </div> </div> <div style="width:80%;height:100%;float: left;"> <div style="float: left;height:300px;width: 100%;"> <div style="margin-left:25px;height:20%;width: 90%;line-height:60px"> 商品分类>南方水果>杏子 </div> <div style="border: 2px solid #E3E3E3;margin-left:25px;height:80%;width: 90%"> <div style="line-height: 60px;border-bottom: 1px solid #E3E3E3;border-top: 3px solid #e31913;height:25%;width:100%;"> <div style="text-align:right;width:10%;font-weight:900;float: left;">你已选择：</div> <div style="width:50%;float: left;">苹果</div> </div> <div style="line-height: 60px;border-bottom: 1px solid #E3E3E3;height:25%;width:100%;"> <div style="font-weight:900;text-align:right;width:10%;font-weight:900;float: left;">地域：</div> <div style="width:50%;float: left;">南方 北方 欧美</div> </div> <div style="line-height: 60px;border-bottom: 1px solid #E3E3E3;height:25%;width:100%;"> <div style="font-weight:900;text-align:right;width:10%;font-weight:900;float: left;">品种：</div> <div style="width:50%;float: left;">转基因 非转基因 杂交</div> </div> <div style="line-height: 60px;border-bottom: 1px solid #E3E3E3;height:23%;width:100%;"> <div style="font-weight:900;text-align:right;width:10%;font-weight:900;float: left;">价格区间：</div> <div style="width:50%;float: left;">苹果 梨子 香蕉</div> </div> </div> </div> <div style="margin-top:45px;margin-left:25px;height:600px;width: 90%;float: left;"> <div style="height: 5%;border: 2px solid #E3E3E3;"> <div style="width: 50%;float: left;line-height: 30px"> <span style="margin-left: 20px;font-weight:900;">排序:</span> <span style="margin-left: 20px;color: blue;">价格</span> <span style="margin-left: 20px;color: blue;">销量</span> <span style="margin-left: 20px;color: blue;">最新</span> </div> <div style="width: 50%;float: right;text-align: right;line-height: 30px"> <span>共</span> <span style="color: red">102</span> <span>件商品</span> <span>1/102</span> <span style="color: blue;">< ></span> </div> </div> <div style="height: 95%;margin-top: 2px"> <div style="margin-left:2px;width: 24%;height:300px;border: 2px solid #e32e29;float: left"> <div style="height: 70%"> <img src="image/2.png" style="width: 95%;height: auto"> </div> <div style="height: 10%;text-align: center"> 草莓 拉丁美洲草莓 </div> <div style="height: 20%"> <div style="margin-top:15px;float: left;width: 40%"> ￥69.00 </div> <div style="margin-top:15px;float: right;width:60%;"> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">-</div> <div style="text-align:center;height: 50%;width:25%;border:1px solid #000;float: left">1</div> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">+</div> <div style="text-align:center;height: 50%;background-color:red;color:azure;width:25%;border:1px solid #000;float: left">买</div> <div style="clear: both"></div> </div> </div> </div> <div style="margin-left:2px;width: 24%;height:300px;border: 2px solid #e32e29;float: left"> <div style="height: 70%"> <img src="image/3.png" style="width: 95%;height: auto"> </div> <div style="height: 10%;text-align: center"> 草莓 拉丁美洲草莓 </div> <div style="height: 20%"> <div style="margin-top:15px;float: left;width: 40%"> ￥69.00 </div> <div style="margin-top:15px;float: right;width:60%;"> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">-</div> <div style="text-align:center;height: 50%;width:25%;border:1px solid #000;float: left">1</div> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">+</div> <div style="text-align:center;height: 50%;background-color:red;color:azure;width:25%;border:1px solid #000;float: left">买</div> <div style="clear: both"></div> </div> </div> </div> <div style="margin-left:2px;width: 24%;height:300px;border: 2px solid #e32e29;float: left"> <div style="height: 70%"> <img src="image/2.png" style="width: 95%;height: auto"> </div> <div style="height: 10%;text-align: center"> 草莓 拉丁美洲草莓 </div> <div style="height: 20%"> <div style="margin-top:15px;float: left;width: 40%"> ￥69.00 </div> <div style="margin-top:15px;float: right;width:60%;"> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">-</div> <div style="text-align:center;height: 50%;width:25%;border:1px solid #000;float: left">1</div> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">+</div> <div style="text-align:center;height: 50%;background-color:red;color:azure;width:25%;border:1px solid #000;float: left">买</div> <div style="clear: both"></div> </div> </div> </div> <div style="margin-left:2px;width: 24%;height:300px;border: 2px solid #e32e29;float: left"> <div style="height: 70%"> <img src="image/3.png" style="width: 95%;height: auto"> </div> <div style="height: 10%;text-align: center"> 草莓 拉丁美洲草莓 </div> <div style="height: 20%"> <div style="margin-top:15px;float: left;width: 40%"> ￥69.00 </div> <div style="margin-top:15px;float: right;width:60%;"> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">-</div> <div style="text-align:center;height: 50%;width:25%;border:1px solid #000;float: left">1</div> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">+</div> <div style="text-align:center;height: 50%;background-color:red;color:azure;width:25%;border:1px solid #000;float: left">买</div> <div style="clear: both"></div> </div> </div> </div> <div style="margin-left:2px;width: 24%;height:300px;border: 2px solid #e32e29;float: left"> <div style="height: 70%"> <img src="image/2.png" style="width: 95%;height: auto"> </div> <div style="height: 10%;text-align: center"> 草莓 拉丁美洲草莓 </div> <div style="height: 20%"> <div style="margin-top:15px;float: left;width: 40%"> ￥69.00 </div> <div style="margin-top:15px;float: right;width:60%;"> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">-</div> <div style="text-align:center;height: 50%;width:25%;border:1px solid #000;float: left">1</div> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">+</div> <div style="text-align:center;height: 50%;background-color:red;color:azure;width:25%;border:1px solid #000;float: left">买</div> <div style="clear: both"></div> </div> </div> </div> <div style="margin-left:2px;width: 24%;height:300px;border: 2px solid #e32e29;float: left"> <div style="height: 70%"> <img src="image/3.png" style="width: 95%;height: auto"> </div> <div style="height: 10%;text-align: center"> 草莓 拉丁美洲草莓 </div> <div style="height: 20%"> <div style="margin-top:15px;float: left;width: 40%"> ￥69.00 </div> <div style="margin-top:15px;float: right;width:60%;"> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">-</div> <div style="text-align:center;height: 50%;width:25%;border:1px solid #000;float: left">1</div> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">+</div> <div style="text-align:center;height: 50%;background-color:red;color:azure;width:25%;border:1px solid #000;float: left">买</div> <div style="clear: both"></div> </div> </div> </div> <div style="margin-left:2px;width: 24%;height:300px;border: 2px solid #e32e29;float: left"> <div style="height: 70%"> <img src="image/2.png" style="width: 95%;height: auto"> </div> <div style="height: 10%;text-align: center"> 草莓 拉丁美洲草莓 </div> <div style="height: 20%"> <div style="margin-top:15px;float: left;width: 40%"> ￥69.00 </div> <div style="margin-top:15px;float: right;width:60%;"> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">-</div> <div style="text-align:center;height: 50%;width:25%;border:1px solid #000;float: left">1</div> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">+</div> <div style="text-align:center;height: 50%;background-color:red;color:azure;width:25%;border:1px solid #000;float: left">买</div> <div style="clear: both"></div> </div> </div> </div> <div style="margin-left:2px;width: 24%;height:300px;border: 2px solid #e32e29;float: left"> <div style="height: 70%"> <img src="image/3.png" style="width: 95%;height: auto"> </div> <div style="height: 10%;text-align: center"> 草莓 拉丁美洲草莓 </div> <div style="height: 20%"> <div style="margin-top:15px;float: left;width: 40%"> ￥69.00 </div> <div style="margin-top:15px;float: right;width:60%;"> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">-</div> <div style="text-align:center;height: 50%;width:25%;border:1px solid #000;float: left">1</div> <div style="text-align:center;height: 50%;width:20%;border:1px solid #000;float: left">+</div> <div style="text-align:center;height: 50%;background-color:red;color:azure;width:25%;border:1px solid #000;float: left">买</div> <div style="clear: both"></div> </div> </div> </div> </div> </div> </div> </body> </html>
