master

分支 (2)

管理

管理

master

user_info

FamilyTree-UI
/
index.html

<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>族谱网首页</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<header>
    <div class="header row">
        <div class="pull-left col-xs-6">
            <img src="images/logo_xs.png" alt="族谱网www.zupu.cn" class="img-responsive m-r">
            <img src="images/logo_text.png" alt="族谱网www.zupu.cn" class="hidden-sm hidden-xs" >
        </div>
        <div class="pull-right col-xs-6 text-right">
            <!--<span class="m-r"><i class="fa fa-bell"></i> 杨薇(10072) </span> <span><i class="fa fa-sign-out"></i> 退出登录</span>-->
            <div class="login hidden-xs hidden-sm">
                <form action="">
                    <div class="form-group">
                        <input type="text" class="form-control  col-md-3" placeholder="手机号/用户名">
                        <input type="text" class="form-control  col-md-3" placeholder="密码">
                        <button class="btn btn_theme">登录</button>
                        <button class="btn btn_nb">注册</button>
                    </div>
                </form>
            </div>
            <div class="login_xs hidden-lg hidden-md">
                <a href="#"><button class="btn btn_nb text_theme">注册</button></a>
                <a href="#"><button class="btn btn_xs">登录</button></a>
            </div>
        </div>
    </div>
</header>
<nav>
    <div class="nav clearfix">
        <div class="pull-left">
            <ul>
                <li class="active"><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="pull-right text-right p-r-md hidden-xs hidden-sm">
            <a href="#"> <i class="fa fa-video-camera m-r-xs"></i>了解族谱网</a>
        </div>
    </div>
