创建了 #相思湖学院 15级Bootstrap课程# 任务：
【栅格系统（二）】栅格系统实现响应式简历 。要求： 1、学会使用栅格系统基本样式设定，col-md-offset-*(lg/sm/xs)、col-md-pull-*(lg/sm/xs)、col-md-push-*(lg/sm/xs)。 2、认真思考，栅格系统进行元素布局时需要注意的问题。 实现效...
创建了 #相思湖学院 15级Bootstrap课程# 任务：
【MUI之UI组件】实现聊天列表页面 。要求： 1、使用MUI常用UI组件实现聊天列表页面 2、进行基本的组件操作控制，掌握蒙版、角标、列表、actionsheet等组件的使用。 3、理解组件API定义方式，并熟练使用。 实现效果：
创建了 #相思湖学院 15级Bootstrap课程# 任务：
【全局CSS与组件（一）】实现网站关于页面 。要求： 1、灵活使用Bootstrap中组件导例如航条、巨幕、列表组等，可以灵活修改BootStrap原有样式，以满足实际需求。 2、学习并掌握常用的全局CSS样式以及组件。 文本材料： 机构简介 瓢城企业培训有限公司是一家专业以智能化弱电...
创建了 #相思湖学院 15级Bootstrap课程# 任务：
【栅格系统（一）】栅格系统实现页面布局 。要求： 1、使用栅格系统实现如图所示色块布局。 2、思考container与container-fluid的区别。 3、通过查看栅格样式设定，理解媒体查询实现机制。 4、思考col-lg-* 、col-md-*、col-sm-*、col-xs-...
创建了 #相思湖学院 15级Bootstrap课程# 任务：
【全局CSS与组件（二）】实现网站的列表页 。要求： 1、灵活掌握Bootstrap组件例如媒体列表media、缩略图，并结合栅格系统实现页面元素布局。 2、复习之前样式及组件使用，以期快速完成页面搭建。 文本材料： 广电总局发布TVOS2.0 华为阿里参与研发 TVOS2.0是在TV...
<!DOCTYPE html>
<html lang="">
<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>answer</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="answer2.css">
</head>
<body>
<!-- 首部导航 -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- 当导航栏收起来会有一个折叠效果——按钮 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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" href="#"><img src="img/logo.png"></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<span class="glyphicon glyphicon-home"></span>
 首页
</a>
</li>
<li>
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-th-list"></span>
 咨询
