<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站首页</title>
<style>
.c1{
width: 980px;
background-color: #9a9a9a;
margin:1px auto;/* 版面在显示屏的当中*/
}
.c2{
margin-right: 10px;
}
.c3{
text-align: center;
line-height: 100%;
}
</style>
</head>
<body>
<div class="c1">
<div style="float: left">收藏本站</div>
<div style="float: right">
<a class="c2">登录</a>
<a class="c2">注册</a>
<a class="c2">我的订单</a>
</div>
<div style="clear: both"></div><!-- 防止下面的标签往上挪-->
</div>
<div class="c1" style="height: 100px">
<div style="height: 100px;width: 100px;float: left;margin-left: 60px;">
<img style="height: 90px;width: 90px;margin-top: 5px;" src="4.gif">
</div>
<div style="height: 100px;width: 300px;float: left;margin-left: 180px;line-height: 100px">
<input style="height: 40px" type="text" placeholder="请输入你要搜索的内容"/>
<input style="height: 40px" type="button" value="搜索"/>
</div>
<div style="height: 100px;width: 100px;float: right;margin-right: 20px;line-height: 100px">
<div>购物车</div>
</div>
</div>
<div class="c1" >
<div style="width: 25%;float: left">
<div style="width: 100%;height: 60px;background-color: #e75e15;line-height: 60px" class="c3">全部商品分类</div>
<div style="width: 100%;height: 60px;line-height: 60px" class=" c1 c3">南方水果</div>
<div style="width: 100%;height: 60px;line-height: 60px" class=" c1 c3">北方水果</div>
<div style="width: 100%;height: 60px;line-height: 60px" class=" c1 c3">东方水果</div>
<div style="width: 100%;height: 60px;line-height: 60px" class=" c1 c3">西方水果</div>
</div>
<div style="width: 75%;float: right;">
<div style="width: 100%;height: 60px;background-color: #e75e15;line-height: 60px;" class="c3">
<div style="width: 10%;float: left">首页</div>
<div style="width: 10%;float: left">网上超市</div>
<div style="width: 10%;float: left">水果超市</div>
<div style="width: 10%;float: left">划算套餐</div>
<div style="width: 10%;float: left">生活娱乐</div>
<div style="width: 10%;float: right">研究院</div>
<div style="width: 10%;float: right">论坛</div>
</div>
<div style="width: 100%;height: 40px;line-height: 40px;border-left:1px solid darkred" class="c1 c3">
福特 >蒙迪欧 >2.0T
</div>
<div style="width: 100%;height: 40px;line-height: 40px;border-left:1px solid darkred" class="c1">
<label style="font-weight: bolder;padding-left:20px;">您已选择：</label>
<label style="display: inline-block;width: 80px">苹果</label>
<label style="display: inline-block;width: 80px">苹果</label>
</div>
<div style="width: 100% ;height: 40px;line-height: 40px;border-left:1px solid darkred" class="c1">
<label style="font-weight: bolder;padding-left:60px">材质：</label><label>苹果</label>
</div>
<div style="width: 100% ;height: 40px;line-height: 40px;border-left:1px solid darkred" class="c1">
<label style="font-weight: bolder;padding-left:60px">品牌：</label><label>苹果</label>
</div>
<div style="width: 100% ;height: 40px;line-height: 40px;border-left:1px solid darkred" class="c1">
<label style="font-weight: bolder;padding-left:60px">风格：</label><label>苹果</label>
</div>
<div style="width: 100%;height: 40px;line-height: 40px;border-left:1px solid darkred" class="c1">
<label style="font-weight: bolder;padding-left:20px;">排序：</label>
<label style="display: inline-block;width: 80px">价格</label>
<label style="display: inline-block;width: 80px">销量</label>
<label style="display: inline-block;width: 80px">最新</label>
</div>
<div style="width: 100%;margin: 1px auto">
<div style="width: 25%;height: 200px;float: left;">
<div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
<div style="width: 100%;height: 20px;" class="c3">火龙果</div>
<div style="width: 100%;height: 30px;" class="c3">
<div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
<div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
<div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
border-top: 1px solid black;border-bottom: 1px solid black;">
1
</div>
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
</div>
<div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
</div>
</div>
<div style="width: 25%;height: 200px;float: left;">
<div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
<div style="width: 100%;height: 20px;" class="c3">火龙果</div>
<div style="width: 100%;height: 30px;" class="c3">
<div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
<div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
<div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
border-top: 1px solid black;border-bottom: 1px solid black;">
1
</div>
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
</div>
<div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
</div>
</div>
<div style="width: 25%;height: 200px;float: left;">
<div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
<div style="width: 100%;height: 20px;" class="c3">火龙果</div>
<div style="width: 100%;height: 30px;" class="c3">
<div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
<div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
<div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
border-top: 1px solid black;border-bottom: 1px solid black;">
1
</div>
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
</div>
<div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
</div>
</div>
<div style="width: 25%;height: 200px;float: left;">
<div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
<div style="width: 100%;height: 20px;" class="c3">火龙果</div>
<div style="width: 100%;height: 30px;" class="c3">
<div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
<div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
<div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
border-top: 1px solid black;border-bottom: 1px solid black;">
1
</div>
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
</div>
<div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
</div>
</div>
<div style="width: 25%;height: 200px;float: left;">
<div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
<div style="width: 100%;height: 20px;" class="c3">火龙果</div>
<div style="width: 100%;height: 30px;" class="c3">
<div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
<div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
<div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
border-top: 1px solid black;border-bottom: 1px solid black;">
1
</div>
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
</div>
<div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
</div>
</div>
<div style="width: 25%;height: 200px;float: left;">
<div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
<div style="width: 100%;height: 20px;" class="c3">火龙果</div>
<div style="width: 100%;height: 30px;" class="c3">
<div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
<div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
<div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
border-top: 1px solid black;border-bottom: 1px solid black;">
1
</div>
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
</div>
<div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
</div>
</div>
<div style="width: 25%;height: 200px;float: left;">
<div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
<div style="width: 100%;height: 20px;" class="c3">火龙果</div>
<div style="width: 100%;height: 30px;" class="c3">
<div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
<div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
<div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
border-top: 1px solid black;border-bottom: 1px solid black;">
1
</div>
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
</div>
<div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
</div>
</div>
<div style="width: 25%;height: 200px;float: left;">
<div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
<div style="width: 100%;height: 20px;" class="c3">火龙果</div>
<div style="width: 100%;height: 30px;" class="c3">
<div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
<div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
<div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
border-top: 1px solid black;border-bottom: 1px solid black;">
1
</div>
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
</div>
<div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
</div>
</div>
<div style="width: 25%;height: 200px;float: left;">
<div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
<div style="width: 100%;height: 20px;" class="c3">火龙果</div>
<div style="width: 100%;height: 30px;" class="c3">
<div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
<div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
<div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
border-top: 1px solid black;border-bottom: 1px solid black;">
1
</div>
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
</div>
<div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
</div>
</div>
<div style="width: 25%;height: 200px;float: left;">
<div style="width: 100%;height: 150px;background-color: darkkhaki;border: 1px solid darkred"></div>
<div style="width: 100%;height: 20px;" class="c3">火龙果</div>
<div style="width: 100%;height: 30px;" class="c3">
<div style="width: 25%;height: 100%;color: red;text-align: center;line-height:30px;float: left">￥66.9</div>
<div style="padding:0 10px;width: 50%;height: 90%;color: red;text-align: center;line-height:30px;float: left;">
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">-</div>
<div style="width: 50%;height: 100%;color:black;text-align: center;line-height:30px;float: left;
border-top: 1px solid black;border-bottom: 1px solid black;">
1
</div>
<div style="width: 20%;height: 100%;color:black;text-align: center;line-height:30px;float: left;border: 1px solid black">+</div>
</div>
<div style="width: 10%;height: 100%;color: red;text-align: center;line-height:30px;float: left">买</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号