相思湖学院 15级Bootstrap课程

2017-11-21 09:19
请先登录。
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Title Page</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
    	#left{
            height: 100px;
            background-color: blue;
        }
        #right{
            height: 100px;
            background-color: green;

        }
        #left-1{
            height: 500px;
            background-color: orange;
        }
        #right-1{
            height: 300px;
            background-color: lightblue;
        }
        #right-2{
            height: 300px;
            background-color: lightgrey;
        }
        #right-3{
            height: 200px;
            background-color: grey;
        }
        #conter{
            height: 100px;
            background-color: lightblue;
        }

    	</style>
</head>
<body>
<div class="container-fluid mybody">
	<div class="col-md-3" id="left"></div>
	<div class="col-md-9" id="right"></div>
    <div class="col-md-6" id="left-1"></div>
    <div class="col-md-3" id="right-1"></div>
    <div class="col-md-3" id="right-2"></div>
    <div class="col-md-6" id="right-3"></div>
    <div class="col-md-12" id="conter"></div>
</div>
</body>
<script type="">js/jquery-3.2.1.js</script>
<script type="js/bootstrap.min.js"></script>

</html>
<!DOCTYPE html>
<html lang="">
    <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="width=device-width,initial-scale=1">
       <title>Title Page</title>
       <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
       <style type="text/css">
         #header{margin-top: 20px;}
         #left{
          font-size:30px;
          color:#337abb;
        }
         #right{
          text-decoration: none;
        }
         #button button{
          background-color:#efb73e;
          color:white;
          height:35px;width:60px;
         }
         #img img{
          width:160px;
          height:160px;
          border-radius:5px;
          margin-bottom:5px;
        }
         #green{
          height:221px;
          background-color:#2ecc71;
          margin-bottom:25px;
         }
         #red{
          height:211px;
          background-color:#dd4814;
          margin-bottom:25px;
        }
         #orange{
          height:211px;
          background-color:#ffa500;
          margin-bottom:25px;
        }
         #bottom{
          width:100%;
          height:100px;
          background-color:#cccccc;
          margin-top:53px;
          line-height:100px;
          text-align:center;
          font-weight:bold;
        }
         #text1{
          height:215px;
          width:410px;
          border:1px solid #dfdfdf;
        }
         #text2{
          height:215px;
          width:410px;
          border:1px solid #dfdfdf;
        }
         #text3{
          height:215px;
          width:410px;
          border:1px solid #dfdfdf;
        }
       </style>
<body>
    <!-- 头部 -->
    <div class="container">
        <div class="row" id="header">
            <div class="col-md-3" id="left">Terry Lee</div>
            <div class="col-md-2 col-md-offset-1" id="offset1"></div>
            <div class="col-md-5" id="right">
                <div class="col-md-2" id="button"><button>联系</button></div>
                <div class="col-md-5" id="information">
                <a>terry.lee@gmail.com 13901239073<br>北京市朝阳区劲松三区</a>
                </div>
                <div class="col-md-2" id="img"><img src="photo.png">
                </div>
            </div>
        </div>
        <hr style="height:2px;background-color:#dfdfdf;margin-bottom:43px;">

        <!-- 第一部分 -->
        <div class="row">
            <div class="col-md-6" id="green">
            <h3 style="color:white">个人介绍</h3>
            <a style="color:white">
              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?
            </a>
            </div>
            <div class="col-md-1" id="offset2"></div>
            <div class="col-md-5" id="text1">
            <h3>教育背景</h3>
            <a style="color:black">
              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.
            </a>
            </div>
        </div>
        
        <!-- 第二部分 -->
        <div class="row">
            <div class="col-md-6" id="red">
            <h3 style="color:white">个人技能</h3>
            <a style="color:white">HTML/CSS/Javascript Java/J2EE 数据库 Photoshop/UI</a>
            </div>
            <div class="col-md-1" id="offset2"></div>
            <div class="col-md-3" id="text2">
            <h3>工作经验</h3>
            <a style="color:black">
              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.
            </a>
          </div>
        </div>

        <!-- 第三部分 -->
        <div class="row">
            <div class="col-md-6" id="orange">
            <h3 style="color:white">语言水平</h3>
            <a style="color:white">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum nostrum pariatur facere laborum sint possimus assumenda nemo qui et quidem enim quibusdam a consequatur eius eveniet dolorum exercitationem asperiores quo.
            </a>
            </div>
            <div class="col-md-1" id="offset2"></div>
            <div class="col-md-3" id="text3">
            <h3>个人爱好</h3>
            <a style="color:black">骑马 旅游<br><br>美食<br><br>音乐</a>
          </div>
        </div>

        <!-- 尾部 -->
        <div class="row">
            <div class="col-md-12" id="bottom">
              <a style="color:white;">关注-微博</a>
            </div>
        </div>
      </div>
      
       
 </body>
 <script src="js/jquery-3.2.1.js"></script>
 <script src="js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="windth=device-width,initial-scale=1">
		<title>Title page</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<style type="text/css">
		#logo{
			height: 100px;
			background-color:blue; 
		}
		#menu{
			height: 100px;
			background-color: green;
		}
		#left{
			height:500px;
			background-color: orange
		}
		
		#inner_left{
			height: 300px;
			background-color: lightblue;
		}
		#inner_right{
			height: 300px;
			background-color: lightgrey;
		}
		#inner_bottom{
			height: 200px;
			background-color: black;
		}
		#footer{
			height: 100px;
			background-color: lightblue;
		}
		</style>
	</head>
	<body>
	    <div class="container-fluid">
	    	<div class="row">
	    		<div class="col-md-3" id="logo"></div>
	    		<div class="col-md-9" id="menu"></div>
	    	</div>
	    	<div class="row">
	    		<div class="col-md-6" id="left"></div>
	    		<div class="col-md-6" id="right">
	    			<div class="row">
	    				<div class="col-md-6" id="inner_left"></div>
	    				<div class="col-md-6" id="inner_right"></div>
	    				<div class="col-md-12" id="inner_bottom"></div>
	    			</div>
	    		</div>
	    	</div>
	    </div>
	    <div class="row">
	    	<div class="col-md-12" id="footer"></div>
	    </div>
	</body>
	<script scr="js/jquery-3.2.1.js"></script>
	<script scr="js/bootstrap.min.js"></script>
</html>