</nav>
<div class="container index">
    <div class="row m-t-md">
        <div class="col-md-8 col-sm-8 col-xs-12">
            <div class="people">
                <div class="f14">
                    已有 <span class="text_theme f18 fwb ft_num">192920</span> 人加入族谱网！
                </div>
                <div class="head m-t">
                    <div class="photo_wall hidden-xs">
                        <table width="728px" border="0">
                            <tr>
                                <td  width="91px" height="92px">
                                  <div class="pictures">
                                    <a href="#">
                                      <img src="images/demo03.jpg" alt="" class="img-responsive picture">
                                    </a>
                                  </div>
                                </td>
                                <td colspan="2" rowspan="2" width="182px" height="182px">
                                  <div class="pictures">
                                    <a href="#">
                                      <img src="images/head01.jpg" alt="" class="img-responsive picture">
                                    </a>
                                  </div>
                                </td>
                                <td  width="91px" height="91px">
                                  <div class="pictures">
                                    <a href="#">
                                      <img src="images/demo03.jpg" alt="" class="img-responsive picture">
                                    </a>
                                  </div>
                                </td>
                                <td colspan="3" rowspan="3" width="273px" height="273px">
                                  <div class="pictures">
                                    <a href="#">
                                      <img src="images/head01.jpg" alt="" class="img-responsive picture">
                                    </a>
                                  </div>
                                </td>
                                <td  width="91px"  height="91px">
                                  <div class="pictures">
                                    <a href="#">
                                      <img src="images/demo03.jpg" alt="" class="img-responsive picture">
                                    </a>
                                  </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                  <div class="pictures">
                                    <a href="#">
                                      <img src="images/demo03.jpg" alt="" class="img-responsive picture">
                                    </a>
                                  </div>
                                </td>
                                <td>
                                  <div class="pictures">
                                    <a href="#">
                                      <img src="images/demo03.jpg" alt="" class="img-responsive picture">
                                    </a>
                                  </div>
                                </td>
                                <td class="pictures">
                                  <div class="pictures">
                                    <a href="#">
                                      <img src="images/demo03.jpg" alt="" class="img-responsive picture">
                                    </a>
                                  </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                  <div class="pictures">
                                    <a href="#">
                                      <img src="images/demo03.jpg" alt="" class="img-responsive picture">
                                    </a>
                                  </div>
                                </td>
                                <td>
                                  <div class="pictures">
                                    <a href="#">
                                      <img src="images/demo03.jpg" alt="" class="img-responsive picture">
                                    </a>
                                  </div>
                                </td>
                                <td>
                                  <div class="pictures">
                                    <a href="#">
                                      <img src="images/demo03.jpg" alt="" class="img-responsive picture">
                                    </a>
                                  </div>
                                </td>
                                <td>
                                  <div class="pictures">
                                    <a href="#">
                                      <img src="images/demo03.jpg" alt="" class="img-responsive picture">
                                    </a>
                                  </div>
                                </td>
                                <td>
                                  <div class="pictures">
                                    <a href="#">
                                      <img src="images/demo03.jpg" alt="" class="img-responsive picture">
                                    </a>
                                  </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="hidden-sm hidden-md hidden-lg m-b clearfix">
                        <div class="col-md-4 col-sm-4 col-xs-4 p0">
                            <img src="images/2.jpg" alt="" class="img-responsive p2">
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-4 p0">
                            <img src="images/2.jpg" alt="" class="img-responsive p2">
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-4 p0">
                            <img src="images/2.jpg" alt="" class="img-responsive p2">
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-4 p0">
                            <img src="images/2.jpg" alt="" class="img-responsive p2">
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-4 p0">
                            <img src="images/2.jpg" alt="" class="img-responsive p2">
                        </div>
                        <div class="col-md-4 col-sm-4 col-xs-4 p0">
                            <img src="images/2.jpg" alt="" class="img-responsive p2">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div class="model_title">
                <i class="fa fa-envira text_gray"></i> 创建我的族谱
            </div>
            <div class="create m-t">
                <!--<div class="one_step">
                    <div class="father col-md-6 col-sm-6 col-xs-6">
                        <div class="col-md-12 text-center"><img src="images/father.png" alt=""></div>
                        <input type="text" placeholder="父亲">
                    </div>
                    <div class="mother col-md-6 col-sm-6 col-xs-6">
                        <div class="col-md-12 text-center"><img src="images/mother.png" alt=""></div>
                        <input type="text" placeholder="母亲">
                    </div>
                    <div class="clearfix"></div>
                    <div class="me">
                        <div class="col-md-12 text-center"><img src="images/me.png" alt=""></div>
                        <input type="text" placeholder="我的名字">
                    </div>
                    <div class="clearfix"></div>
                    <div class="auto_center"><button class="col-md-12 col-xs-12 btn_theme">马上创建</button></div>
                </div>-->
                <!--<div class="two_step login">
                    <form action="">
                        <div class="form_group">
                            <label for="number">手机号码</label>
                            <i class="fa fa-mobile f22" aria-hidden="true"></i>
                            <input type="email" class="form-control" id="number">
                        </div>
                        <div class="form_group">
                            <label for="pwd">设置密码</label>
                            <i class="fa fa-unlock-alt f18" aria-hidden="true"></i>
                            <input type="email" class="form-control" id="pwd" >
                        </div>
                        <div class="form_group validate">
                            <label for="validate">验证码</label>
                            <div>
                                <input type="email" class="form-control" id="validate" >
                                <button class="btn_theme">发送验证码</button>
                            </div>
                        </div>
                        <button class="btn_theme w">下一步</button>
                    </form>
                </div>-->
                <div class="three_step">
                    <div class="media">
                        <div class="media-body">
                            <div class="clearfix m-t">
                                <div class="pull-left f16">杨薇</div>
                                <div class="pull-right"><a href="#" class="text_theme">完善资料</a></div>
                            </div>
                            <p class="m-t">族谱号：100020</p>
                            <p class="m-t">手机号：13894839898</p>
                        </div>
                        <div class="media-right">
                            <div class="pictures">
                              <a href="#"><img class="picture" src="images/demo02.jpg" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <div class="row p-b-lg">
                        <div class="col-md-6 col-xs-6 m-t"><a href="#" class="active"><i class="fa fa-home"></i> 个人主页</a></div>
                        <div class="col-md-6 col-xs-6 m-t"><a href="#"><i class="fa fa-pencil-square-o"></i> 发布记录</a></div>
                        <div class="col-md-6 col-xs-6 m-t"><a href="#"><i class="fa fa-book"></i> 族谱(22)</a></div>
                        <div class="col-md-6 col-xs-6 m-t"><a href="#"><i class="fa fa-plus"></i> 添加家人</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row m-t-md">
        <div class="col-md-12 col-xs-12 lh25">
            <div class="pull-left">
                <div class="model_title">
                    <i class="fa fa-fire text_theme"></i> 热门记录
                </div>
            </div>
            <div class="pull-right f14">
                <a href="#"><i class="fa fa-edit"></i> 我要发布</a>
                <span class="f12"> | <a href="#" class="text_gray">更多</a></span>
            </div>
        </div>
    </div>
    <div class="row m-t">
        <div class="col-md-3 col-sm-3 recommend">
            <div class="pictures">
              <img src="images/2.jpg" alt="" class="picture">
            </div>
            <div class="hot">推荐</div>
            <div class="title">信仰的艺术</div>
        </div>
        <div class="col-md-9 col-sm-9 pl0">
            <ul class="record">
                <li class="single_record col-md-6 col-sm-6 col-xs-12">
                    <div class="media f12">
                        <div class="text_oneline f16">
                            <a href="#">信仰的艺术</a>
                        </div>
                        <p class="text_oneline m-b">历史文化名城长沙，文化名城长沙，回风巷水</p>
                        <div class="clearfix">
                            <div class="pull-left text_gray">来自：杨薇 &nbsp; 1862人阅读</div>
                            <div class="pull-right"><button class="btn_xs">阅读</button></div>
                        </div>
                    </div>
                </li>
                <li class="single_record col-md-6 col-sm-6  col-xs-12">
                    <div class="media f12">
                        <div class="text_oneline f16">
                            <a href="#"> 信仰的艺术</a>
                        </div>
                        <p class="text_oneline m-b">历史文化名城长沙，文化名城长沙，回风巷水</p>
                        <div class="intercept_btn_xs">
                            <div class="pull-left text_gray">来自：杨薇 &nbsp; 1862人阅读</div>
                            <div class="pull-right"><button class="btn_xs">阅读</button></div>
                        </div>
                    </div>
                </li>
                <li class="single_record col-md-6 col-sm-6  col-xs-12">
                    <div class="media f12">
                        <div class="hot">
                            <span>hot</span>
                        </div>
                        <div class="media-left">
                           <div class="pictures">
                              <a href="#">
                                  <img class="media-object picture" src="images/demo02.jpg" alt="">
                              </a>
                          </div>
                        </div>
                        <div class="media-body">
                            <div class="text_oneline f16">
                                <a href="#">丰富多彩的前端世界让前端开发人员越来越痴迷</a>
                            </div>
                            <p class="text_oneline m-b">历史文化名城长沙，文化名城长沙，回风巷水</p>
                            <div class="intercept_btn_xs">
                                <div class="pull-left text_gray">来自：杨薇 &nbsp; 1862人阅读</div>
                                <div class="pull-right"><button class="btn_xs">阅读</button></div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="single_record col-md-6 col-sm-6  col-xs-12">
                    <div class="media f12">
                        <div class="text_oneline f16">
                            <a href="#">信仰的艺术</a>
                        </div>
                        <p class="text_oneline m-b">历史文化名城长沙，文化名城长沙，回风巷水</p>
                        <div class="clearfix">
                            <div class="pull-left text_gray">来自：杨薇 &nbsp; 1862人阅读</div>
                            <div class="pull-right"><button class="btn_xs">阅读</button></div>
                        </div>
                    </div>
                </li>
                <li class="single_record col-md-6 col-sm-6  col-xs-12">
                    <div class="media f12">
                        <div class="text_oneline f16">
                            <a href="#"> 信仰的艺术</a>
                        </div>
                        <p class="text_oneline m-b">历史文化名城长沙，文化名城长沙，回风巷水</p>
                        <div class="clearfix">
                            <div class="pull-left text_gray">来自：杨薇 &nbsp; 1862人阅读</div>
                            <div class="pull-right"><button class="btn_xs">阅读</button></div>
                        </div>
                    </div>
                </li>
                <li class="single_record col-md-6 col-sm-6  col-xs-12">
                    <div class="media f12">
                        <div class="text_oneline f16">
                            <a href="#">HTML是骨骼、架构，CSS是肌肉、美妆，JS是运动、表现。</a>
                        </div>
                        <p class="text_oneline m-b">历史文化名城长沙，文化名城长沙，回风巷水</p>
                        <div class="clearfix">
                            <div class="pull-left text_gray">来自：杨薇 &nbsp; 1862人阅读</div>
                            <div class="pull-right"><button class="btn_xs">阅读</button></div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="banner m-t-md">
        <img src="images/banner.jpg" alt="族谱网手机APP下载，注册即送100元话费" class="img-responsive">
    </div>
    <div class="row">
        <div class="col-md-8 col-sm-8 col-xs-12  m-t-md">
            <div class="model_title">
                <i class="text_theme">|</i> 最新记录
            </div>
            <ul class="new_record">
                <li class="m-t">
                    <div class="single_record">
                        <div class="record_head f16">
                            <img src="images/head02.jpg" alt="" class="m-r">
                            <span class="text_theme fwb">杨薇</span>
                            <span class="text_gray f12 vat"> | </span>
                            <span class="text_oneline fwb"><a href="#">信仰的艺术--大师笔下的风景</a></span>
                        </div>
                        <div class="record_text m-t f14">
                            <a href="#">移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
                            也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式</a>
                        </div>
                        <div class="record_img">
                            <ul class="clearfix">
                                <li>
                                  <div class="pictures">
                                    <img class="picture" src="images/demo01.jpg" alt="">
                                  </div>
                                </li>
                                <li>
                                  <div class="pictures">
                                    <img class="picture" src="images/demo01.jpg" alt="">
                                  </div>
                                </li>
                                <li>
                                  <div class="pictures">
                                    <img class="picture" src="images/demo01.jpg" alt="">
                                  </div>
                                </li>
                            </ul>
                        </div>
                        <div class="record_info clearfix text_gray f12">
                            <div class="pull-left">20分钟前</div>
                            <div class="pull-right">浏览4688</div>
                        </div>
                    </div>
                </li>
                <li class="m-t">
                    <div class="single_record">
                        <div class="record_head f16">
                            <a href="#"><img src="images/head02.jpg" alt="" class="m-r"></a>
                            <span class="text_theme fwb">杨薇</span>
                            <span class="text_gray f12 vat"> | </span>
                            <span class="text_oneline fwb"><a href="#">信仰的艺术--大师笔下的风景</a></span>
                        </div>
                        <div class="record_text m-t f14">
                            移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
                            也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式
                        </div>
                        <div class="record_img">
                          <ul class="clearfix">
                              <li>
                                <div class="pictures">
                                  <img class="picture" src="images/demo01.jpg" alt="">
                                </div>
                              </li>
                              <li>
                                <div class="pictures">
                                  <img class="picture" src="images/demo01.jpg" alt="">
                                </div>
                              </li>
                              <li>
                                <div class="pictures">
                                  <img class="picture" src="images/demo01.jpg" alt="">
                                </div>
                              </li>
                          </ul>
                        </div>
                        <div class="record_info clearfix text_gray f12">
                            <div class="pull-left">20分钟前</div>
                            <div class="pull-right">浏览4688</div>
                        </div>
                    </div>
                </li>
                <li class="m-t">
                    <div class="single_record">
                        <div class="record_head f16">
                            <a href="#"><img src="images/head02.jpg" alt="" class="m-r"></a>
                            <span class="text_theme fwb">杨薇</span>
                            <span class="text_gray f12 vat"> | </span>
                            <span class="text_oneline fwb"><a href="#">信仰的艺术--大师笔下的风景</a></span>
                        </div>
                        <div class="record_text m-t f14">
                            移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
                            也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式
                        </div>
                        <div class="record_img">
                          <ul class="clearfix">
                              <li>
                                <div class="pictures">
                                  <img class="picture" src="images/demo01.jpg" alt="">
                                </div>
                              </li>
                              <li>
                                <div class="pictures">
                                  <img class="picture" src="images/demo01.jpg" alt="">
                                </div>
                              </li>
                              <li>
                                <div class="pictures">
                                  <img class="picture" src="images/demo01.jpg" alt="">
                                </div>
                              </li>
                          </ul>
                        </div>
                        <div class="record_info clearfix text_gray f12">
                            <div class="pull-left">20分钟前</div>
                            <div class="pull-right">浏览4688</div>
                        </div>
                    </div>
                </li>
                <li class="m-t">
                    <div class="single_record">
                        <div class="record_head f16">
                            <a href="#"><img src="images/head02.jpg" alt="" class="m-r"></a>
                            <span class="text_theme fwb">杨薇</span>
                            <span class="text_gray f12 vat"> | </span>
                            <span class="text_oneline fwb"><a href="">信仰的艺术--大师笔下的风景</a></span>
                        </div>
                        <div class="record_text m-t f14">
                            移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
                            也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式
                        </div>
                        <div class="record_info clearfix text_gray f12">
                            <div class="pull-left">20分钟前</div>
                            <div class="pull-right">浏览4688</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-12  m-t-md">
            <div class="row">
                <div class="col-md-12 col-xs-12">
                    <div class="model_title">
                        <i class="text_theme">|</i> 族谱动态
                    </div>
                    <div class="list_dashed m-t">
                        <ul>
                            <li>
                                <a href="#" class="title">杨薇 创建了记录 《刘氏九修族谱》</a>
                                <span class="date"><button class="btn_xs f12 text_gray">08-27</button></span>
                            </li>
                            <li>
                                <a href="#" class="title">杨薇 创建了记录 《刘氏九修族谱》</a>
                                <span class="date"><button class="btn_xs f12 text_gray">08-27</button></span>
                            </li>
                            <li>
                                <a href="#" class="title">杨薇 创建了记录 《刘氏九修族谱》</a>
                                <span class="date"><button class="btn_xs f12 text_gray">08-27</button></span>
                            </li>
                            <li>
                                <a href="#" class="title">杨薇 创建了记录 《刘氏九修族谱》</a>
                                <span class="date"><button class="btn_xs f12 text_gray">08-27</button></span>
                            </li>
                            <li>
                                <a href="#" class="title">杨薇 创建了记录 《刘氏九修族谱》</a>
                                <span class="date"><button class="btn_xs f12 text_gray">08-27</button></span>
                            </li>
                            <li>
                                <a href="#" class="title">杨薇 创建了记录 《刘氏九修族谱》</a>
                                <span class="date"><button class="btn_xs f12 text_gray">08-27</button></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-12 col-xs-12 m-t-md">
                    <div class="model_title">
                        <i class="text_theme">|</i> 阴阳八卦修谱法
                    </div>
                    <div class="m-t zp_img">
                        <img src="images/zupu.gif" alt="" class="img-responsive">
                    </div>
                </div>
                <div class="col-md-12 col-xs-12 m-t-md">
                    <div class="model_title">
                        <i class="text_theme">|</i> 族谱新闻
                    </div>
                    <div class="list_dashed li_list m-t">
                        <ul>
                            <div class="media">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object" src="images/demo02.jpg" alt="">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading f16 fwb text_oneline">
                                        <a href="#">长沙伍氏宗亲联谊会成立</a>
                                    </h4>
                                    <div class="m-t">
                                        历史文化名城长沙，丽日当空，长沙市无视纵情联谊会成立大会在红星国际大酒店隆重举行。长沙市无视纵情联谊会成立大会在红星国际大酒店隆重举行
                                    </div>
                                </div>
                            </div>
                            <li>
                                <a href="#" class="title"><i class="square"></i> 湖南新化武士龙宫前年 族谱网无人机航拍</a>
                            </li>
                            <li>
                                <a href="#" class="title"><i class="square"></i> 问：我从哪里来？答：我从族谱来</a>
                            </li>
                            <li>
                                <a href="#" class="title"><i class="square"></i> 王者一封：湖南三槐王氏潘普庆典隆重热烈</a>
                            </li>
                            <li>
                                <a href="#" class="title"><i class="square"></i> 杨薇 创建了记录 《刘氏九修族谱》</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-12 col-xs-12 m-t-md">
                    <div class="model_title">
                        <i class="text_theme">|</i> 百家姓
                    </div>
                    <div class="m-t family_names">
                        <ul>
                            <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>
                            <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>
                            <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>
                            <li><a href="#">高</a></li>
                            <li><a href="#">林</a></li>
                            <li><a href="#">罗</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="news m-t-md">
        <div class="model_title">
            <span class="m-r"><i class="text_theme">|</i> 族谱新闻</span>
            <span class="f12">各大新闻媒体对族谱网的相关报道</span>
        </div>
        <div class="news_li m-t-xs">
            <ul>
                <li class="col-md-3 col-sm-6 col-xs-6">
                    <div>
                        <a href="#"><img src="images/f3_hover.jpg" alt="" class="img-responsive"></a><p>族谱网参加彭氏迁徙千周年典礼</p>
                    </div>
                </li>
                <li class="col-md-3 col-sm-6 col-xs-6">
                    <div>
                        <a href="#"><img src="images/f2_hover.jpg" alt="" class="img-responsive"></a><p>族谱网参加彭祖才库迁徙梅已典礼</p>
                    </div>
                </li>
                <li class="col-md-3 col-sm-6 col-xs-6">
                    <div>
                        <a href="#"><img src="images/f1_hover.jpg" alt="" class="img-responsive"></a><p>族谱网参加扶氏志清公祭</p>
                    </div>
                </li>
                <li class="col-md-3 col-sm-6 col-xs-6">
                    <div>
                        <a href="#"><img src="images/f4_hover.jpg" alt="" class="img-responsive"></a><p>族谱网参加伍氏隆公后裔祭奠</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="friend_link m-t-md">
    <div class="max_body">
        <div class="link">
            <h4>姓氏新闻</h4>
            <ul class="list-inline">
                <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>
                <li><a href="#">杨氏新闻</a></li>
                <li><a href="#">谭氏新闻</a></li>
                <li><a href="#">姚氏新闻</a></li>
            </ul>
            <span class="show_more">
                <i class="fa fa-angle-down"></i>
            </span>
        </div>
        <div class="link">
            <h4>姓氏文化</h4>
            <ul class="list-inline">
                <li><a href="#">陈氏新闻</a></li>
                <li><a href="#">刘氏新闻</a></li>
                <li><a href="#">隆氏新闻</a></li>
            </ul>
            <span class="show_more">
                <i class="fa fa-angle-up"></i>
            </span>
        </div>
        <div class="link">
            <h4>姓氏源流</h4>
            <ul class="list-inline">
                <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>
                <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>
            <span class="show_more">
                <i class="fa fa-angle-down"></i>
            </span>
        </div>
        <div class="link">
            <h4>姓氏名人</h4>
            <ul class="list-inline">
                <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>
            <span class="show_more">
                <i class="fa fa-angle-down"></i>
            </span>
        </div>
        <div class="link">
            <h4>友情链接</h4>
            <ul class="list-inline">
                <li><a href="#">族谱网</a></li>
                <li><a href="#">土流网</a></li>
                <li><a href="#">祭拜网</a></li>
                <li><a href="#">为先在线</a></li>
                <li><a href="#">258星座网</a></li>
                <li><a href="#">历史网</a></li>
                <li><a href="#">企业网站优化</a></li>
                <li><a href="#">谭氏新闻</a></li>
                <li><a href="#">258星座网</a></li>
                <li><a href="#">历史网</a></li>
                <li><a href="#">企业网站优化</a></li>
                <li><a href="#">谭氏新闻</a></li>
            </ul>
            <span class="show_more">
                <i class="fa fa-angle-down"></i>
            </span>
        </div>
    </div>
</div>
<footer>
    <div class="footer hidden-xs hidden-sm">
        <div class="pull-left">版权所有2016@族谱网  &nbsp;&nbsp;备案：湘ICP备 16004624</div>
        <div class="pull-right">百度权威信誉认证网站 <a href="#">关于族谱网</a></div>
    </div>
    <div class="footer hidden-lg hidden-md text-center">
        @2016族谱网  &nbsp;&nbsp;湘ICP备 16004624号</div>
    </div>
</footer>
</body>
</html>