ChengDuYuanYou
/
friendsCenter.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>成都缘友社交网站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/common.css" rel="stylesheet">
	<link href="css/friendsCenter.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header>
	<nav class="navbar head-default" role="navigation">
	  <div class="container">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <a class="navbar-brand disabled" href="#">成都缘友网</a>
	    </div>

	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	      <ul class="nav navbar-nav">
	        <li><a href="index.html">首页</a></li>
	        <li><a href="friends.html">我的交友</a></li>
	        <li><a href="people.html">附近的人</a></li>
	        <li><a href="photos.html">照片墙</a></li>
	      </ul>
	      <ul class="nav navbar-nav navbar-right">
	          <li><a href="login.html">登录</a></li>
	          <li><a href="sign.html">注册</a></li>
	      </ul>
	    </div><!-- /.navbar-collapse -->
	  </div><!-- /container -->
	</nav><!--导航结束-->
	<div class="banner-box container hidden-xs">
		<!-- <div class="container"> -->
			<div class="row">
				<div class="friends-search col-lg-8 col-md-12 col-sm-12">
				<ul>
			    	<li>我要找：
			    		<p class="s_list" id="sex-sec-p"><span>女朋友</span><em class="glyphicon glyphicon-menu-down"></em></p>
						<div class="se_ce hidden" id="sex-p" >
							<ol class="list-group">
								<li><a name="sexsec" value="2">女朋友</a></li>
								<li><a name="sexsec" value="1">男朋友</a></li>
							</ol>
						</div>
			    	</li>
			    	<li>年龄：
			    		<p class="s_list" id="age-start-p"><span>18岁</span><em class="glyphicon glyphicon-menu-down"></em></p>
						<div class="se_ce hidden" id="age-start">
							<div class="se_nl" id="mainBox">
								<ol class="list-group">
    		                    </ol>
			                </div>
			            </div>
			    	</li>

			    	<li class="nl">
			    		—
			    		<p class="s_list" id="age-end-p"><span>28岁</span><em class="glyphicon glyphicon-menu-down"></em></p>
						<div class="se_ce hidden" id="age-end">
							<div class="se_nl" id="mainBox">
								<ol class="list-group">
				                </ol>
			                </div>
			            </div>
			    	</li>
			    	<li>区域：
			    		<p class="s_list" id="s-sec-area"><span>武侯区</span><em class="glyphicon glyphicon-menu-down"></em></p>
						<div class="se_ce hidden" id="sec-area" >
							<ol class="list-group">
								<li><a name="sexsec" value="2">武侯区</a></li>
								<li><a name="sexsec" value="1">青羊区</a></li>
							</ol>
						</div>
			    	</li>
			    	<li><a class="s_button" href="javascript:void(0)">快速搜索</a></li>
			    </ul>
				</div>
				<div class="col-lg-4 hidden-sm hidden-md">
					<div class="maqBox">
						<i class="glyphicon glyphicon-volume-up"></i>
					    <ul class="list-group">
					        <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a></li>
					        <li><a href="#">2.tab页面切换效果（案例）</a></li>
					        <li><a href="#">3.圆角水晶按钮制作（案例）</a></li>
					    </ul>
					</div>
				</div>
			</div>
	</div><!-- 通栏 -->
