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"> </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 src="https://img.php.cn/upload/course/000/000/004/5819475ea4910787.png" 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 class="active"><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><a href="#"><span class="glyphicon glyphicon-fire"></span> 实例</a></li> <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 关于我们</a></li> </ul> </div> </div> </nav> <footer id="footer"> <div class="container"> <p>自学路线 | 合作相关 | 投诉建议</p> <p> 2016 PHP中文网企业网站.powered by Bootstrap.</p> </div> </footer> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script type="text/javascript"></script> </body> </html>
我们对内容页增加一个图片背景。
<div class=" jumbotron"> <div class="container"> <hgroup> <h1>资讯</h1> <h4>PHP中文网的最新动态，资源.....</h4> </hgroup> </div> </div>
我们使用jumbotron特性。
超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：
创建一个带有 class .jumbotron. 的容器 <div>。除了更大的 <h1>，字体粗细 font-weight 被减为 200px。
在容器内使用<hgroup>标签,该标签是H5新增的标签，用于对网页或区段（section）的标题进行组合。
然后对样式进行控制，加入图片。
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(https://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;
}
/*小屏幕 大于等于768px*/
@media (min-width: 768px) {
.tab-h2{
font-size: 26px;
}
.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;
}
}
/*中等屏幕 大于等于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;
}
}
/*大屏幕 大于等于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;
}
}
#footer{
color: white;
background-color: #000000;
padding: 20px;
text-align: center;
}本章难点
bootstrap方法的拓展使用
按照不同分辨率不同的字体大小设置
neue Datei
<!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(https://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;
}
/*小屏幕 大于等于768px*/
@media (min-width: 768px) {
.tab-h2{
font-size: 26px;
}
.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;
}
}
/*中等屏幕 大于等于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;
}
}
/*大屏幕 大于等于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;
}
}
#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 src="https://img.php.cn/upload/course/000/000/004/5819475ea4910787.png" 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 class="active"><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><a href="#"><span class="glyphicon glyphicon-fire"></span> 实例</a></li>
<li><a href="#"><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>
<footer id="footer">
<div class="container">
<p>自学路线 | 合作相关 | 投诉建议</p>
<p> 2016 PHP中文网企业网站.powered by Bootstrap.</p>
</div>
</footer>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript"></script>
</body>
</html>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)