myBolg
/
简介.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--[if lt IE 9]>
      <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
<style>
body{
   font-family: 'microsoft yahei',Arial,sans-serif;
}

.carousel-control {
  padding-top:10%;
  width:10%;
}
/* 定义辅助CSS来美化简历头部 */
.cvheader{
  border-bottom: 1px solid #DFDFDF;
  padding-top:30px;
  padding-bottom:20px;
}

.cvheader h1{
  margin:0;
}

.address{
  background: #efb73e;
  color: #fff;
  padding: 10px 0;
}

/* 定义辅助CSS来美化简历主体 */

.cvbody{
  padding-top: 50px;
}

.cbox{
  margin-bottom: 30px;
  color: #FFF;
  padding: 50px;
}

/* 定义cbox颜色 */
.green{
  background: #2ecc71;
}

.orange{
  background: orange;
}

.red{
  background: #dd4814;
}

.bbox{
  border: 1px solid #DFDFDF;
  border-radius: 5px;
  margin-bottom:30px;
  padding: 50px;
}

.footer{
  margin: 30px 0 30px;
  padding: 50px;
  background: #CCC;
  color: #FFF;
}
</style>
<link href="bootstrap-3.3.0/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap-3.3.0/css/bootstrap-theme.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
  <div class="container">
    <div class="navbar-header active">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="main.jsp"><span class="glyphicon glyphicon-home"> 首页</span> </a> </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
      <li><a href="首页.html"><span class="glyphicon glyphicon-home"> 首页</span> </a></li>
        <li><a href="空间.html"><span class="glyphicon glyphicon-user"> 空间</span></a></li>
        <li><a href="aa/相册.html"><span class="glyphicon glyphicon-star"> 相册</span></a></li>
        <li><a href="留言板.html"><span class="glyphicon glyphicon-envelope" > 留言板</span></a></li>
        <li><a href="live/我的爱好.html"><span class="glyphicon glyphicon-home"> 我的爱好</span> </a></li>
        <li><a href="简介.html"><span class="glyphicon glyphicon-heart-empty" > 关注我吧！</span></a></li>
        <li><a href="订阅我的博客.html"><span class="glyphicon glyphicon-star"> 订阅我的博客</span></a></li>
      </ul>
   </div></div>
</div>
<br><br>
	<div class="row-fluid">
	<div class="container">
    <div class="col-md-12">
         <h1>基基基我是战斗机！</h1>
	<hr>
        <div class="well">
            <div id="imgCarousel" class="carousel slide" data-ride="carousel">

                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                             <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="Images/11.jpg" alt="Image" class="img-responsive"></a>


                            </div>
                            <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="Images/12.jpg" alt="Image" class="img-responsive"></a>

                            </div>
                            <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="Images/13.jpg" alt="Image" class="img-responsive"></a>

                            </div>
                            <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="Images/14.jpg" alt="Image" class="img-responsive"></a>

                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                    <div class="item">
                        <div class="row">
                             <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="Images/11.jpg" alt="Image" class="img-responsive"></a>


                            </div>
                            <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="Images/12.jpg" alt="Image" class="img-responsive"></a>

                            </div>
                            <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="Images/13.jpg" alt="Image" class="img-responsive"></a>

                            </div>
                            <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="Images/14.jpg" alt="Image" class="img-responsive"></a>

                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                    <div class="item">
                        <div class="row">
                           <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="Images/11.jpg" alt="Image" class="img-responsive"></a>


                            </div>
                            <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="Images/12.jpg" alt="Image" class="img-responsive"></a>

                            </div>
                            <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="Images/13.jpg" alt="Image" class="img-responsive"></a>

                            </div>
                            <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="Images/14.jpg" alt="Image" class="img-responsive"></a>

                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    <!--/item-->
                </div>
                <!--/carousel-inner-->

                <a class="left carousel-control" href="#imgCarousel" data-slide="prev">‹</a>

                <a class="right carousel-control" href="#imgCarousel" data-slide="next">›</a>

            </div>
            <!--/myCarousel-->
        </div>
        <!--/well-->
    </div>
</div>
<!-- 定义简历的头部 //-->

<div class="container">
  <div class="row cvheader">
    <div class="col-lg-7 col-md-7 col-xs-12">
      <!--  添加颜色//-->
      <h1 class="text-primary">Jack_Ye</h1>
      <!--  添加图标 //-->
      <p><span class="glyphicon glyphicon-paperclip"></span> Android工程师 && UI设计师</p>
    </div>

    <div class="col-lg-3 col-md-3 col-xs-12">
      <div class="row">

        <div class="col-lg-4 col-md-4 col-xs-4">
          <!-- 添加ID定义, 点击此按钮会有popover效果 //-->
          <p id="contact" class="address text-center">联系</p>
        </div>

        <div class="col-lg-8 col-md-8 col-xs-8">
          <p><span class="glyphicon glyphicon-envelope"></span> ybj366533@qq.com</p>
          <p><span class="glyphicon glyphicon-earphone"></span> 13395055918</p>
          <p><span class="glyphicon glyphicon-road"></span> 厦门理工学院软件工程学院</p>
        </div>

      </div>
    </div>

    <div class="col-lg-2 col-md-2 col-xs-12">
      <p>
        <!-- 这里定义图片为响应式，并且添加圆角效果，以便保证图片在不同设备上都可以完美显示 //-->
        <img class="img-responsive img-rounded" src="Images/55.jpg" alt="">
       </p>
    </div>
  </div>