</a>
</li>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-fire"></span>
 案例
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-question-sign"></span>
 关于
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<!-- 巨幕 -->
<!-- 之间放在body标记下面，不要放在container里面 -->
<div class="all">
<div class="jumbotron">
<div class="container">
<h1>资讯</h1>
<p>企业内训的最新动态、资源等...</p>
</div>
</div>
<div class="mybody">
<div class="container">
<div class="row">
<div class="col-md-7" id="left">
<div class="row" id="one">
<div class="col-md-5">
<img src="img/info1.jpg" style="width:290px;height:185px;padding-top:13px;">
</div>
<div class="col-md-7">
<h3>广电总局发布TVOS2.0 华为阿里参与研发</h3>
<p>TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。</p>
<br>
<p>admin 15 / 10 / 11</p>
</div>
</div>
<div class="row" id="two">
<div class="col-md-5">
<img src="img/info2.jpg" style="width:290px;height:185px;padding-top:13px;">
</div>
<div class="col-md-7">
<h3>苹果四寸手机为何要配置强大的A9处理器？</h3>
<p>苹果明年初有可能对外发布一款经过升级的四英寸手机，相当于iPhone 5s。该手机将会配置苹果在2015年旗舰手机中采用的A9处理器。配置性能如此强大的应用处理器？</p>
<br>
<p>admin 15 / 10 / 11</p>
</div>
</div>
<div class="row" id="three">
<div class="col-md-5">
<img src="img/info3.jpg" style="width:290px;height:185px;padding-top:13px;">
</div>
<div class="col-md-7">
<h3>六家互联网公司发声明 抵制流量劫持等违法行为</h3>
<p>六家互联网公司（今日头条、美团大众点评网、360、腾讯、微博、小米科技）发布联合声明，呼吁有关运营商打击流量劫持，重视互联网公司被流量劫持，可能导致的严重后果。</p>
<br>
<p>admin 15 / 10 / 11</p>
</div>
</div>
<div class="row" id="four">
<div class="col-md-5">
<img src="img/info1.jpg" style="width:290px;height:185px;padding-top:13px;">
</div>
<div class="col-md-7">
<h3>广电总局发布TVOS2.0 华为阿里参与研发</h3>
<p>TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。</p>
<br>
<p>admin 15 / 10 / 11</p>
</div>
</div>
<div class="row" id="fine">
<div class="col-md-5">
<img src="img/info2.jpg" style="width:290px;height:185px;padding-top:13px;">
</div>
<div class="col-md-7">
<h3>苹果四寸手机为何要配置强大的A9处理器？</h3>
<p>苹果明年初有可能对外发布一款经过升级的四英寸手机，相当于iPhone 5s。该手机将会配置苹果在2015年旗舰手机中采用的A9处理器。配置性能如此强大的应用处理器？</p>
<br>
<p>admin 15 / 10 / 11</p>
</div>
</div>
<div class="row" id="six">
<div class="col-md-5">
<img src="img/info3.jpg" style="width:290px;height:185px;padding-top:13px;">
</div>
<div class="col-md-7">
<h3>六家互联网公司发声明 抵制流量劫持等违法行为</h3>
<p>六家互联网公司（今日头条、美团大众点评网、360、腾讯、微博、小米科技）发布联合声明，呼吁有关运营商打击流量劫持，重视互联网公司被流量劫持，可能导致的严重后果。</p>
<br>
<p>admin 15 / 10 / 11</p>
</div>
</div>
</div>
<div class="col-md-4" id="right">
<h3>热门资讯</h3>
<div class="row">
<div class="col-md-5">
<img src="img/info2.jpg" style="width:155px;height:97px;">
</div>
<div class="col-md-7">
<p>苹果四寸手机为何要配置强大的A9处理器？</p>
<br>
<p>admin 15 / 10 / 11</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<img src="img/info1.jpg" style="width:155px;height:97px;">
</div>
<div class="col-md-7">
<p>广电总局发布TVOS2.0 华为阿里参与研发</p>
<br>
<p>admin 15 / 10 / 11</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<img src="img/info3.jpg" style="width:155px;height:97px;">
</div>
<div class="col-md-7">
<p>六家互联网公司发声明 抵制流量劫持等违法行为</p>
<br>
<p>admin 15 / 10 / 11</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<img src="img/info2.jpg" style="width:155px;height:97px;">
</div>
<div class="col-md-7">
<p>苹果四寸手机为何要配置强大的A9处理器？</p>
<br>
<p>admin 15 / 10 / 11</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<img src="img/info1.jpg" style="width:155px;height:97px;">
</div>
<div class="col-md-7">
<p>广电总局发布TVOS2.0 华为阿里参与研发</p>
<br>
<p>admin 15 / 10 / 11</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<img src="img/info2.jpg" style="width:155px;height:97px;">
</div>
<div class="col-md-7">
<p>苹果四寸手机为何要配置强大的A9处理器？</p>
<br>
<p>admin 15 / 10 / 11</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<img src="img/info3.jpg" style="width:155px;height:97px;">
</div>
<div class="col-md-7">
<p>六家互联网公司发声明 抵制流量劫持等违法行为</p>
<br>
<p>admin 15 / 10 / 11</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<img src="img/info3.jpg" style="width:155px;height:97px;">
</div>
<div class="col-md-7">
<p>六家互联网公司发声明 抵制流量劫持等违法行为</p>
<br>
<p>admin 15 / 10 / 11</p>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
<div class="container-fluid">
<div class="col-md-12" id="bottom">
<h5>企业培训 | 合作事宜 | 版权投诉</h5>
<br/>
<p>苏ICP 备12345678. ? 2009-2016 瓢城企训网. Powered by Bootstrap.</p>
</div>
</div>
<script src="js/jquery-3.2.1.js"></script>
<!-- Bootstrap JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
*{margin:0;padding:0;}
.navbar-brand {
padding:0;
}
.navbar{
margin-bottom:0px;
}
.jumbotron{
margin-top: 50px;
background-image: url("img/bg.jpg");
margin-bottom: 0px;
}
.jumbotron h1{
font-size: 33px;
color:#cccccc;
}
.jumbotron p{
font-size: 17px;
color:#cccccc;
}
.all{
background-color: #eeeeee;
padding-bottom: 20px;
}
#left{
background-color:white;
width:770px;
height:210px;
}
#left #two{
background-color:white;
margin-top:16px;
}
#left #three{
background-color:white;
}
#left #four{
background-color:white;
}
#left #fine{
background-color:white;
}
#left #six{
background-color:white;
}
#left h3{
font-size:21px;
font-weight: bold;
}
#right{
background-color:white;
width:400px;
}
.pagination{
margin-top:350px;
margin-left:665px;
}
#bottom{
background-color: #666666;
color:#eeeeee;
padding:10px 0;
text-align: center;
margin-top:5%;
}
#bottom h5{
font-size: 10px;
}
#bottom p{
font-size: 5px;
}
<!DOCTYPE html>
<html lang="">
<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>about</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="about2.css">
</head>
<body>
<!-- 首部导航 -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- 当导航栏收起来会有一个折叠效果——按钮 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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" href="#"><img src="img/logo.png"></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<span class="glyphicon glyphicon-home"></span>
 首页
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-th-list"></span>
 咨询
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-fire"></span>
 案例
