H5响应式开发之资讯内容（一）

资讯内容页布局

资讯内容

首先我们引入主页的导航和底部。

     PHP中文网  
       
    首页
  资讯
  实例
  关于我们
 
 
 
 
   自学路线 | 合作相关 | 投诉建议
  2016 PHP中文网企业网站.powered by Bootstrap.

我们对内容页增加一个图片背景。

   资讯
 PHP中文网的最新动态，资源.....

我们使用jumbotron特性。

超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：

创建一个带有 class .jumbotron. 的容器

。除了更大的

，字体粗细 font-weight 被减为 200px。

在容器内使用

标签,该标签是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; }

本章难点