<!DOCTYPE html>
<html>
<head>
<!-- 可直接使用框架提供的在线CSS与JS文件 -->
<!-- 若要使用本地的文件,请注释掉下面的标记 -->
<link rel="stylesheet" href="http://newfront.free4inno.com/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://newfront.free4inno.com/css/front.css">

<!-- 也可以使用下载到本地的CSS文件,请去掉下面两行标记的注释。其中localpath为本地路径。 -->
<!-- 若要使用在线文件,请注释掉下面两行标记 -->
<!-- <link rel="stylesheet" href="[localpath]/css/bootstrap.min.css"> -->
<!-- <link rel="stylesheet" href="[localpath]/css/front.css"> -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>电商着陆页布局</title>
</head>
<body class="front-body">
<nav class="navbar navbar-default navbar-fixed-top front-nav">
    <div class="container">
        <div>
            <!-- 品牌图片大小为150 * 30:宽度不定,高度固定30px -->
            <div class="nav-brand"><a href="#"><img src="/bootstrap-front/dev/img/logo.png" alt="brand" class="img-responsive"/></a></div>
            <!-- -->
        </div>
        <ul class="as-horizontal-nav as-horizontal-nav-2">
            <li class="active"><a href="javascript:void(0)">Option1</a></li> <!-- 激活菜单 -->
            <li><a href="javascript:void(0)">Option2</a></li>
        </ul>
        <div class="nav-right">
            <!-- 导航栏用户头像 -->
            <div class="area mobile-margin-right-15"><img src="/bootstrap-front/dev/img/avatar-demo.jpg" class="img-circle nav-avatar" alt="avatar" data-toggle="front-popover-bottom" data-target="#nav-user-demo"/></div>
            <!-- -->
            <!-- 用户菜单 -->
            <div id="nav-user-demo" class="bottom nav-popover nav-popover-media nav-avatar-menu">
                <div class="arrow"></div>
                <ul>
                    <li class="text-center">
                        <a href="javascript:void(0)">
                            <!-- 用户头像 -->
                            <img src="/bootstrap-front/dev/img/avatar-demo.jpg" alt="avatar" class="img-circle img-lg-avatar"/>
                            <!-- end 用户头像 -->
                        </a>
                        <div>用户昵称</div>
                        <div><small>用户邮箱</small></div>
                    </li>
                    <li class="divider"></li> <!-- 分界线 -->
                    <li class="clearfix">
                        <div class="col-xs-4 text-center">信息1</div>
                        <div class="col-xs-4 text-center">信息2</div>
                        <div class="col-xs-4 text-center">信息3</div>
                    </li>
                    <li class="divider"></li> <!-- 分界线 -->
                    <li><a href="javascript:void(0)"><span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;退出</a></li>
                </ul>
            </div>
            <!-- end 用户菜单 -->
        </div>
    </div>
