搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 梁平人才网 > 梁平HTML 5网页编程bootstrap响应式开发培训(十五、十七)

梁平HTML 5网页编程bootstrap响应式开发培训(十五、十七)

梁平人才网 2019-04-05

教程十五

H5响应式开发之案例(一)

<!DOCTYPE html>

<html lang="zh-cn">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

 <title>PHP中文网</title>

 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

 <style>

 body {

 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;


 }

 #myCarousel{

 margin: 50px 0 0 0;

 }

 .logo{

 padding: 0;

 }

 .daohang{

 margin-top: 0;

 }

 .carousel-inner img{


 margin: 0 auto;

 }

 .jumbotron{

 background-image: url(http://img.php.cn/upload/course/000/000/004/581af31542837558.jpg);

 margin: 50px 0 0;

 color: #ccc;

 }

 .jumbotron h1{

 font-size: 26px;

 padding: 0 0 0 20px;

 }

 .jumbotron h4{

 font-size: 15px;

 padding: 0 0 0 20px;

 }

 #information{

 background-color: #EEEEEE;

 padding: 40px 0;

 }

 .info-cont{

 background-color: #FFF;

 margin: 0 0 20px 0 ;

 box-shadow: 2px 2px 3px #ccc;

 }

 .info-cont img{

 margin: 10px 0 10px 0;

 }

 .info-cont h4{

 color: #000000;

 padding: 4px 0 ;

 font-size: 14px;

 }

 .info-cont p{

 line-height: 1.8;

 letter-spacing: 2px;

 color: #888888;

 }

 .info-right{

 background-color: #fff;

 box-shadow: 2px 2px 3px #ccc;

 }

 .info-right blockquote{

 margin: 0px;

 padding: 0px;

 }

 .info-right h2{

 font-size: 20px;

 color: #333;

 padding: 5px;

 }

 .info-right h4{

 color: #333;

 font-size: 16px;

 padding: 2px 0 0 0;

 }

 .info-right p{

 line-height: 1.6;

 }

 #case{

 padding: 40px 0;

 background-color: #eee;

 text-align: center;

 }

 #case h4{

 color: #666;

 }

 #case p{

 color: #666;

 line-height: 1.6;

 }

 #about{

 background-color: #eee;

 padding: 40px 15px;

 }

 #about a{

 color: #2aabd2;

 }

 #about .about{

 background-color: #fff;

 box-shadow: 2px 2px #ccc;

 }

 #about h3{

 color: #333;

 font-size: 18px;

 border-bottom: 1px solid #eee;

 padding: 20px 0;

 margin: 0 0 10px 0;

 }

 #about p{

 line-height: 2;

 font-size: 13px;

 }

 .list{

 background-color: #fff;

 box-shadow: 2px 2px #ccc;

 }


 .rev {

 border-left: 2px solid #e2b709;

 width: 100%;

 overflow: hidden;


 margin-top: 20px;

 padding-left: 10px;

 }

 #list{

 background-color: #EEEEEE;

 padding: 40px 0;

 }

 #list h3{

 text-align: center;

 }


 .list-2{

 margin-top: 30px;color: gray;

 text-align: center;

 }

 .page{

 text-align: center;

 }


 /*小屏幕 大于等于768px*/

 @media (min-width: 768px) {

 .tab-h2{

 font-size: 24px;

 }

 .tab-p{

 font-size: 16px;

 }

 .text h3{

 font-size: 22px;

 }

 .text p{

 font-size: 16px;

 }

 .jumbotron h1{

 font-size: 30px;

 }

 .jumbotron h4{

 font-size: 16px;

 }

 .info-cont h4{


 font-size: 16px;

 }

 #about h3{

 font-size: 19px;

 }

 #about p{

 font-size: 14px;

 }

 }


 /*中等屏幕 大于等于992px*/

 @media (min-width: 992px) {

 .tab-h2{

 font-size: 28px;

 }

 .tab-p{

 font-size: 17px;

 }

 .text h3{

 font-size: 24px;

 }

 .text p{

 font-size: 18px;

 }

 .jumbotron h1{

 font-size: 32px;

 padding: 0 0 0 20px;

 }

 .jumbotron h4{

 font-size: 17px;

 padding: 0 0 0 20px;

 }

 .info-cont h4{


 font-size: 18px;

 }

 #about h3{

 font-size: 20px;

 }

 #about p{

 font-size: 15px;

 }

 }

 /*大屏幕 大于等于1200px*/

 @media (min-width: 1200px) {

 .tab-h2{

 font-size: 30px;

 }

 .tab-p{

 font-size: 18px;

 }

 .text h3{

 font-size: 26px;

 }

 .text p{

 font-size: 19px;

 }

 .info-cont h4{


 font-size: 20px;

 }

 #about h3{

 font-size: 22px;

 }

 #about p{

 font-size: 16px;

 }

 }


 #footer{

 color: white;

 background-color: #000000;


 padding: 20px;

 text-align: center;

 }

 </style>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">

 <div class="container">

 <div class="navbar-header">

 <a href="index.html" class="navbar-brand logo" ><img height="50" alt="PHP中文网"></a>

 <button type="button"class="navbar-toggle"data-toggle="collapse" data-target="#navbar-collapse">

 <span class="icon-bar"></span>

 <span class="icon-bar"></span>

 <span class="icon-bar"></span>


 </button>


 </div>

 <div class="collapse navbar-collapse"id="navbar-collapse">

 <ul class="nav navbar-nav navbar-right daohang " >

 <li><a href="index.html"><span class="glyphicon glyphicon-home"></span> 首页</a></li>

 <li><a href="information.html"><span class="glyphicon glyphicon-bookmark"></span> 资讯</a></li>

 <li class="active"><a href="case.html"><span class="glyphicon glyphicon-fire"></span> 实例</a></li>

 <li><a href="about.html"><span class="glyphicon glyphicon-envelope"></span> 关于我们</a></li>

 </ul>

 </div>


 </div>

