1.项目需求
编码工具H-Builderless预处理css工具Koala考拉响应式框架bootstrap3.0javascriptjQuery1.10及以上需求jsbootstrap.min.js、html5shiv.js、respond.min.js、jquery.min.js轮播图尺寸推荐1920px*1200px自建脚本cevent.less cevent.js
bootstrap
2.效果图
2.1PC端
bootstrap
2.2手机、pad端
bootstrap
2.3小功能
bootstrap
boostrap
3.less
* {
margin: 0;
padding: 0;
.cevent-carousel {
height: 500px;
overflow: hidden;
margin-top: 50px;
.item {
img {
width: 100%;
}
.carousel-caption {
bottom: 78%;
}
}
}
.btn-group {
label {
top: -600px;
right: -600%;
}
}
.cevent-container {
margin-top: 5px;
}
.thumbnail {
border: none;
border-radius: 0px;
margin-bottom: 0px;
text-align: center;
.caption {
.h3,
h3 {
margin-top: 0px;
}
}
}
.cevent-hr {
margin: auto;
hr {
border: 1px solid silver;
box-shadow: 1px 1px 2px silver;
}
}
.tab-content-img {
margin-top: 20px;
img {
width: 50%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 10px auto;
}
}
.tab-content {
bottom: 100px;
}
.cevent-footer {
height: 27px;
background: #000000;
color: white;
padding: 0;
text-align: center;
.h4,
h4 {
margin-top: 5px;
}
}
.cevent-top {
margin-top: -6.5%;
margin-left:93.5%;
padding: 2px 4px !important;
}
@media screen and (max-width:768px) {
.cevent-carousel,
.cevent-carousel .item {
height: 200px;
.carousel-caption {
bottom: 50%;
}
}
.btn-group {
label {
top: -70px;
left: 100%;
}
}
}
@media screen and (min-width:768px) and(max-width:992px) {
.cevent-carousel,
.cevent-carousel .item {
height: 400px;
.carousel-caption {
bottom: 20%;
}
}
.btn-group {
label {
top: -100px;
left: 300%;
}
}
}
}4.css
* {
margin: 0;
padding: 0;
}
* .cevent-carousel {
height: 500px;
overflow: hidden;
margin-top: 50px;
}
* .cevent-carousel .item img {
width: 100%;
}
* .cevent-carousel .item .carousel-caption {
bottom: 78%;
}
* .btn-group label {
top: -600px;
right: -600%;
}
* .cevent-container {
margin-top: 5px;
}
* .thumbnail {
border: none;
border-radius: 0px;
margin-bottom: 0px;
text-align: center;
}
* .thumbnail .caption .h3,
* .thumbnail .caption h3 {
margin-top: 0px;
}
* .cevent-hr {
margin: auto;
}
* .cevent-hr hr {
border: 1px solid silver;
box-shadow: 1px 1px 2px silver;
}
* .tab-content-img {
margin-top: 20px;
}
* .tab-content-img img {
width: 50%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 10px auto;
}
* .tab-content {
bottom: 100px;
}
* .cevent-footer {
height: 27px;
background: #000000;
color: white;
padding: 0;
text-align: center;
}
* .cevent-footer .h4,
* .cevent-footer h4 {
margin-top: 5px;
}
* .cevent-top {
margin-top: -6.5%;
margin-left: 93.5%;
padding: 2px 4px !important;
}
@media screen and (max-width: 768px) {
* .cevent-carousel,
* .cevent-carousel .item {
height: 200px;
}
* .cevent-carousel .carousel-caption,
* .cevent-carousel .item .carousel-caption {
bottom: 50%;
}
* .btn-group label {
top: -70px;
left: 100%;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
* .cevent-carousel,
* .cevent-carousel .item {
height: 400px;
}
* .cevent-carousel .carousel-caption,
* .cevent-carousel .item .carousel-caption {
bottom: 20%;
}
* .btn-group label {
top: -100px;
left: 300%;
}
}
5.js
//jquery:这里可控制轮播图的三个属性
$(function() {
//1.轮播
$('.carousel').carousel({
interval: 2000,
pause: null, //鼠标覆盖,这里的pause=hover和轮播开关冲突，如果需要鼠标覆盖点击，则删除轮播按钮
wrap: true //无缝循环
});
$('#carousel-start-btn').click(function() {
$('.carousel').carousel('cycle');
});
$('#carousel-stop-btn').click(function() {
$('.carousel').carousel('pause');
});
//2.点击跳转
$('.cevent-menu > li >a').click(function(e) {
//获取属性
var href = $(this).attr("href");
console.log(href); //#TOP1
$(".cevent-menu-list > li > a[href=" + (href) + "]").tab('show');
//滚动条跳到a位置
$(document).scrollTop($('.cevent-tag-page').offset().top);
//禁止menu下的a标签默认事件
e.preventDefault();
});
//3.回顶
$('.cevent-top').click(function(){
$(document).scrollTop($('.carousel').offset().top);
e.preventDefault();
})
})6.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--增强IE表现=edge-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/cevent.css" />
<!--[if lt IE 9] IE9浏览器生效>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--1.导航-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<!--默认container-fluid流体布局，改为固定布局container-->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">一刀coder-客户端官网cevent</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">公司简介 </a>
</li>
<li>
<a href="#" data-toggle="modal" data-target="#myModal">招商中心</a>
</li>
<li>
<a href="#">最新活动</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多机会 <span class="caret"></span></a>
<ul class="dropdown-menu cevent-menu">
<li>
<!--获取标签页id，这里的a标签href需要禁，才能完成页面跳-->
<a href="#TOP1">专业团队</a>
</li>
<li>
<a href="#TOP2">产品优势</a>
</li>
<li>
<a href="#TOP3">市场趋势</a>
</li>
<li>
<a href="#TOP4">未来展望</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="#">合作企业</a>
</li>
</ul>
</li>
</ul>
<!--搜索框-->
<!--<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="sousou产品搜索">
</div>
<button type="submit" class="btn btn-default">搜一下</button>
</form>-->
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">欢迎cevent登录！</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">个人设置 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">个人信息</a>
</li>
<li>
<a href="#">登录密码</a>
</li>
<li>
<a href="#">登出</a>
</li>
<li role="separator" class="divider"></li>
<li>
<a href="#">收货地址</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!--2.轮播图carousel
bootstrap中，data-都是js中编写的
data-interval:事件间隔
data-pause:hover为覆盖暂停，null鼠标覆盖无效果，默认为hover
data-wrap：true为无限循环，false为最后一张停止，默认为true
js定义了carousel的切换属性，这里的css属性不生效.js必须卸载页面加载完毕body之后
-->
<div id="carousel-example-generic" class="carousel slide cevent-carousel" data-ride="carousel" data-interval="3000">
<!-- Indicators -->
<!--<div id="carousel-example-generic" class="carousel slide cevent-carousel" data-ride="carousel" >-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/carousel-轮播1200-1920-new.jpg" alt="...">
<div class="carousel-caption">
<h4>JAVA / MySQL / Linux...全栈组件开发者</h4>
</div>
</div>
<div class="item">
<img src="img/carousel-轮播1200-1920-new.jpg" alt="...">
<div class="carousel-caption">
<h4>JAVA / MySQL / Linux...全栈组件开发者</h4>
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--绑定轮播控制-->
<div class="btn-group">
<label class="btn btn-primary ">
<input type="radio" name="options" id="carousel-start-btn" autocomplete="off"> 开启轮播
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="carousel-stop-btn" autocomplete="off"> 关闭轮播
</label>
</div>
</div>
<!--3.三列布局-->
<div class="container cevent-container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 cevent-thumbnail">
<!--去掉thumbnail边框-->
<div class="thumbnail">
<img src="../b-img/my-logo-2.png" alt="...">
<div class="caption">
<h3>产品展示中心</h3>
<p>product show center以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>
<a href="#" class="btn btn-default" role="button">查看详情</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="../b-img/my-logo-2.png" alt="...">
<div class="caption">
<h3>产品展示中心</h3>
<p>product show center以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>
<a href="#" class="btn btn-default" role="button">查看详情</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="../b-img/my-logo-2.png" alt="...">
<div class="caption">
<h3>产品展示中心</h3>
<p>product show center以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>
<a href="#" class="btn btn-default" role="button">查看详情</a>
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="../b-img/my-logo-2.png" alt="...">
<div class="caption">
<h3>产品展示中心</h3>
<p>product show center以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>
<a href="#" class="btn btn-default" role="button">查看详情</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!--4.分隔线-->
<div class="container cevent-hr">
<hr />
</div>
<!--5.标签页-->
<div class="container cevent-tag-page">
<!-- a标签的href-id对应tab-content -->
<ul class="nav nav-tabs cevent-menu-list" role="tablist">
<li role="presentation" class="active">
<a href="#TOP1" aria-controls="TOP1" role="tab" data-toggle="tab">TOP1-顶级团队</a>
</li>
<li role="presentation">
<a href="#TOP2" aria-controls="TOP2" role="tab" data-toggle="tab">TOP2-全国市场</a>
</li>
<li role="presentation">
<a href="#TOP3" aria-controls="TOP3" role="tab" data-toggle="tab">TOP3-质量保障</a>
</li>
<li role="presentation">
<a href="#TOP4" aria-controls="TOP4" role="tab" data-toggle="tab">TOP4-性价比之王</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="TOP1">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<h3>TOP1-打造极致产品开发团队</h3>
<p>Developer Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>JAVA DEV Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
</div>
<div class="col-md-4 tab-content-img">
<img src="../b-img/logo300-2.png" />
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="TOP2">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 tab-content-img">
<img src="../b-img/logo300-2.png" />
</div>
<div class="col-md-8">
<h3>TOP2-打造个性化自媒体市场</h3>
<p>Developer Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>JAVA DEV Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="TOP3">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<h3>TOP3-网站优化终生维护</h3>
<p>Developer Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>JAVA DEV Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
</div>
<div class="col-md-4 tab-content-img">
<img src="../b-img/logo300-2.png" />
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="TOP4">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 tab-content-img">
<img src="../b-img/logo300-2.png" />
</div>
<div class="col-md-8">
<h3>TOP4-快速建站的价格屠夫</h3>
<p>Developer Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>JAVA DEV Team Time 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
<p>分布式数据库管理 Manager System 团队展示时刻：以产品为核心，以价格为驱动，以服务为保障。做国内一流互联网产品开发团队。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--6.尾部：版权字符实体-->
<div class="navbar-fixed-bottom cevent-footer">
<h4>©cevent- 2020-DEV 一刀coder</h4>
<button type="button" class="btn btn-default cevent-top" data-toggle="button" aria-pressed="false" autocomplete="off">
回到顶部
</button>
</div>
<!--7.模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">招商中心</h4>
</div>
<div class="modal-body">
<div class="list-group">
<a href="#" class="list-group-item active">
联系我们
</a>
<a href="#" class="list-group-item"><span class="glyphicon glyphicon glyphicon-headphones text-primary" aria-hidden="true"></span> 客服一号：138-8888-9999</a>
<a href="#" class="list-group-item"><span class="glyphicon glyphicon glyphicon-headphones text-primary" aria-hidden="true"></span> 客服二号：138-8888-9999</a>
<a href="#" class="list-group-item"><span class="glyphicon glyphicon glyphicon-headphones text-primary" aria-hidden="true"></span> 客服三号：138-8888-9999</a>
<a href="#" class="list-group-item"><span class="glyphicon glyphicon glyphicon-headphones text-primary" aria-hidden="true"></span> 客服四号：138-8888-9999</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/cevent.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>