实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bootstrap快速入门</title>
<link rel="stylesheet" type="text/css" href="admin/css/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="admin/css/demon05.css">
<script src="layui/layui.js"></script>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
body{
background:#F3F5F7;
}
body a:hover{
text-decoration: none;
}
div .container{
border-radius: 10px;
border:0;
margin:0;
padding:0;
}
.container div{
border-radius: 10px;
}
.col-md-1{
height:55px;
background:#1E1E1E;
}
.col-md-2{
height:55px;
background:#1E1E1E;
}
.col-md-9{
height:55px;
background:#1E1E1E;
}
ul{
list-style: none;
}
.c1 li{
width: 10%;
border: none;
height: 55px;
line-height: 55px;
text-align: center;
color: gray;
float: left;
}
.col-md-9 ul li a:link{
color:gray;
text-decoration: none;
}
.container{
width: 90%;
}
.box1 .d1 li{
line-height: 68px;
height:68px ;
width: 100%;
color: #F5F0F0;
font-size: 20px;
}
.box1.d1 ul{
background:black;
margin-top: 5px;
}
.box1 .d1 li span{
float: left;
font-size: 15px;
}
.box1 .d1 li i{
float:right;
line-height:68px;
}
.box1 .d2 li{
width: 10%;
border: none;
height: 55px;
line-height: 55px;
text-align: center;
color: gray;
float: left;
}
.box1 .d3 li{
width: 25%;
border: none;
height: 120px;
line-height: 125px;
text-align: center;
background:white;
float: left;
}
.box3 div{
background:FFFFFF;
}
.box3 .d1 ul li{
line-height: 30px;
}
.box3 .d1 ul li a:hover{
text-decoration: none;
}
.box3 .d2 img{
width:170px;
height:90px;
float: left;
border-radius: 10px;
margin:40px 10px 20px 10px;
}
/* 第三块 右侧 常用手册 */
.box3 .d3 div div div{
margin:5px;
}
.box3 .d3 div div div img{
float:left;
width: 40px;
height: 40px;
margin:0 10px;
}
.box3 .d3 ul li span a{
margin-left: 10px;
float: left;
}
.box4 div div{
background:red;height: 495px;margin:15px 0;
}
.box4 div div #test1 div{
width:356px;
height:183px;
margin-left:-15px;
margin-top:-15px;
background: #1E1E1E;
}
</style
</head>
<body>
<!-- 顶部导航 -->
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<a href="#"><img style="height:55px;" src="image/tubiao.png"></a>
</div>
<div class="col-md-9">
<ul class="c1" style="position:relative;">
<li name="0"><a href="#">首页</a></li>
<li name="1"><a href="#">视频教程</a></li>
<li name="2"><a href="#">社区问答</a></li>
<li name="3"><a href="#">编程词典</a></li>
<li name="4"><a href="#">手册下载</a></li>
<li name="5"><a href="#">工具下载</a></li>
<li name="6"><a href="#">类库下载</a></li>
<li name="7"><a href="#">特色课程</a></li>
<li name="8"><a href="#">菜鸟学堂</a></li>
<div class="x1" style="width:100px;height:3px;background:#1AF550;position:absolute;margin-top:52px;"></div>
</ul>
</div>
<div class="col-md-1">
<div style="line-height:55px;">
<a href="#"><i class="glyphicon glyphicon-volume-up" style="color:honeydew;font-size:20px;line-height: 55px;float: left;"></i></a>
<img style="float:right;width:30px;border-radius:15px;" src="http://www.php.cn/static/images/user_avatar.jpg">
</div>
</div>
</div>
</div>
<!-- 第一大块 滚动图 -->
<div class="container box1" style="margin-top:30px;border-radius: 10px;">
<div class="row" >
<div class="col-md-2 d1" style="height: 510px;">
<!-- 导航条 -->
<ul>
<li>
<span>php开发</span>
<i class="glyphicon glyphicon-menu-right"></i>
</li>
<li>
<span>前端开发</span>
<i class="glyphicon glyphicon-menu-right"></i>
</li>
<li>
<span>服务端开发</span>
<i class="glyphicon glyphicon-menu-right"></i>
</li>
<li>
<span>移动开发</span>
<i class="glyphicon glyphicon-menu-right"></i>
</li>
<li>
<span>服务器运维&下载</span>
<i class="glyphicon glyphicon-menu-right"></i>
</li>
<li>
<span>在线工具箱</span>
<i class="glyphicon glyphicon-menu-right"></i>
</li>
<li>
<span>常用类库</span>
<i class="glyphicon glyphicon-menu-right"></i>
</li>
</ul>
</div>
<div class="col-md-10" style="background:#E5E3E3;height: 510px;">
<div class="row d2" style="background:#F5F0F0;height:55px">
<ul>
<li>PHP头条</li>
<li>独孤九剑</li>
<li>学习路线</li>
<li>在线工具</li>
<li>趣味课堂</li>
<li>社区问答</li>
<li>课程直播</li>
</ul>
<div>
<form style="margin-top: 10px;margin-left: 20px;">
<input style="height:30px;width: 270px;" type="text" name="search" placeholder="输入关键词搜索">
<i class="glyphicon glyphicon-search" style="margin-left:-30px;"></i>
</form>
</div>
</div>
<div class="row" style="background:yellowgreen;height:330px;">
<div class="layui-carousel" id="test1">
<div carousel-item >
<!-- ？？？？？？轮播图右边测总留一条空白 -->
<a href="#"><img src="https://img.php.cn/upload/article/000/000/003/5b49b0e610f26951.jpg"></a>
<a href="#"><img src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"></a>
</div>
</div>
</div>
<div class="row d3" style="height:125px;">
<ul>
<li><img src="http://www.php.cn/static/images/index_dugu2.jpg"></li>
<li><img src="https://img.php.cn/upload/article/000/000/003/5baf2172be8c0490.png"></li>
<li><img src="http://www.php.cn/static/images/index_php_item3.jpg"></li>
<li><img src="http://www.php.cn/static/images/index_php_new4.jpg"></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 第二块 广告 -->
<div class="container box2">
<div class="row">
<div class="col-md-12" style="background:gray;height:80px;margin:20px 0;border-radius: 10px;padding:0;">
<img src="https://img.php.cn/upload/article/000/000/003/5c4580edb940a985.gif" style="width:100%;height:100%;border-radius: 10px;">
</div>
</div>
</div>
<!-- 第三块 头条 最新课程 常用手册 -->
<div class="container box3">
<div class="row">
<div class="col-md-2 d1" style = "padding-left:10px;padding-right:0;background:#FFFFFF; height: 410px;border-radius: 10px;width:300px;">
<p style="margin-top:8px;font-size: 14px;font-weight: bold;">头条</p>
<hr>
<ul>
<li ><a href="#">php中文网vip特权会员学习指南</a></li>
<li><a href="#">php中文网原创视频：《天龙八部》公益ph...</a></li>
<li><a href="#">php中文网《玉女心经》公益***系列...</a></li>
<li><a href="#">php空间是什么 该如何选择</a></li>
<li><a href="#">零基础的小明要如何成为前端工程师？</a></li>
<li><a href="#">NPM 相关精选文章及视频教程资源推荐（7...</a></li>
<li><a href="#">拼多多技术事故复盘，程序员应该学到什么？</a></li>
<li><a href="#">2018 – 2019 年前端 JavaScript 面试题（...</a></li>
<li><a href="#">程序员导致拼多多出现重大Bug，被薅上千万</a></li>
<li><a href="#">爷爷：啥是佩奇？佩奇：Python 10 秒可以...</a></li>
<li><a href="#">Python抢票程序优化，可以选择车次和座次</a></li>
<li><a href="#">2018年小米高级 PHP 工程师面试题（模拟...</a></li>
</ul>
</div>
<div class="col-md-8 d2" style = "background:#FFFFFF;margin:0 15px;border-radius:10px;height:410px;width:620px;">
<p style="margin-top:8px;font-size: 14px;font-weight: bold;">最新课程</p>
<hr>
<div><a href="#"><img src="https://img.php.cn/upload/course/000/000/001/5c3bec6e2640e714.jpeg"></a></div>
<div><a href="#"><img src="https://img.php.cn/upload/course/000/000/014/5c3450fbe6d1b229.jpg"></a></div>
<div><a href="#"><img src="https://img.php.cn/upload/course/000/000/014/5c34121d016f5208.jpg"></a></div>
<div><a href="#"><img src="https://img.php.cn/upload/course/000/000/015/5c3073edb18cc822.jpg"></a></div>
<div><a href="#"><img src="https://img.php.cn/upload/course/000/000/015/5c306535dc5ee207.jpg"></a></div>
<div><a href="#"><img src="https://img.php.cn/upload/course/000/000/014/5c304ba1aa085936.jpg"></a></div>
</div>
<div class="col-md-2 d3" style="background:#FFFFFF;height:410px; width:260px;border-radius: 10px;">
<span style="margin-top:8px;font-size: 14px;font-weight: bold;">常用手册</span>
<span style="float:right;font-size: 14px;font-weight: bold;"><a href="#">更多</a></span>
<hr>
<!-- 常用手册文件底部文字列表 -->
<div class="container" >
<div class="row">
<div class="col-md-12">
<img src="http://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg">
<span>
<a href="#">thinkPHP5.0</a>
<a href="#">Linux教程</a>
<a href="#">php手册</a>
<a href="#">Memcached</a>
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://www.php.cn/upload/system/000/000/001/57d55f537896d439.jpg">
<span>
<a href="#">JavaScript中文参考手册</a>
<a href="#">jQuery中文参考手册</a>
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://www.php.cn/upload/system/000/000/001/57d560a2c0e5f831.jpg">
<span>
<a href="#">MySQL最新手册教程</a>
<a href="#">Redis命令参考手册</a>
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://www.php.cn/upload/system/000/000/001/57d56222bfab2642.jpg">
<span>
<a href="#">Node.js中文学习手册</a>
<a href="#">AngularJS中文参考手册</a>
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://www.php.cn/upload/system/000/000/001/57d55f07ccfb6991.jpg">
<span>
<a href="#">html手册</a>
<a href="#">CSS手册</a>
<a href="#">html5手册</a>
<a href="#">CSS3手册</a>
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://www.php.cn/upload/system/000/000/000/5a911102396d0195.jpg">
<span>
<a href="#">Bootstrap中文文档</a>
<a href="#">快速入门Git教程</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 第四块 开发工具下载 最新社区回答 -->
<div class="container box4">
<div class="row">
<div class="col-md-3" style="width:357px;">
<div class="layui-carousel" id="test1">
<div carousel-item>
<!-- ？？？？？？轮播图右边测总留一条空白 -->
<a href="#"><img src="https://img.php.cn/upload/course/000/001/120/59e7018b107f1234.png"></a>
<a href="#"><img src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"></a>
<a href="#"><img src="https://img.php.cn/upload/course/000/001/120/59edb17869f79684.png"></a>
</div>
</div>
</div>
<div class="col-md-6" style="margin:15px 20px;width:508px;">技术文章 网站源码</div>
<div class="col-md-3" style="width:308px;">最新社区回答</div>
</div>
</div>
<!-- 第五块 广告 -->
<div class="container">
<div class="row">
<div class="col-md-12" style="background:gray;height:80px;margin:20px 0;">广告条</div>
</div>
</div>
<!-- 第六块 词典分类 最新社区回答 -->
<div class="container">
<div class="row">
<div class="col-md-2" style = "background:tomato;height: 390px;margin:20px 0;">词典分类</div>
<div class="col-md-10" style = "background:#B2311F;height:390px;margin:20px 0;">词典查询 全部词典 最新更新</div>
</div>
</div>
<!-- 第七块 php入门精品课程 -->
<div class="container">
<div class="row" style="background:grey;height:80px;">php入门精品课程</div>
<div class="row">
<div class="col-md-2" style = "background:tomato;height: 360px;"></div>
<div class="col-md-10" style = "background:#B2311F;height:360px;"></div>
</div>
</div>
<!-- 第八块 平分5列 -->
<div class="container">
<div class="row" style="margin-top:20px;">
<div class="col-md-2" style = "background:tomato;width:20%;height: 170px;margin:20px 0;">php工具箱最新教学视频</div>
<div class="col-md-2" style = "background:#B2311F;width:20%;height:170px;margin:20px 0;">孤独九剑</div>
<div class="col-md-3" style = "background:tomato;width:20%;height: 170px;margin:20px 0;">php万全自学手册</div>
<div class="col-md-3" style = "background:#B2311F;width:20%;height:170px;margin:20px 0;">mysql权威开发指南</div>
<div class="col-md-2" style = "background:tomato;width:20%;height: 170px;margin:20px 0;">公益直播</div>
</div>
</div>
<!-- 第九块 广告 -->
<div class="container">
<div class="row">
<div class="col-md-12" style="background:gray;height:80px;margin:20px 0;">广告条</div>
</div>
</div>
<!-- 第十块 php入门精品课程 -->
<div class="container">
<div class="row" style="background:grey;height:80px;">php进阶学习路径</div>
<div class="row">
<div class="col-md-2" style = "background:tomato;height: 360px;"></div>
<div class="col-md-10" style = "background:#B2311F;height:360px;"></div>
</div>
</div>
<!-- 第十一块 平分5列 -->
<div class="container">
<div class="row" style="margin-top:20px;">
<div class="col-md-2" style = "background:tomato;width:20%;height: 170px;margin:20px 0;">CI框架30分钟极速入门</div>
<div class="col-md-2" style = "background:#B2311F;width:20%;height:170px;margin:20px 0;">PHP实战天龙八部</div>
<div class="col-md-3" style = "background:tomato;width:20%;height: 170px;margin:20px 0;">PHP实战天龙八部</div>
<div class="col-md-3" style = "background:#B2311F;width:20%;height:170px;margin:20px 0;">PHP实战天龙八部</div>
<div class="col-md-2" style = "background:tomato;width:20%;height: 170px;margin:20px 0;">php全栈开发之小博客</div>
</div>
</div>
<!-- 第十二块 资源下载 -->
<div class="container">
<div class="row">
<div class="col-md-4" style = "background:tomato;height: 490px;margin:20px 0;">资源下载</div>
<div class="col-md-4" style = "background:#B2311F;height:490px;margin:20px 0;">HTML5特效</div>
<div class="col-md-4" style = "background:tomato;height: 490px;margin:20px 0;">更多下载</div>
</div>
</div>
<!-- 第十三块 手册大全 -->
<div class="container">
<div class="row">
<div class="col-md-2" style = "background:tomato;height: 420px;margin:20px 0;">手册大全</div>
<div class="col-md-10" style = "background:#B2311F;height:420px;margin:20px 0;">学习手册 最新更新</div>
</div>
</div>
<!-- 第十四块 友情链接 -->
<div class="container">
<div class="row">
<div class="col-md-12" style="background:gray;height:130px;margin:20px 0;">友情链接</div>
</div>
</div>
<!-- 第十五块 网页底部 -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12" style="background:black;height:200px;margin:20px 0;">网页</div>
</div>
</div>
<script>
$(function(){
$('.c1>li').hover(function(){
$xx=parseInt($(this).attr('name'))*100
$('.x1').stop().animate({'left':$xx +'px'},300)
},
function(){
$('.x1').stop().animate({'left':0},300)
//？？？？？此处未实现底线变短消失的效果
})
})
layui.use('carousel', function(){
var carousel = layui.carousel;
// 建造实例
carousel.render({
elem:'#test1',
width:'100%',//设置容器宽度
height:'100%',
arrow:'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例