</nav>
<!-- <%--导航栏--%> -->
<div class="front-inner">
    <div class="container">
        <div class="searchBox" style="margin-bottom:0;">
        <form action="" style="margin-bottom: 1em;">
        <div class="searchmain" style="width:50%;margin:0 auto;">
        <input name="query" id="query" type="text" class="form-control front-no-box-shadow freeshare-title " placeholder="输入你需要的IT产品或类别,我们帮您找到心仪的产品" style="width:85%;float:left;display:inline;border-width:2px 0 2px 2px;border: #337ab7 solid;">
        <button type="submit" class="btn btn-primary" style="padding-left:0px;padding-right:0px;width:15%;height:34px;border-radius:0;">搜索</button>
        </div>
        </form>
        </div>
        <div class="row">
            <div class="col-md-12 ">
					<!-- 分类目录 -->
					<div class="category">
						<div class="col-md-2 column-padding">
							<div class="list-group nav-left  ">
								<a href="#" class="list-group-item categoryMain" data-menu="1">左侧栏菜单1<span
									class="glyphicon glyphicon-chevron-right"></span></a> <a href="#"
									class="list-group-item categoryMain" data-menu="2">左侧栏菜单2<span
									class="glyphicon glyphicon-chevron-right "></span></a> <a href="#"
									class="list-group-item categoryMain" data-menu="3">左侧栏菜单3<span
									class="glyphicon glyphicon-chevron-right "></span></a> <a href="#"
									class="list-group-item categoryMain" data-menu="4">左侧栏菜单4<span
									class="glyphicon glyphicon-chevron-right "></span></a> <a href="#"
									class="list-group-item categoryMain">左侧栏菜单5<span
									class="glyphicon glyphicon-chevron-right "></span></a> <a href="#"
									class="list-group-item categoryMain">左侧栏菜单6<span
									class="glyphicon glyphicon-chevron-right "></span></a> 
							</div>
						</div>
						<!-- 分类目录结束 -->

						<!-- 展开目录 -->
						<div class="menus hidden">
							<div class=" categoryMenu1 hidden">
							<div class="menuParent">
								<div class="subitems" >
								
									<dl class="fore1">
										<dt>
											<a href="#" target="_blank">面部护肤<i>&gt;</i></a>
										</dt>
										<dd>
											<a href="#" target="_blank">卸妆</a>
											<a href="#" target="_blank">洁面</a>
											<a href="#" target="_blank">爽肤水</a>
											<a href="#" target="_blank">乳液面霜</a>
											<a href="#" target="_blank">精华</a>
											<a href="#" target="_blank">眼霜</a>
										</dd>
									</dl>
									<dl class="fore2">
										<dt>
											<a href="#" target="_blank">洗发护发<i>&gt;</i></a>
										</dt>
										<dd>
											<a href="#"
												target="_blank">洗发</a><a
												href="#"
												target="_blank">护发</a><a
												href="#"
												target="_blank">染发</a><a
												href="#"
												target="_blank">造型</a><a
												href="#"
												target="_blank">假发</a><a
												href="#"
												target="_blank">套装</a>
										</dd>
									</dl>
								</div>
								<div class="advertise" >
									<img src = "/bootstrap-front/dev/img/ad1.jpg">
								</div>
								</div>
							</div>
							<div class=" categoryMenu2 hidden">
							<div class="menuParent">
								<div class="subitems" >
									<dl class="fore1">
										<dt>
											<a href="#" target="_blank">身体护肤<i>&gt;</i></a>
										</dt>
										<dd>
											<a href="#"
												target="_blank">沐浴</a><a
												href="#"
												target="_blank">润肤</a><a
												href="#"
												target="_blank">精油</a><a
												href="#"
												target="_blank">颈部</a><a
												href="#"
												target="_blank">手足</a><a
												href="#"
												target="_blank">纤体塑形</a><a
												href="#"
												target="_blank">美胸</a><a
												href="#"
												target="_blank">套装</a>
										</dd>
									</dl>
									<dl class="fore2">
										<dt>
											<a href="#" target="_blank">女性护理<i>&gt;</i></a>
										</dt>
										<dd>
											<a href="#"
												target="_blank">卫生巾</a><a
												href="#"
												target="_blank">卫生护垫</a><a
												href="#"
												target="_blank">私密护理</a><a
												href="#"
												target="_blank">脱毛膏</a>
										</dd>
									</dl>
								</div>
								<div class="advertise" >
									<img src = "/bootstrap-front/dev/img/ad2.jpg">
								</div>
								</div>
							</div>
							<div class=" categoryMenu3 ">
								<div class="menuParent">
								<div class="subitems" >
									<dl class="fore1">
										<dt>
											<a href="#" target="_blank">口腔护理<i>&gt;</i></a>
										</dt>
										<dd>
											<a href="#"
												target="_blank">牙膏/牙粉</a><a
												href="#"
												target="_blank">牙刷/牙线</a><a
												href="#"
												target="_blank">漱口水</a><a
												href="#"
												target="_blank">套装</a>
										</dd>
									</dl>
									<dl class="fore2">
										<dt>
											<a href="#" target="_blank">香水彩妆<i>&gt;</i></a>
										</dt>
										<dd>
											<a
												href="#"
												target="_blank">女士香水</a><a
												href="#"
												target="_blank">男士香水</a><a
												href="#"
												target="_blank">底妆</a><a
												href="#"
												target="_blank">眉笔</a><a
												href="#"
												target="_blank">睫毛膏</a><a
												href="#"
												target="_blank">眼线</a><a
												href="#"
												target="_blank">眼影</a><a
												href="#"
												target="_blank">唇膏/彩</a><a
												href="#"
												target="_blank">腮红</a><a
												href="#"
												target="_blank">美甲</a><a
												href="#"
												target="_blank">美妆工具</a><a
												href="#"
												target="_blank">套装</a>
										</dd>
									</dl>
								</div>
								<div class="advertise" >
									<img src = "/bootstrap-front/dev/img/ad3.jpg">
								</div>
								</div>
							</div>
							<div class=" categoryMenu4 hidden">
							<div class="menuParent">
								<div class="subitems" >
									<dl class="fore7">
										<dt>
											<a href="#" target="_blank">清洁用品<i>&gt;</i></a>
										</dt>
										<dd>
											<a href="#"
												target="_blank">纸品湿巾</a><a
												href="#"
												target="_blank">衣物清洁</a><a
												href="#"
												target="_blank">清洁工具</a><a
												href="#"
												target="_blank">家庭清洁</a><a
												href="#"
												target="_blank">一次性用品</a><a
												href="#"
												target="_blank">驱虫用品</a><a
												href="#"
												target="_blank">皮具护理</a>
										</dd>
									</dl>
									<dl class="fore8">
										<dt>
											<a href="#" target="_blank">宠物生活<i>&gt;</i></a>
										</dt>
										<dd>
											<a href="#"
												target="_blank">水族用品</a><a
												href="#" target="_blank">宠物主粮</a><a
												href="#" target="_blank">宠物零食</a><a
												href="#"
												target="_blank">猫砂/尿布</a><a
												href="#" target="_blank">洗护美容</a><a
												href="#" target="_blank">家居日用</a><a
												href="#" target="_blank">医疗保健</a><a
												href="#" target="_blank">出行装备</a><a
												href="#" target="_blank">宠物玩具</a><a
												href="#"
												target="_blank">宠物牵引</a><a
												href="#"
												target="_blank">宠物驱虫</a>
										</dd>
									</dl>
								</div>
								</div>	
							</div>
						</div>

					</div>
					<!-- 展开目录结束 -->
					<div class="col-md-8 as-carousel pictureSlide">
						<div id="carousel-example-generic" class="carousel slide"
							data-ride="carousel" >
							<!-- Indicators -->
							<ol class="carousel-indicators">
								<li data-target="#carousel-example-generic" data-slide-to="0"
									class="active"></li>
								<li data-target="#carousel-example-generic" data-slide-to="1"></li>
								<li data-target="#carousel-example-generic" data-slide-to="2"></li>
							</ol>
							<!-- Wrapper for slides -->
							<div class="carousel-inner" role="listbox">
								<div class="item active">
									<a href="" target="_blank"><img src="/bootstrap-front/dev/img/appstore1.jpg"
										class="img-responsive" alt="Slide1"></a>
								</div>
								<div class="item">
									<a href="" target="_blank"><img src="/bootstrap-front/dev/img/appstore2.jpg"
										class="img-responsive" alt="Slide2"></a>
								</div>
								<div class="item">
									<a href="" target="_blank"><img src="/bootstrap-front/dev/img/appstore3.jpg"
										class="img-responsive" alt="Slide3"></a>
								</div>
							</div>
							<!-- Controls -->
							<a class="left carousel-control" href="#carousel-example-generic"
								role="button" data-slide="prev"> <span
								class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a> <a class="right carousel-control"
								href="#carousel-example-generic" role="button" data-slide="next">
								<span class="glyphicon glyphicon-chevron-right"
								aria-hidden="true"></span> <span class="sr-only">Next</span>
							</a>
						</div>
					</div>
					<!-- 右侧按钮 -->
					<div class="col-md-2 column-padding" >
							<div class="list-group nav-left  ">
								<a href="#" class="list-group-item categoryMain" data-menu="1">左侧栏菜单1<span
									class="glyphicon glyphicon-chevron-right"></span></a> <a href="#"
									class="list-group-item categoryMain" data-menu="2">左侧栏菜单2<span
									class="glyphicon glyphicon-chevron-right "></span></a> <a href="#"
									class="list-group-item categoryMain" data-menu="3">左侧栏菜单3<span
									class="glyphicon glyphicon-chevron-right "></span></a> <a href="#"
									class="list-group-item categoryMain" data-menu="4">左侧栏菜单4<span
									class="glyphicon glyphicon-chevron-right "></span></a> <a href="#"
									class="list-group-item categoryMain">左侧栏菜单5<span
									class="glyphicon glyphicon-chevron-right "></span></a> <a href="#"
									class="list-group-item categoryMain">左侧栏菜单6<span
									class="glyphicon glyphicon-chevron-right "></span></a> 
							</div>
						</div>
					</div>	
					
        </div>
        <div class="row">
				<div class="front-toolbar other" style="padding-left: 10px;margin-right: 15px;">
                         <div class="front-toolbar-header clearfix">
                         <button type="button" class="front-toolbar-toggle navbar-toggle" data-toggle="collapse" data-target="#freeshare">
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         </button>
                         </div>
                         <div id="freeshare" class="front-btn-group collapse">
                         <a class="btn btn-default front-no-box-shadow"><span class="glyphicon glyphicon-stats"></span>应用</a>
                         <a class="btn btn-default front-no-box-shadow"><span class="glyphicon glyphicon-bookmark"></span>测评</a>
                         <a class="btn btn-default front-no-box-shadow"><span class="glyphicon glyphicon-book"></span>专题</a>
                         <a class="btn btn-default front-no-box-shadow"><span class="glyphicon glyphicon-bullhorn"></span>资讯</a>
                         </div>
                    </div>
			</div>
			<div class="row">
			<div class="col-md-4">
                <div class="panel panel-default front-panel">
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-left">
                                <img class="img-circle nav-avatar" src="/bootstrap-front/dev/img/avatar-demo.jpg" alt="App Logo">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">App Name</h4>
                                <div class="as-desc">App Description</div>
                                <div class="text-right"><a href="javascript:void(0)" target="_blank">进入</a><a href="javascript:void(0)" style="margin-left: 10px">详情</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default front-panel">
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-left">
                                <img class="img-circle nav-avatar" src="/bootstrap-front/dev/img/avatar-demo.jpg" alt="App Logo">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">App Name</h4>
                                <div class="as-desc">App Description</div>
                                <div class="text-right"><a href="javascript:void(0)" target="_blank">进入</a><a href="javascript:void(0)" style="margin-left: 10px">详情</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default front-panel">
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-left">
                                <img class="img-circle nav-avatar" src="/bootstrap-front/dev/img/avatar-demo.jpg" alt="App Logo">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">App Name</h4>
                                <div class="as-desc">App Description</div>
                                <div class="text-right"><a href="javascript:void(0)" target="_blank">进入</a><a href="javascript:void(0)" style="margin-left: 10px">详情</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default front-panel">
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-left">
                                <img class="img-circle nav-avatar" src="/bootstrap-front/dev/img/avatar-demo.jpg" alt="App Logo">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">App Name</h4>
                                <div class="as-desc">App Description</div>
                                <div class="text-right"><a href="javascript:void(0)" target="_blank">进入</a><a href="javascript:void(0)" style="margin-left: 10px">详情</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default front-panel">
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-left">
                                <img class="img-circle nav-avatar" src="/bootstrap-front/dev/img/avatar-demo.jpg" alt="App Logo">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">App Name</h4>
                                <div class="as-desc">App Description</div>
                                <div class="text-right"><a href="javascript:void(0)" target="_blank">进入</a><a href="javascript:void(0)" style="margin-left: 10px">详情</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default front-panel">
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-left">
                                <img class="img-circle nav-avatar" src="/bootstrap-front/dev/img/avatar-demo.jpg" alt="App Logo">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">App Name</h4>
                                <div class="as-desc">App Description</div>
                                <div class="text-right"><a href="javascript:void(0)" target="_blank">进入</a><a href="javascript:void(0)" style="margin-left: 10px">详情</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
             <div class="lineheight">
			     <div class="text-center">
			         <ul class="pagination">
			            <li class="disabled"><a aria-label="Previous">«</a></li>
			            <li class="active"><a>1</a></li>
			            <li class="disabled"><a aria-label="Next">»</a></li>
			         </ul>
			     </div>
            </div>
			</div>
    </div>
<footer class="footer-default">
    <div class="text-center">Copyright © All Right Reserved by BUPT(2015)</div>
</footer>
</div>
<!-- 可直接使用框架提供的在线js文件 -->
<!-- 若要使用本地的文件,请注释掉下面三行标记 -->
<script src="http://newfront.free4inno.com/js/jquery/jquery.min.js"></script>
<script src="http://newfront.free4inno.com/bootstrap/js/bootstrap.min.js"></script>
<script src="http://newfront.free4inno.com/js/plugin/front.js"></script>

<!-- 也可以使用下载到本地的js文件,请去掉下面三行标记的注释。其中localpath为用户本地路径。 -->
<!-- 若要使用在线文件,请注释掉下面三行标记 -->
<!-- <script src="[localpath]/js/jquery.min.js"></script> -->
<!-- <script src="[localpath]/js/bootstrap.min.js"></script> -->
<!-- <script src="[localpath]/js/front.js"></script> -->
</body>
</html>