bootstrap响应式开发教程-响应式企业站开发-H5响应式开发之资讯内容(一)9

作者: jiukeshuju 分类: Bootstrap 发布时间: 2020-10-06 07:36
内容纲要

资讯内容页布局

QQ截图20161201111944.png

资讯内容

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

<!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;
}

----------------------------------------------------------------------

<!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>

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

一条评论

发表评论

标签云
dede dedecms dede标签 echo empty field index li mysql php stus thinkphp 再温 授权 本类 标签 每日更新|织梦插件|Tag标签|充值 程序员 织梦dede:flink友情链接标签自定义输出bug修复 织梦Fatal error: Call to a member function fetchArray解决方法 织梦Fatal error: Call to undefined function dede_htmlspecialchars 织梦TAG标签列表页和搜索结果页调用自定义字段内容 织梦上传图片提示缺少图像源文件地址 织梦上传文件大小限制修改 织梦内容页分页标题提取 织梦判断缩略图是否为空输出不同样式 织梦前台搜索标题和文档内容关键词实现教程 织梦前台模板里显示当前登录会员名 织梦取消mysql错误日志生成文件功能防止暴露后台和管理员 织梦后台自定义表单添加搜索功能 织梦图集302与FILEID:X处理方法 织梦图集上传图片自动获取图片名称做注释 织梦实现url不变电脑和手机显示不同模板 织梦开启绝对路径缩略图https绝对路径时缩略图地址前面多了个域名 织梦手机站去除文章内容中图片的宽高达到自适应+绝对路径图片 织梦手机站搜索结果显示为电脑站的搜索结果模板的解决方法 织梦批量修改栏目的保存目录和文章命名规则 织梦搜索结果为空时输出自定义提示信息 织梦搜索结果增加dede:type、dede:arclist、dede:channelartlist、dede:tag、dede:php等标签支持 织梦搜索结果页分页条样式修改 织梦数据库内容替换,正则去掉文章内容中的img标签 织梦文档内容页title按文章名_当前栏目名_上级栏目名_顶级栏目名_网站名输出 织梦无法上传ico图标格式文件的解决方法 织梦标签array runphp静态生成乱码BUG解决方法 织梦栏目添加 [英文名称] [栏目大图] [栏目小图] 功能