<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>产品列表</title>
<link href="css/reset.css" rel="stylesheet" />
<link href="css/common.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="box">
<div class="headerBar">
<div class="topBar">
<div class="comWidth">
<div class="leftArea">
<a href="#" class="collection">收藏慕课</a>
</div>
<div class="rightArea">
<span>欢迎来到慕课网</span>
<a href="login.html">[登录]</a>
<a href="register.html">[免费注册]</a>
</div>
</div>
</div>
<!--购物车区域-->
<div class="logoBar">
<div class="comWidth">
<div class="logo fl">
<a href="#"><img src="img/logo.png" alt="慕课网"></a>
</div>
<div class="search_box fl">
<input type="text" class="search_text fl" />
<input type="button" class="search_btn fr" value="搜索" />
</div>
<div class="shopCar fr">
<span class="shopText fl">购物车</span>
<span class="shopNum fl">0</span>
</div>
</div>
</div>
<!--导航区-->
<div class="navBox">
<div class="comWidth">
<div class="shopClass fl">
<h3>全部商品分类<i></i></h3>
</div>
<ul class="nav fl">
<li>
<a href="#" class="active">数码城</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="#" class="nobor">名品会</a>
</li>
</ul>
</div>
</div>
</div>
<!--Banner部分-->
<div class="comWidth clearfix products">
<div class="leftArea">
<div class="leftNav">
<h3 class="nav_title">手机、数码</h3>
<div class="nav_cont">
<h3>手机通讯</h3>
<ul class="navCont_list clearfix">
<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="nav_cont">
<h3>手机通讯</h3>
<ul class="navCont_list clearfix">
<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="nav_cont">
<h3>手机通讯</h3>
<ul class="navCont_list clearfix">
<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="nav_cont">
<h3>手机通讯</h3>
<ul class="navCont_list clearfix">
<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="nav_cont">
<h3>手机通讯</h3>
<ul class="navCont_list clearfix">
<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 class="rightArea">
<div class="banner_bar banner_big">
<ul class="imgBox">
<li>
<a href="#"><img src="img/banner_01.png" alt="banner" /></a>
</li>
<li>
<a href="#"><img src="img/banner_02.png" alt="banner" /></a>
</li>
</ul>
<div class="imgNum">
<a href="#" class="active"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<div class="hr_7"></div>
<div class="products_title">
<h3>数码影像</h3>
</div>
<div class="products_list clearfix">
<div class="item">
<div class="img_item">
<a href="#"><img src="img/shopImg.png" alt="" /></a>
</div>
<p>
<a href="#">文字介绍</a>
</p>
<p class="money">¥699</p>
<p>
<span>评论:</span>
<span class="stars"></span>
<span class="stars"></span>
<span class="stars"></span>
<span class="stars"></span>
<span class="stars"></span>
<a href="#">(78条)</a>
</p>
</div>
<div class="item">
<div class="img_item">