</nav>

<div class=" jumbotron">

 <div class="container">

 <hgroup>

 <h1>实例</h1>

 <h4>和个个网站有着紧密的合作。</h4>

 </hgroup>

 </div>

</div>

<div id="case">

<div class="container">

 <div class="row">

 <div class="col-lg-3">

 <div class="thumbnail">

 <img alt="">

 <div class="caption">

 <h4>中国移动</h4>

 <p>参加了网站的学习</p>

 </div>

 </div>

 </div>

 <div class="col-lg-3">

 <div class="thumbnail">

 <img alt="">

 <div class="caption">

 <h4>中国石化</h4>

 <p>参加了网站的学习</p>

 </div>

 </div>

 </div>

 

 </div>

</div>

</div>

<footer id="footer">

 <div class="container">

 <p>自学路线 | 合作相关 | 投诉建议</p>

 <p> 2016 PHP中文网企业网站.powered by Bootstrap.</p>

 </div>

</footer>

<script ></script>

<script ></script>

<script type="text/javascript"></script>


</body>

</html>


教程十六

H5响应式开发之案例(二)

<!DOCTYPE html>

<html lang="zh-cn">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

 <title>PHP中文网</title>

 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

 <style>

 body {

 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;


 }

 #myCarousel{

 margin: 50px 0 0 0;

 }

 .logo{

 padding: 0;

 }

 .daohang{

 margin-top: 0;

 }

 .carousel-inner img{


 margin: 0 auto;

 }

 .jumbotron{

 background-image: url(http://img.php.cn/upload/course/000/000/004/581af31542837558.jpg);

 margin: 50px 0 0;

 color: #ccc;

 }

 .jumbotron h1{

 font-size: 26px;

 padding: 0 0 0 20px;

 }

 .jumbotron h4{

 font-size: 15px;

 padding: 0 0 0 20px;

 }

 #information{

 background-color: #EEEEEE;

 padding: 40px 0;

 }

 .info-cont{

 background-color: #FFF;

 margin: 0 0 20px 0 ;

 box-shadow: 2px 2px 3px #ccc;

 }

 .info-cont img{

 margin: 10px 0 10px 0;

 }

 .info-cont h4{

 color: #000000;

 padding: 4px 0 ;

 font-size: 14px;

 }

 .info-cont p{

 line-height: 1.8;

 letter-spacing: 2px;

 color: #888888;

 }

 .info-right{

 background-color: #fff;

 box-shadow: 2px 2px 3px #ccc;

 }

 .info-right blockquote{

 margin: 0px;

 padding: 0px;

 }

 .info-right h2{

 font-size: 20px;

 color: #333;

 padding: 5px;

 }

 .info-right h4{

 color: #333;

 font-size: 16px;

 padding: 2px 0 0 0;

 }

 .info-right p{

 line-height: 1.6;

 }

 #case{

 padding: 40px 0;

 background-color: #eee;

 text-align: center;

 }

 #case h4{

 color: #666;

 }

 #case p{

 color: #666;

 line-height: 1.6;

 }

 #about{

 background-color: #eee;

 padding: 40px 15px;

 }

 #about a{

 color: #2aabd2;

 }

 #about .about{

 background-color: #fff;

 box-shadow: 2px 2px #ccc;

 }

 #about h3{

 color: #333;

 font-size: 18px;

 border-bottom: 1px solid #eee;

 padding: 20px 0;

 margin: 0 0 10px 0;

 }

 #about p{

 line-height: 2;

 font-size: 13px;

 }

 .list{

 background-color: #fff;

 box-shadow: 2px 2px #ccc;

 }


 .rev {

 border-left: 2px solid #e2b709;

 width: 100%;

 overflow: hidden;


 margin-top: 20px;

 padding-left: 10px;

 }

 #list{

 background-color: #EEEEEE;

 padding: 40px 0;

 }

 #list h3{

 text-align: center;

 }


 .list-2{

 margin-top: 30px;color: gray;

 text-align: center;

 }

 .page{

 text-align: center;

 }


 /*小屏幕 大于等于768px*/

 @media (min-width: 768px) {

 .tab-h2{

 font-size: 24px;

 }

 .tab-p{

 font-size: 16px;

 }

 .text h3{

 font-size: 22px;

 }

 .text p{

 font-size: 16px;

 }

 .jumbotron h1{

 font-size: 30px;

 }

 .jumbotron h4{

 font-size: 16px;

 }

 .info-cont h4{


 font-size: 16px;

 }

 #about h3{

 font-size: 19px;

 }

 #about p{

 font-size: 14px;

 }

 }


 /*中等屏幕 大于等于992px*/

 @media (min-width: 992px) {

 .tab-h2{

 font-size: 28px;

 }

 .tab-p{

 font-size: 17px;

 }

 .text h3{

 font-size: 24px;

 }

 .text p{

 font-size: 18px;

 }

 .jumbotron h1{

 font-size: 32px;

 padding: 0 0 0 20px;

 }

 .jumbotron h4{

 font-size: 17px;

 padding: 0 0 0 20px;

 }

 .info-cont h4{


 font-size: 18px;

 }

 #about h3{

 font-size: 20px;

 }

 #about p{

 font-size: 15px;

 }

 }

 /*大屏幕 大于等于1200px*/

 @media (min-width: 1200px) {

 .tab-h2{

 font-size: 30px;

 }

 .tab-p{

 font-size: 18px;

 }

 .text h3{

 font-size: 26px;

 }

 .text p{

 font-size: 19px;

 }

 .info-cont h4{


 font-size: 20px;

 }

 #about h3{

 font-size: 22px;

 }

 #about p{

 font-size: 16px;

 }

 }


 #footer{

 color: white;

 background-color: #000000;


 padding: 20px;

 text-align: center;

 }

 </style>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">

 <div class="container">

 <div class="navbar-header">

 <a href="index.html" class="navbar-brand logo" ><img height="50" alt="PHP中文网"></a>

 <button type="button"class="navbar-toggle"data-toggle="collapse" data-target="#navbar-collapse">

 <span class="icon-bar"></span>

 <span class="icon-bar"></span>

 <span class="icon-bar"></span>


 </button>


 </div>

 <div class="collapse navbar-collapse"id="navbar-collapse">

 <ul class="nav navbar-nav navbar-right daohang " >

 <li><a href="index.html"><span class="glyphicon glyphicon-home"></span> 首页</a></li>

 <li><a href="information.html"><span class="glyphicon glyphicon-bookmark"></span> 资讯</a></li>

 <li class="active"><a href="case.html"><span class="glyphicon glyphicon-fire"></span> 实例</a></li>

 <li><a href="about.html"><span class="glyphicon glyphicon-envelope"></span> 关于我们</a></li>

 </ul>

 </div>


 </div>

