master

分支 (1)

管理

管理

master

ChengDuYuanYou
/
friends.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/friends.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 class="active"><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-2 hidden-xs hidden-sm">
				<div class="thumbnail">
			      <img src="./images/1.jpg" alt="...">
			      <div class="caption">
					<p>彭和平</p>
					<p>28岁</p>
					<p><a href=""><i class="glyphicon glyphicon-home"></i>进入个人主页</a></p>
			      </div>
			    </div><!--个人信息结束-->
				<div class="frame application">
					<h4>热门应用</h4>
					<ul class="media-list">
					  <li class="media">
					    <div class="media-left">
					      <a href="#">
					        <img class="media-object" src="./images/xh.png" alt="...">
					      </a>
					    </div>
					    <div class="media-body">
					      <a href="" class="media-heading">邂逅</a>
					    </div>
					  </li>
					  <li class="media">
					    <div class="media-left">
					      <a href="#">
					        <img class="media-object" src="./images/zp.png" alt="...">
					      </a>
					    </div>
					    <div class="media-body">
					      <a href="#" class="media-heading">照片墙</a>
					    </div>
					  </li>
					</ul>
				</div><!--左侧分栏下侧-->
			</div><!--col-sm-3结束-->
			<div class="col-sm-7">
				<div class="publish">
					<textarea name="dynamic" id="dynamic" rows="9"></textarea>
					<button class="btn pull-left" type="button">清空</button>
					<button class="btn pull-right publish-btn" type="button">发表</button>
				</div>
				<div class="f-dynamic-box">
					<p class="title">关注人动态</p>
					<div class="f-dynamic">
						<div class="f-dynamic-item clearfix">
							<div class="userImg pull-left">
								<img src="./images/1.jpg" alt="">
								<p>彭和平</p>
								<button class="btn" type="button">私信</button>
							</div>
							<div class="f-dynamic-describe pull-right">
								<article>
									啦啦啦啦啦啦，我是卖报的小行家
									<div class="article-bottom">
										<time class="pull-right">09:00&nbsp;&nbsp;&nbsp;&nbsp;2017-07-10</time>
										<p class="pull-left"><i class="glyphicon glyphicon-heart-empty"></i><span>点赞</span></p>
									</div>
								</article>
								<div class="comment">
									<input type="text" class="form-control" id="comment-dynamic" placeholder="评论...">
									<button type="button">评论</button>
								</div>
								<div class="f-dynamic-comment">
									<ul class="list-group">
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
									</ul>
									<a class="pull-right all-comment" href="javascript:void(0)">查看全部评论</a>
								</div><!--f-dynamic-comment结束-->
							</div><!--f-dynamic-describe结束-->
						</div><!--f-dynamic-item结束-->
						<div class="f-dynamic-item clearfix">
							<div class="userImg pull-left">
								<img src="./images/1.jpg" alt="">
								<p>彭和平</p>
								<button class="btn" type="button">私信</button>
							</div>
							<div class="f-dynamic-describe pull-right">
								<article>
									啦啦啦啦啦啦，我是卖报的小行家
									<div class="article-bottom">
										<time class="pull-right">09:00&nbsp;&nbsp;&nbsp;&nbsp;2017-07-10</time>
										<p class="pull-left"><i class="glyphicon glyphicon-heart-empty"></i><span>点赞</span></p>
									</div>
								</article>
								<div class="comment">
									<input type="text" class="form-control" id="comment-dynamic" placeholder="评论...">
									<button type="button">评论</button>
								</div>
								<div class="f-dynamic-comment">
									<ul class="list-group">
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
									</ul>
									<a class="pull-right all-comment" href="javascript:void(0)">查看全部评论</a>
								</div><!--f-dynamic-comment结束-->
							</div><!--f-dynamic-describe结束-->
						</div><!--f-dynamic-item结束-->
						<div class="f-dynamic-item clearfix">
							<div class="userImg pull-left">
								<img src="./images/1.jpg" alt="">
								<p>彭和平</p>
								<button class="btn" type="button">私信</button>
							</div>
							<div class="f-dynamic-describe pull-right">
								<article>
									啦啦啦啦啦啦，我是卖报的小行家
									<div class="article-bottom">
										<time class="pull-right">09:00&nbsp;&nbsp;&nbsp;&nbsp;2017-07-10</time>
										<p class="pull-left"><i class="glyphicon glyphicon-heart-empty"></i><span>点赞</span></p>
									</div>
								</article>
								<div class="comment">
									<input type="text" class="form-control" id="comment-dynamic" placeholder="评论...">
									<button type="button">评论</button>
								</div>
								<div class="f-dynamic-comment">
									<ul class="list-group">
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
										<li>
											<p class="comment-describe">
												<a href="">彭和平</a>：
												四个铜板就买两份报
											</p>
										</li>
									</ul>
									<a class="pull-right all-comment" href="javascript:void(0)">查看全部评论</a>
								</div><!--f-dynamic-comment结束-->
							</div><!--f-dynamic-describe结束-->
						</div><!--f-dynamic-item结束-->
					</div><!--f-dynamic结束-->
					<button class="btn more" type="button">查看更多...</button>
				</div><!--f-dynamic-box结束-->
			</div><!--col-sm-6结束-->
			<div class="col-sm-3">
				<img src="./images/gg.png" alt="">
				<div class="recommended">
					<p class="title">推荐关注</p>
					<img src="./images/Penguins.jpg" alt="">
					<button class="btn" type="button" data-toggle="modal" data-target="#myModal"  data-whatever="1">私信</button>
					<span class="pull-right"><i class="glyphicon glyphicon-refresh"></i>换一换</span>
				</div>
			</div><!--col-sm-3结束-->
		</div>
	</div>
</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>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">私信他</h4>
      </div>
      <div class="modal-body">
        <textarea name="letter" id="" rows="5"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left">清空</button>
        <button type="button" class="btn pull-right">发送私信</button>
      </div>
    </div>
  </div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/common.js"></script>
<script src="js/friends.js"></script>
</body>
</html>