html代码：
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="lib/css/bootstrap.css"> <link rel="stylesheet" href="lib/css/style.css"> <link rel="stylesheet" href="lib/css/media.css"> <title>首页</title> </head> <body> <!-- 头部 --> <div class="header"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <!-- 导航栏目折叠 --> <div class="nav navbar-default"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar" aria-haspopup="false" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> <!--导航栏目--> <div class="collapse navbar-collapse" id="responsive-navbar"> <ul class="nav nav-pills nav-top"> <li class="active"> <a href="#">首页</a> </li> <li> <a href="#">WEB前端</a> </li> <li> <a href="#">JavaScript</a> </li> <li> <a href="#">jQuery</a> </li> <li> <a href="#">PHP</a> </li> <li> <a href="#">MySQL</a> </li> </ul> <!-- 搜索框 --> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="php学习路线"> <button type="submit" class="btn btn-default" style="outline:medium;">搜一搜</button> </div> </form> </div> </div> </div> </div> </div> <!-- 内容区 --> <div class="subject"> <div class="container margin-top"> <div class="row"> <!-- 内容区 --> <div class="col-xs-8 col-sx-8 col-md-8 content_text"> <!-- 网站介绍 --> <div class="jumbotron"> <h1>Hello, world!</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> <!-- 文章区块 --> <div class="content"> <!-- 内容介绍 --> <div class="text"> <!-- 标题 --> <h2 class="page-header"><a href="#">网站分页:上一页、下一页，尾页、首页、中间的页数-2018-9-20</a></h2> <!-- 图片 --> <div class="thumbnail"> <a href=""><img src="inc/images/1.jpg" alt=""></a> </div> <!-- 简介 --> <div class="text-title"> <span class="alert alert-warning" role="alert"> ：上一页、下一页，尾页、首页、中间的页数网站分页：上一页 、下一页，尾页、首页、中间的页数网站分页：上一 、下一页，尾页、首页、中间的页数网站分页： </span> <div class="tag"> <strong class="label label-default">2018年09月20日</strong> <div class="tag_a"> <a href="#" class="label label-primary">css</a> <a href="#" class="label label-success">html</a> <a href="#" class="label label-info">php</a> <a href="#" class="label label-warning">HTML5</a> </div> </div> <a href="#" class="btn btn-default btn-a">阅读全文</a> </div> </div> </div> <!-- 上一页，下一页 --> <div class="title"> <ul class="pager"> <li class="previous"> <a href="#"> <span aria-hidden="true">← upper</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li class="next"> <a href="#"> <span aria-hidden="true">lower →</span> </a> </li> </ul> </div> </div> <!-- 侧边栏 --> <div class="col-xs-4 col-sx-4 col-md-4"> <div class="side"> <!-- 最新推荐 --> <div class="recommend"> <h2><span class="label label-default">最新推荐</span></h2> <ul class="ul"> <li class="alert alert-success"> <span class="label label-primary">php</span> <p><a href="#">2018 年，AI 行业持续走向技术落地和深入商业化的一年。 回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，</a></p> </li> <li class="alert alert-success"> <span class="label label-primary">php</span> <p><a href="#">2018 年，AI 行业持续走向技术落地和深入商业化的一年。 回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，</a></p> </li> <li class="alert alert-success"> <span class="label label-primary">php</span> <p><a href="#">2018 年，AI 行业持续走向技术落地和深入商业化的一年。 回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，</a></p> </li> <li class="alert alert-success"> <span class="label label-primary">php</span> <p><a href="#">2018 年，AI 行业持续走向技术落地和深入商业化的一年。 回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，</a></p> </li> <li class="alert alert-success"> <span class="label label-primary">php</span> <p><a href="#">2018 年，AI 行业持续走向技术落地和深入商业化的一年。 回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，</a></p> </li> <li class="alert alert-success"> <span class="label label-primary">php</span> <p><a href="#">2018 年，AI 行业持续走向技术落地和深入商业化的一年。 回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，</a></p> </li> <li class="alert alert-success"> <span class="label label-primary">php</span> <p><a href="#">2018 年，AI 行业持续走向技术落地和深入商业化的一年。 回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，</a></p> </li> <li class="alert alert-success"> <span class="label label-primary">php</span> <p><a href="#">2018 年，AI 行业持续走向技术落地和深入商业化的一年。 回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，</a></p> </li> <li class="alert alert-success"> <span class="label label-primary">php</span> <p><a href="#">2018 年，AI 行业持续走向技术落地和深入商业化的一年。 回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，</a></p> </li> <li class="alert alert-success"> <span class="label label-primary">php</span> <p><a href="#">2018 年，AI 行业持续走向技术落地和深入商业化的一年。 回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，</a></p> </li> <li class="alert alert-success"> <span class="label label-primary">php</span> <p><a href="#">2018 年，AI 行业持续走向技术落地和深入商业化的一年。 回顾上半年，科技巨头们在横向建设自己的 AI 技术平台时，</a></p> </li> </ul> </div> </div> </div> </div> </div> </div> <!-- 底部 --> <div class="footer"> <div class="container "> <!-- 友链 --> <div class="chain"> <nav class="alert alert-warning"> <a href="#" class="alert alert-warning">php中文网</a> <a href="#" class="alert alert-warning">php中文网</a> <a href="#" class="alert alert-warning">php中文网</a> </nav> </div> </div> <!-- 版本信息 --> <div class="version navbar-inverse"> <p><a href="#">PHP中文网：独家原创，永久免费的在线php视频教程，php技术学习阵地！</a></p> <p><a href="#">www.php.cn All Rights Reserved | 皖B2-20150071-9 Copyright 2014-2017</a></p> </div> </div> <script src="lib/js/jquery.js"></script> <script src="lib/js/bootstrap.js"></script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码：
实例
/******** 默认样式 *******************************/
html{background:#f6f6f6;}
a:hover{text-decoration: none;}
ul{margin:0;padding:0;}
li{list-style:none;}
/******** 头部 *******************************/
.nav-tabs{
border:none;
float:left;
margin-top: 10px;
}
.navbar-right{
margin-top:10px;
}
.nav-top{
float: left;
}
.navbar-header{
margin-top: 10px;
}
.btn-default{
float: right;
}
.btn-a{
width:100%;
}
.nav-tabs > li > a{
border:none;
}
.nav-tabs > li.active > a{
border:none;
}
.nav-tabs > li.active > a:hover{
border:none;
}
.form-control:focus{
border:1px solid #ccc;
box-shadow:none;
}
/******** 文章区块 *******************************/
.margin-top{
margin-top:40px;
}
.content{
width: 100%;
background:#fff;
border:1px solid #eee;
border-radius:10px;
margin-bottom: 80px;
}
.content .text .strong{
line-height:35px;
padding-left:20px;
color:#999;
}
.content .text h2 {
text-align: center;
font-size:20px;
margin:30px 0;
}
.content .text .text-title{
padding:0 20px;
}
.content .text .text-title > span{
margin-left:35px;
line-height:30px;
font-size:16px;
display: inline-block;
}
.content .text .text-title a{
display: block;
}
.content .text .text-title .tag{
line-height:35px;
margin-bottom: 20px;
}
.content .text .text-title .tag strong{
color:#fff;
font-size:14px;
border-radius:5px;
}
.content .text .text-title .tag>.tag_a{
float:right;
}
.content .text .text-title .tag>.tag_a >a{
margin-left:5px;
line-height:30px;
display: inline-block;
color:#fff;
border-radius: 10px;
}
.thumbnail{
border:none;
}
/******** 上一页，下一页 *******************************/
.title .pager{
margin-left:10px;
}
.pager .next > a{
margin-right:10px;
}
/******** 侧边栏 *******************************/
.side{
width:100%;
height:500px;
}
/******** 最新推荐 *******************************/
.recommend{
width:100%;
overflow: hidden;
border: 1px solid #eee;
border-bottom: none;
border-radius:8px;
}
.recommend h2{
margin:0 10px;
}
.label-default{
font-size:16px;
}
.recommend .ul{
margin-top:20px;
padding:0 10px;
height: 465px;
overflow: hidden;
}
.recommend .ul li {
overflow:hidden;
margin-bottom: 5px;
padding: 10px;
}
.recommend .ul li .label-primary{
margin-right:8px;
float: left;
}
.recommend .ul li p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.recommend .ul li p a{
color:#555;
}
.recommend .ul li p a:hover{
color:#23527c
}
/******** 底部 *******************************/
.footer{
width:100%;
height:130px;
background-color: #337ab7;
margin-top:20px;
padding-top:10px;
}
.footer .version{
text-align:center;
padding-top:10px;
}
.footer .version p{
font-size: 14px;
line-height:30px;
margin-bottom: 0;
}
.footer .version p a{
color:#fff;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
媒体查询css文件：
实例
/******** 媒体设备设置 *******************************/
/******** max-width: 991 *******************************/
@media (max-width: 991px){
.navbar-form .form-control{
width:145px;
}
}
/******** max-width: 768 *******************************/
@media (max-width: 768px){
.side{
display: none;
}
.content_text{
width:100%;
}
.btn-default{
float: none;
}
.side{
display: none;
}
.content_text{
width:100%;
}
.btn-default{
display: none;
}
}
/******** max-width: 767px *******************************/
@media (max-width: 767px){
.nav-tabs{
padding-top:10px;
margin:0 10px;
float: none;
}
.navbar-form .form-control{
width: 70%;
float: left;
}
.navbar-form .form-group{
width:100%;
float:left;
}
.navbar-default{
float: right;
}
.btn-default{
display:block;
}
}
/******** max-width: 600 *******************************/
@media (max-width: 600px){
.content .text .text-title .tag strong{
display: none;
}
.content .text .text-title .tag>.tag_a{
float: none;
}
}运行实例 »
点击 "运行实例" 按钮查看在线实例