</nav>

<div class=" jumbotron">

 <div class="container">

 <hgroup>

 <h1>实例</h1>

 <h4>和个个网站有着紧密的合作。</h4>

 </hgroup>

 </div>

</div>

<div id="case">

<div class="container">

 <div class="row">

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

 <div class="thumbnail">

 <img alt="">

 <div class="caption">

 <h4>中国移动</h4>

 <p>参加了网站的学习</p>

 </div>

 </div>

 </div>

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

 <div class="thumbnail">

 <img alt="">

 <div class="caption">

 <h4>中国石化</h4>

 <p>参加了网站的学习</p>

 </div>

 </div>

 </div>

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

 <div class="thumbnail">

 <img alt="">

 <div class="caption">

 <h4>中国联通</h4>

 <p>参加了网站的学习</p>

 </div>

 </div>

 </div>

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

 <div class="thumbnail">

 <img alt="">

 <div class="caption">

 <h4>中国电信</h4>

 <p>参加了网站的学习</p>

 </div>

 </div>

 </div>

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

 <div class="thumbnail">

 <img alt="">

 <div class="caption">

 <h4>中国电信</h4>

 <p>参加了网站的学习</p>

 </div>

 </div>

 </div>

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

 <div class="thumbnail">

 <img alt="">

 <div class="caption">

 <h4>中国联通</h4>

 <p>参加了网站的学习</p>

 </div>

 </div>

 </div>

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

 <div class="thumbnail">

 <img alt="">

 <div class="caption">

 <h4>中国联通</h4>

 <p>参加了网站的学习</p>

 </div>

 </div>

 </div>

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

 <div class="thumbnail">

 <img alt="">

 <div class="caption">

 <h4>中国联通</h4>

 <p>参加了网站的学习</p>

 </div>

 </div>

 </div>

 </div>