</div>

<!-- 定义简历的主体部分 //-->

<div class="container">
  <div class="row cvbody">

    <!-- 这里定义两个区域，布局定义如下：//-->

    <div class="col-lg-6 col-md-6 col-xs-12">

      <div class="row">
        <div class="cbox green">
          <h4>团队介绍</h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus asperiores eum consequatur hic rem earum repudiandae dicta! Est officiis similique fugiat quod quibusdam rerum ipsum eos soluta tempore cupiditate! Accusantium?
          </p>
        </div>
        <div class="cbox red">
          <h4>个人技能</h4>
          <p>
            <!-- 这里使用Bootstrap3的组件添加技能 //-->

            Android/UI
            <div class="progress">
              <div class="progress-bar progress-bar-success" style="width:80%"></div>
            </div>

            Java/J2EE
            <div class="progress">
              <div class="progress-bar progress-bar-primary" style="width:90%"></div>
            </div>

            数据库
            <div class="progress">
              <div class="progress-bar progress-bar-info" style="width:70%"></div>
            </div>

            HTML/CSS/Javascript
            <div class="progress">
              <div class="progress-bar progress-bar-warning" style="width:50%"></div>
            </div>
          </p>
        </div>
        <div class="cbox orange">
          <h4>语言水平</h4>
          <p>
            <!-- 这里添加用来生成图形的canvas对象　//-->
            <canvas id="zh" class="pull-right" width="150" height="150"></canvas>

            <canvas id="en" class="pull-left" width="150" height="150"></canvas>

            <p class="clearfix"></p>
          </p>
        </div>
      </div>

    </div>

    <!-- 为了清楚的分割两个区域，这里我们添加了一个空白区域，或者也可以在CSS中定义Margin实现//-->
    <div class="col-lg-1 col-md-1 col-xs-12"></div>

    <div class="col-lg-5 col-md-5 col-xs-12">

      <div class="row">
        <div class="bbox">
          <h4>永远的417</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione enim adipisci minima perspiciatis ad nesciunt iure asperiores voluptatem neque aperiam molestias cupiditate facilis a eveniet iste sapiente ab repellendus dignissimos.</p>
        </div>
        <div class="bbox">
          <h4>我们的梦想</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dolorem mollitia repellendus. Magni laudantium placeat repudiandae tempore iure deleniti obcaecati. Architecto delectus doloremque quo. Dicta ratione vero eos pariatur itaque.</p>
        </div>

        <div class="bbox">
          <h4>个人爱好</h4>
          <p>
            <span class="glyphicon glyphicon-tree-deciduous"></span> 篮球
            <span class="glyphicon glyphicon-plane"></span> 旅游
            <p><span class="glyphicon glyphicon-cutlery"></span> 美食</p>
            <p><span class="glyphicon glyphicon-music"></span> 音乐</p>
          </p>
        </div>
      </div>

    </div>


  </div>
</div>

<!-- 定义简历页底 //-->
<div class="container">
  <div class="row"><div class="footer text-center">关注-微博</div></div>
</div>


				</div>
			</div>
		</div>
</div>

  <!-- footer -->
  <footer>
    <hr />
    <div class="container">
      <p class="text-right">Copyright &copy; 13软件5班——叶炳基——1321001562.com 2015</p>
    </div>
  </footer>
  <!-- /footer -->
<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function() {
	$('#imgCarousel').carousel({
	  interval:2000,
      pause: hover
	});

    $('#imgCarousel').on('slid.bs.carousel', function() {
      //回调方法
	});
});
$(function(){
	  /*这里针对联系按钮添加一个popover组件*/
	  $('#contact').popover({
	    placement:'bottom', //popover位置
	    container: 'body',
	    html: true, //支持ＨＴＭＬ
	    content:'<p>QQ: 64611830</p><p>微博：weibo.com/叶炳基是战斗机</p><p>微信：向日葵丶鸭鸭</p>'
	  });


	  /* 下面添加语言技能图 */
	  $.getScript('http://www.chartjs.org/assets/Chart.js', function(){
	    // 这里使用chartjs来实现技能图，使用jQUery的方法获取chart.js

	    //定义中文语言水平数据和选项
	    var zhdata =[{
	      label: '中文水平',
	      value: 90,
	      highlight: '#FFC870',
	      color: '#F7464A'
	     }, {
	     　value: 10,
			color: "#EEEEEE"
	　}];

	    var zhoptions ={
				animation: true,
				segmentShowStroke : false // 不描边
	    };

	    var c = $('#zh');
	    var ct = c.get(0).getContext('2d');
	    var zhChart = new Chart(ct).Doughnut(zhdata, zhoptions) ;

	    //使用类似代码生成英文语言水平图表

	    //定义英文语言水平数据
	    var endata=[{
				label: '英文水平',
				value: 80,
				highlight: "#5AD3D1",
				color: "#4D5360"
			}, {
	        value: 20,
	        color: "#EEEEEE"
			}
	    ];

	    var enoptions = {
				animation: true,
				segmentShowStroke : false
		};

	    var c = $('#en');
	    var ct = c.get(0).getContext('2d');

	    var enchart = new Chart(ct).Doughnut(endata, enoptions);

	  });


	});
</script>
<script src="bootstrap-3.3.0/js/jquery-2.1.1.js"></script>
<script src="bootstrap-3.3.0/js/bootstrap.js"></script>
</body>
</html>