</header>
<main>
	<div class="container">
		<div class="row">
			<div class="col-sm-8 user">
				<div class="base clearfix">
					<div class="userImg">
					      <img src="./images/1.jpg" alt="...">
					</div>
					<div class="userBase">
						<h3>彭和平</h3>
						<ul class="list-inline">
							<li><span>性别：</span>女</li>
							<li><span>年龄：</span>28岁</li>
							<li><span>身高：</span>170cm</li>
							<li><span>地区：</span>青羊区</li>
						</ul>
						<div class="sendLetter clearfix">
							<textarea name="dynamic" id="dynamic" rows="5"></textarea>
							<button class="btn pull-left" type="button">清空</button>
							<button class="btn pull-right publish-btn" type="button">发送私信</button>
						</div>
					</div><!--userBase-->
				</div>
				<div class="details">
					<p class="title"><span>详细资料</span></p>
					<ul class="list-inline">
						<li><span>性别：</span>女</li>
						<li><span>年龄：</span>28岁</li>
						<li><span>身高：</span>170cm</li>
						<li><span>地区：</span>青羊区</li>
						<li><span>恋爱状态：</span>单身</li>
						<li><span>学历：</span>本科</li>
						<li><span>工作：</span>软件工程师</li>
						<li><span>生日：</span>1997年09月20日</li>
					</ul>
				</div>
				<div class="userAlbums">
					<p class="title"><span>他的相册</span></p>
					<div class="col-xs-6 col-sm-4">
					    <div class="thumbnail">
					      <img src="./images/1.jpg" alt="...">
					      <div class="caption">
					        <p><a href="detailPhotos.html">吃喝玩乐(23)</a></p>
					      </div>
					    </div><!--thumbnail-->
				  	</div>
					<div class="col-xs-6 col-sm-4">
					    <div class="thumbnail">
					      <img src="./images/1.jpg" alt="...">
					      <div class="caption">
					        <p><a href="detailPhotos.html">吃喝玩乐(23)</a></p>
					      </div>
					    </div><!--thumbnail-->
				  	</div>
					<div class="col-xs-6 col-sm-4">
					    <div class="thumbnail">
					      <img src="./images/1.jpg" alt="...">
					      <div class="caption">
					        <p><a href="detailPhotos.html">吃喝玩乐(23)</a></p>
					      </div>
					    </div><!--thumbnail-->
				  	</div>
					<div class="col-xs-6 col-sm-4">
					    <div class="thumbnail">
					      <img src="./images/1.jpg" alt="...">
					      <div class="caption">
					        <p><a href="detailPhotos.html">吃喝玩乐(23)</a></p>
					      </div>
					    </div><!--thumbnail-->
				  	</div>
					<div class="col-xs-6 col-sm-4">
					    <div class="thumbnail">
					      <img src="./images/1.jpg" alt="...">
					      <div class="caption">
					        <p><a href="detailPhotos.html">吃喝玩乐(23)</a></p>
					      </div>
					    </div><!--thumbnail-->
				  	</div>
				</div><!--userAlbums-->
			</div><!--col-sm-8结束-->
			<div class="col-sm-4 maybe">
				<p class="title">你可能喜欢的人</p>
				<span class="pull-right"><i class="glyphicon glyphicon-refresh"></i>换一换</span>
				<div class="col-xs-6">
				    <a href="friendsCenter.html" class="thumbnail">
				      <img src="./images/2.jpg" alt="...">
				      <p>彭和平</p>
				    </a>
				</div>
				<div class="col-xs-6">
				    <a href="friendsCenter.html" class="thumbnail">
				      <img src="./images/2.jpg" alt="...">
				      <p>彭和平</p>
				    </a>
				</div>
				<div class="col-xs-6">
				    <a href="friendsCenter.html" class="thumbnail">
				      <img src="./images/2.jpg" alt="...">
				      <p>彭和平</p>
				    </a>
				</div>
				<div class="col-xs-6">
				    <a href="friendsCenter.html" class="thumbnail">
				      <img src="./images/2.jpg" alt="...">
				      <p>彭和平</p>
				    </a>
				</div>
			</div><!--col-sm-4结束-->
		</div><!--row结束-->
	</div><!--container结束-->
</main>
<footer>
	<div class="container">

    <p class="jy_link">
		<a href="http://jiaoyou.58.com/bj/">北京交友网</a>
        <a href="http://jiaoyou.58.com/sh/">上海交友网</a>
        <a href="http://jiaoyou.58.com/tj/">天津交友网</a>
        <a href="http://jiaoyou.58.com/gz/">广州交友网</a>
        <a href="http://jiaoyou.58.com/zz/">郑州交友网</a>
        <a href="http://jiaoyou.58.com/xa/">西安交友网</a>
        <a href="http://jiaoyou.58.com/sz/">深圳交友网</a>
        <a href="http://jiaoyou.58.com/su/">苏州交友网</a>
        <a href="http://jiaoyou.58.com/cq/">重庆交友网</a>
        <a href="http://jiaoyou.58.com/wh/">武汉交友网</a>
        <a href="http://jiaoyou.58.com/nj/">南京交友网</a>
        <a href="http://jiaoyou.58.com/hz/">杭州交友网</a>
        <a href="http://jiaoyou.58.com/cd/">成都交友网</a>
        <a href="http://jiaoyou.58.com/hrb/">哈尔滨交友网</a>
        <a href="http://jiaoyou.58.com/cc/">长春交友网</a>
        <a href="http://jiaoyou.58.com/sjz/">石家庄交友网</a>
        <a href="http://jiaoyou.58.com/jn/">济南交友网</a>
        <a href="http://jiaoyou.58.com/ty/">太原交友网</a>
        <a href="http://jiaoyou.58.com/fz/">福州交友网</a>
        <a href="http://jiaoyou.58.com/nc/">南昌交友网</a>
        <a href="http://jiaoyou.58.com/city/">更多交友网</a>
	</p>
	<p>Copyright (C) 2017 All Rights Reserved. 项目六组 版权所有</p>
	</div>
</footer>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/common.js"></script>
<script type="text/javascript">
	$(function(){
		$("#navBar li").removeClass("active");
	})
</script>
</body>
</html>