相思湖学院 15级Bootstrap课程
2017-11-21 09:19
请先登录。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（一）】实现网站关于页面 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（一）】实现网站关于页面 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（一）】实现网站关于页面 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（一）】实现网站关于页面 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
<!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;
}
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（一）】实现网站关于页面 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（一）】实现网站关于页面 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（一）】实现网站关于页面 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（一）】实现网站关于页面 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（一）】实现网站关于页面 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（一）】实现网站关于页面 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（一）】实现网站关于页面 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（一）】实现网站关于页面 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（二）】实现网站的列表页 的任务作业。
提交了 相思湖学院 15级Bootstrap课程 任务 【全局CSS与组件（一）】实现网站关于页面 的任务作业。