</a>
</li>
<li class="active">
<a href="#">
<span class="glyphicon glyphicon-question-sign"></span>
 关于
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<!-- 巨幕 -->
<!-- 之间放在body标记下面，不要放在container里面 -->
<<div class="jumbotron">
<div class="container">
<h1>关于</h1>
<p>本机构的成长介绍...</p>
</div>
</div>
<!-- 内容 -->
<div class="mybody">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="list-group">
<a href="#" class="list-group-item">
<p class="list-group-item-text" style="color:#0059b2;">1.机构介绍</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text" style="color:#0059b2;">2.加入我们</p>
</a>
<a href="#" class="list-group-item">
<p class="list-group-item-text" style="color:#0059b2;">3.联系方式</p>
</a>
</div>
</div>
<div class="col-md-9 content">
<h3 class="title">机构简介</h3>
<p>
瓢城企业培训有限公司是一家专业以智能化弱电工程为主的高科技民营企业，公司自创立以来一直专业致力于智能化弱电工程；始终坚持发扬“诚信、创新、沟通”为企业宗旨，以“技术、服务”为立业之本的团体精神，并形成一套完整的设计、安装、调试、培训、维护一站式服务体系。
</p>
<h3 class="title">加入我们</h3>
<p>
网络已深刻改变着人们的生活，本地化生活服务市场前景巨大，生活半径团队坚信本地化生活服务与互联网的结合将会成就一家梦幻的公司，我们脚踏实地的相信梦想，我们相信你的加入会让生活半径更可能成为那家梦幻公司！生活半径人有梦想，有魄力，强执行力，但是要实现这个伟大的梦想，需要更多的有创业精神的你一路前行。公司将提供有竞争力的薪酬，完善的福利（五险一金）、期权、广阔的上升空间。只要你有能力、有激情、有梦想，愿意付出，愿意与公司共同成长，请加入我们！
</p>
<p>
请发送您的简历到：hr@xxx.com,我们会在第一时间联系您。邮箱：klasdfjdlaal@sdkfj.com
</p>
<h3 class="title">联系方式</h3>
<div class="row">
<div class="col-md-8">
<form action="" method="">
<div class="form-group">
<input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="" placeholder="邮箱">
</div>
<div class="form-group">
<input type="text" name="" id="input" class="form-control" value="" required="required" pattern="" title="" placeholder="标题">
</div>
<div class="form-group">
<textarea name="" id="input" class="form-control" rows="9" required="required" placeholder="内容"></textarea>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" style="width:100%">提交</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-md-12" id="bottom">
<h5>企业培训 | 合作事宜 | 版权投诉</h5>
<br/>
<p>苏ICP 备12345678. ? 2009-2016 瓢城企训网. Powered by Bootstrap.</p>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery-3.2.1.js"></script>
<!-- Bootstrap JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
*{margin:0;padding:0;}
.navbar-brand {
padding:0;
}
.navbar{
margin-bottom:0px;
}
.jumbotron{
margin-top: 50px;
background-image: url("img/bg.jpg");
margin-bottom: 0px;
}
.jumbotron h1{
font-size: 33px;
color:#cccccc;
}
.jumbotron p{
font-size: 17px;
color:#cccccc;
}
.mybody{
background-color: #eeeeee;
padding-top:50px;
padding-bottom: 20px;
}
#bottom{
background-color: #666666;
color:white;
padding:10px 0;
text-align: center;
}
#bottom h5{
font-size: 10px;
}
#bottom p{
font-size: 5px;
}
#left-text p{
color:blue;
}
.content{
background-color: #fff;
}
.title{
font-size: 20px;
border-bottom:1px solid #ccc;
padding-bottom:20px;
}
.content h3{
font-weight: bold;
}
.content p{
font-size: 15px;
line-height: 30px;
}
.form-control,textarea,button{
border-radius: 0px!important;
}
sublime text 中package control安装教程！https://devework.com/sublime-text-3-package-control.html
<!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>
怎么交作业？
┻┳|･ω･)
<!DOCTYPE html>
<html lang="">
<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">
#logo{
background:blue;
height:100px;
}
#top{
background:green;
height:100px;
}
#left{
background:orange;
height:500px;
}
#right-1{
background:lightblue;
height:300px;
}
#right-2{
background:lightgrey;
height:300px;
}
#right-3{
background:grey;
height:200px;
}
#bottom{
background:lightblue;
height:100px;
}
</style>
</head>
<body>
<div class="container-fulid">
<div class="row">
<div class="col-md-3" id="logo"></div>
<div class="col-md-9" id="top"></div>
</div>
<div class="row">
<div class="col-md-6" id="left"></div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6" id="right-1"></div>
<div class="col-md-6" id="right-2"></div>
</div>
<div class="row">
<div class="col-md-12" id="right-3"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" id="bottom""></div>
</div>
</div>
</body>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js" ></script>
</html>
<!DOCTYPE html>
<html lang ="">
<head>
<meat charset="utf-8">
<meat http-equiv="X-UA-Compatible" content="IE=edge">
<meat name="viewport" content="width=device-width,ubutuak-scale=1">
<title> </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:grey;
}
#footll{
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 class="row">
<div class="col-md-12" id="footll"></div>
</div>
</div>
</body>
<script src="js/jquery-3.2.1js"></script>
<script src="js/bootstrap.min.js"></script>
</html>
课程任务
课程学员
ITM1班彰-24
ITM2 潘海林17
ITM2班-苏琪06
ITM2班熊宏杰26
ITM2-覃春莹-7
ITM2李盛华46
ITM2班李家明23
ITM1班-林林17
ITM2班黄明虹38