</div>

</div>

<footer id="footer">

 <div class="container">

 <p>自学路线 | 合作相关 | 投诉建议</p>

 <p> 2016 PHP中文网企业网站.powered by Bootstrap.</p>

 </div>

</footer>

<script ></script>

<script ></script>

<script type="text/javascript"></script>


</body>

</html>


教程十七

H5响应式开发之案例(三)

 

<!DOCTYPE html>

<html lang="zh-cn">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

 <title>PHP中文网</title>

 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

 <style>

 body {

 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;


 }

 #myCarousel{

 margin: 50px 0 0 0;

 }

 .logo{

 padding: 0;

 }

 .daohang{

 margin-top: 0;

 }

 .carousel-inner img{


 margin: 0 auto;

 }

 .jumbotron{

 background-image: url(http://img.php.cn/upload/course/000/000/004/581af31542837558.jpg);

 margin: 50px 0 0;

 color: #ccc;

 }

 .jumbotron h1{

 font-size: 26px;

 padding: 0 0 0 20px;

 }

 .jumbotron h4{

 font-size: 15px;

 padding: 0 0 0 20px;

 }

 #information{

 background-color: #EEEEEE;

 padding: 40px 0;

 }

 .info-cont{

 background-color: #FFF;

 margin: 0 0 20px 0 ;

 box-shadow: 2px 2px 3px #ccc;

 }

 .info-cont img{

 margin: 10px 0 10px 0;

 }

 .info-cont h4{

 color: #000000;

 padding: 4px 0 ;

 font-size: 14px;

 }

 .info-cont p{

 line-height: 1.8;

 letter-spacing: 2px;

 color: #888888;

 }

 .info-right{

 background-color: #fff;

 box-shadow: 2px 2px 3px #ccc;

 }

 .info-right blockquote{

 margin: 0px;

 padding: 0px;

 }

 .info-right h2{

 font-size: 20px;

 color: #333;

 padding: 5px;

 }

 .info-right h4{

 color: #333;

 font-size: 16px;

 padding: 2px 0 0 0;

 }

 .info-right p{

 line-height: 1.6;

 }

 #case{

 padding: 40px 0;

 background-color: #eee;

 text-align: center;

 }

 #case h4{

 color: #666;

 }

 #case p{

 color: #666;

 line-height: 1.6;

 }

 #about{

 background-color: #eee;

 padding: 40px 15px;

 }

 #about a{

 color: #2aabd2;

 }

 #about .about{

 background-color: #fff;

 box-shadow: 2px 2px #ccc;

 }

 #about h3{

 color: #333;

 font-size: 18px;

 border-bottom: 1px solid #eee;

 padding: 20px 0;

 margin: 0 0 10px 0;

 }

 #about p{

 line-height: 2;

 font-size: 13px;

 }

 .list{

 background-color: #fff;

 box-shadow: 2px 2px #ccc;

 }


 .rev {

 border-left: 2px solid #e2b709;

 width: 100%;

 overflow: hidden;


 margin-top: 20px;

 padding-left: 10px;

 }

 #list{

 background-color: #EEEEEE;

 padding: 40px 0;

 }

 #list h3{

 text-align: center;

 }


 .list-2{

 margin-top: 30px;color: gray;

 text-align: center;

 }

 .page{

 text-align: center;

 }


 /*小屏幕 大于等于768px*/

 @media (min-width: 768px) {

 .tab-h2{

 font-size: 24px;

 }

 .tab-p{

 font-size: 16px;

 }

 .text h3{

 font-size: 22px;

 }

 .text p{

 font-size: 16px;

 }

 .jumbotron h1{

 font-size: 30px;

 }

 .jumbotron h4{

 font-size: 16px;

 }

 .info-cont h4{


 font-size: 16px;

 }

 #about h3{

 font-size: 19px;

 }

 #about p{

 font-size: 14px;

 }

 }


 /*中等屏幕 大于等于992px*/

 @media (min-width: 992px) {

 .tab-h2{

 font-size: 28px;

 }

 .tab-p{

 font-size: 17px;

 }

 .text h3{

 font-size: 24px;

 }

 .text p{

 font-size: 18px;

 }

 .jumbotron h1{

 font-size: 32px;

 padding: 0 0 0 20px;

 }

 .jumbotron h4{

 font-size: 17px;

 padding: 0 0 0 20px;

 }

 .info-cont h4{


 font-size: 18px;

 }

 #about h3{

 font-size: 20px;

 }

 #about p{

 font-size: 15px;

 }

 }

 /*大屏幕 大于等于1200px*/

 @media (min-width: 1200px) {

 .tab-h2{

 font-size: 30px;

 }

 .tab-p{

 font-size: 18px;

 }

 .text h3{

 font-size: 26px;

 }

 .text p{

 font-size: 19px;

 }

 .info-cont h4{


 font-size: 20px;

 }

 #about h3{

 font-size: 22px;

 }

 #about p{

 font-size: 16px;

 }

 }


 #footer{

 color: white;

 background-color: #000000;


 padding: 20px;

 text-align: center;

 }

 </style>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">

 <div class="container">

 <div class="navbar-header">

 <a href="index.html" class="navbar-brand logo" ><img height="50" alt="PHP中文网"></a>

 <button type="button"class="navbar-toggle"data-toggle="collapse" data-target="#navbar-collapse">

 <span class="icon-bar"></span>

 <span class="icon-bar"></span>

 <span class="icon-bar"></span>


 </button>


 </div>

 <div class="collapse navbar-collapse"id="navbar-collapse">

 <ul class="nav navbar-nav navbar-right daohang " >

 <li><a href="index.html"><span class="glyphicon glyphicon-home"></span> 首页</a></li>

 <li><a href="information.html"><span class="glyphicon glyphicon-bookmark"></span> 资讯</a></li>

 <li class="active"><a href="case.html"><span class="glyphicon glyphicon-fire"></span> 实例</a></li>

 <li><a href="about.html"><span class="glyphicon glyphicon-envelope"></span> 关于我们</a></li>

 </ul>

 </div>


 </div>

