该页面由7部分组成：
- 页面头部的响应式导航栏并设置监听
- 由巨幕和内联表单构成的标题
- bootstrap栅格系统构成的页面简介及缩略图
- bootstrap轮播图
- 面板
- 表单
- 带有返回页面顶部功能的页脚
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>分屏</title>
<link href="./分屏.css" rel="stylesheet" type="text/css">
<!--引入Bootstrap-->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--引入jQuery-->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!--引入Bootstrap的JS插件-->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar">
<!--导航栏-->
<!--如果将 .navbar-default 设置在<nav>上，她的宽度将是浏览器的宽度；
若设置在<ul>上，则它的宽度只有导航条的宽度(即"关于我们"到"联系我们"这么宽)-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">
<img src="./logo.png" width="50px" class="img-responsive img-thumbnail">
</a>
<button type="button" class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse">
<span class="sr-only">导航菜单</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--直接在<ul>上添加折叠，不用div承载列表也可以。结果不影响汉堡按钮的使用-->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#about">关于我们</a>
</li>
<li>
<a href="#service">服务</a>
</li>
<li>
<a href="#portfolio">环境</a>
</li>
<li>
<a href="#pricing">套餐</a>
</li>
<li>
<a href="#contact">联系我们</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="contianer1">
<!--页首-->
<div class="row">
<div class="jumbotron text-center">
<h1>程序园</h1>
<h4>我们专注于编程</h4>
<!--class="form-inline" 让表单元素水平排列-->
<form class="form-inline text-center">
<div class="form-group">
<!--size属性用于设置输入框的文本宽度，值越大，文本框越宽；
class="form-control" 用于设置输入框的样式：输入框比不设置时要高一点，附带边框效果。-->
<input type="text" class="form-control" size="50" placeholder="Email Address">
<button type="button" class="btn btn-danger">订阅</button>
</div>
</form>
</div>
</div>
<!--关于我们-->
<div class="row" id="about">
<div class="col-md-8">
<h3>关于公司</h3>
<p>提供各类前端学习方案</p>
<p>热爱编程者的学习天地</p>
<div>
<button type="button" class="btn">进入学习</button>
</div>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-signal"></span>
</div>
</div>
<hr>
<!--价值观-->
<div class="row">
<div class="col-md-4">
<span class="glyphicon glyphicon-globle logo"></span>
</div>
<div class="col-md-8 text-center">
<h3>我们的价值观</h3>
<p>使命：我们的使命是让更多人接触编程，喜爱编程</p>
<p>愿景：让编程成为人们的日常</p>
</div>
</div>
<hr>
<!--服务-->
<div class="row text-center" id="service">
<div class="col-md-12">
<h3>服务</h3>
<p>我们提供的</p>
</div>
<div class="row">
<div class="col-md-4">
<span class="glyphicon glyphicon-leaf"></span>
<h6>动力</h6>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-leaf"></span>
<h6>爱好</h6>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-leaf"></span>
<h6>奋斗</h6>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<span class="glyphicon glyphicon-leaf"></span>
<h6>创造</h6>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-leaf"></span>
<h6>认证</h6>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col-md-4">
<span class="glyphicon glyphicon-leaf"></span>
<h6>氛围</h6>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<hr>
<!--环境-->
<div class="row" id="portfolio">
<div class="row col-md-12 text-center">
<h3>风景</h3>
<p>向往的环境</p>
</div>
<div class="row text-center">
<div class="col-md-4 thumbnail">
<img src="https://static1.bcjiaoyu.com/f49febe723ba79c384a71a62e3571f2d_o.png-1200x800">
<p><strong>巴黎</strong></p>
<p>巴黎风光</p>
</div>
<div class="col-md-4 thumbnail">
<img src="https://static1.bcjiaoyu.com/519a8173d4933b4344c667cd389fd6ae_j.png-1200x800">
<p><strong>纽约</strong></p>
<p>纽约风光</p>
</div>
<div class="col-md-4 thumbnail">
<img src="https://static1.bcjiaoyu.com/770b3bd613dacfbeb225474068497adc_d.png-1200x800">
<p><strong>旧金山</strong></p>
<p>旧金山风光</p>
</div>
</div>
</div>
<!--轮播图-->
<div class="row">
<h3 class="text-center">轮播展示</h3>
<div id="Carousel" class="carousel slide" data-ride="carousel">
<!--轮播指标-->
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<!--轮播项目-->
<div class="carousel-inner">
<div class="item active">
<img src="https://static1.bcjiaoyu.com/f49febe723ba79c384a71a62e3571f2d_o.png-1200x800">
<p class="carousel-caption">巴黎</p>
</div>
<div class="item">
<img src="https://static1.bcjiaoyu.com/519a8173d4933b4344c667cd389fd6ae_j.png-1200x800">
<p class="carousel-caption">纽约</p>
</div>
<div class="item">
<img src="https://static1.bcjiaoyu.com/770b3bd613dacfbeb225474068497adc_d.png-1200x800">
<p class="carousel-caption">旧金山</p>
</div>
</div>
<!--轮播导航-->
<a data-target="#Carousel" class="left carousel-control" type="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#Carousel" type="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!--套餐-->
<div class="row" id="pricing">
<div class="row text-center">
<h3>套餐</h3>
<p>选择一份适合自己的方案</p>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">入门</div>
</div>
<!--没有分割线效果
<div class="panel-body text-center">
<table class="table">
<tr>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</tr>
<tr>
<p>¥99</p>
<button class="btn btn-primary">购买</button>
</tr>
</table>
</div>-->
<div class="panel-body text-center">
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</div>
<div class="panel-footer text-center">
<p>¥99</p>
<button class="btn btn-primary">购买</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">初级</div>
</div>
<div class="panel-body text-center" id="panelText">
<p>css3</p>
<p>jquery</p>
<p>bootstrap</p>
<p>vue.js</p>
</div>
<div class="panel-footer text-center">
<p>¥199</p>
<button class="btn btn-primary">购买</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">高级</div>
</div>
<div class="panel-body text-center">
<p>HTML5</p>
<p>PHP</p>
<p>MySQL</p>
</div>
<div class="panel-footer text-center">
<p>¥399</p>
<button class="btn btn-primary">购买</button>
</div>
</div>
</div>
</div>
</div>
<!--联系我们-->
<div class="row" id="contact">
<h3 class="text-center">联系我们</h3>
<div class="col-md-4">
<p>联系我们，我们将在24小时内回复您</p>
<div>
<span class="glyphicon glyphicon-map-marker"></span> 北京市丰台区
</div>
<div>
<span class="glyphicon glyphicon-phone"></span> +00 1888888888
</div>
<div>
<span class="glyphicon glyphicon-envelope"></span> my email@something.com
</div>
</div>
<div class="col-md-8">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="col-md-6">
<input type="e-mail" class="form-control" placeholder="E-mail">
</div>
</div>
<!--textarea不要用form-group包裹，否则宽度会超出其他输入框-->
<textarea type="text" class="form-control" placeholder="Comment" rows="5"></textarea>
<br>
<div class="form-group">
<div class="col-md-offset-4 col-md-8">
<!-- .pull-right向右浮动-->
<button type="submit" class="btn btn-info pull-right">发送</button>
</div>
</div>
</form>
</div>
</div>
<div class="row text-center footerText">
<div>
<a href="#myPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
</div>
<div>
<p>Bootstrap Made By<a href="https://www.jianshu.com/u/e6564aebfa00"></a>子却</p>
</div>
</div>
</div>
</body>
</html>
CSS
nav{
background-color: rgb(61, 124, 207);
}
#container1{
background-color: rgb(61, 124, 207);
}
.img-responsive{
position: absolute;
top: 0;
}
.navbar{
background-color: rgb(43, 81, 248);
}
#panelText{
height: 120px;
line-height: 1;
}
.footerText{
background-color: rgb(217, 221, 224);
}
.logo{
font-size: 200px;
}
网友评论