</nav>

<div class=" jumbotron">

 <div class="container">

 <hgroup>

 <h1>关于</h1>

 <h4>php中文网成长介绍</h4>

 </hgroup>

 </div>

</div>

<div id="about">

 <div class="container">

 <div class="row">

 <div class="col-md-3 hidden-sm hidden-xs">

 <div class="list-group">

 <a class="list-group-item" href="#">1.网站介绍</a>

 <a class="list-group-item" href="#">3.联系方式</a>

 </div>

 </div>

 <div class="col-md-9 about">

 <a name="1"></a>

 <h3>网站介绍</h3>

 <p>php中文网(www.php.cn)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例,通过实例,您可以更好的学习编程.</p>

 <a name="2"></a>

 <p>安徽省</p>

 <p>php中文网工作室</p>

 <a name="3"></a>

 <h3>联系方式</h3>


 </div>

 </div>

 </div>

</div>

</footer>

<script ></script>

<script ></script>

<script type="text/javascript"></script>


</body>

</html>

实现效果










版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《梁平HTML 5网页编程bootstrap响应式开发培训(十五、十七)》的版权归原作者「梁平人才网」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注梁平人才网微信公众号

梁平人才网微信公众号:lprcydx

梁平人才网

手机扫描上方二维码即可关注梁平人才网微信公众号

梁平人才网最新文章

精品公众号随机推荐