1. 导航
概念： 导航容器使用默认样式，流体布局。
-
导航头：
- LOGO：图片地址由JS动态生成。
- 折叠按钮布置三条横线图标，并且放在 .navbar-header 中，防止移动端串行。
-
折叠内容容器： 包括一个导航列表，数据由JS动态生成。
布局： 首页.html
<!--导航容器-->
<nav class="navbar navbar-default container-fluid">
<!--导航头-->
<section class="navbar-header">
<span class="navbar-brand">
<img id="logoImg"/>
</span>
<button data-toggle="collapse" data-target="#collapseBody" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</section>
<!--导航头折叠内容容器：包括一个导航列表-->
<section id="collapseBody" class="collapse navbar-collapse">
<ul id="navList" class="nav navbar-nav navbar-right">
<li class="active"><a><i> 首页</i></a></li>
<li><a><i> 摄影技能</i></a></li>
<li><a><i> 作品展示</i></a></li>
<li><a><i> 关于我们</i></a></li>
</ul>
</section>
</nav>
脚本： 首页.js
/*LOGO*/
$("#logoImg").attr("src", "../img/logo.png");
/*导航列表*/
let navList = $("#navList");
navList.find("a").eq(0).attr("href", "../html/首页.html");
navList.find("i").eq(0).attr("class", "glyphicon glyphicon-home");
navList.find("a").eq(1).attr("href", "../html/摄影技能.html");
navList.find("i").eq(1).attr("class", "glyphicon glyphicon-fire");
navList.find("a").eq(2).attr("href", "../html/作品展示.html");
navList.find("i").eq(2).attr("class", "glyphicon glyphicon-list");
navList.find("a").eq(3).attr("href", "../html/关于我们.html");
navList.find("i").eq(3).attr("class", "glyphicon glyphicon-question-sign");
2. 图片轮播
概念：
- 轮播圆点容器： 默认第一个为首选项。
- 轮播内容容器： 包括三个轮播项
- 每个轮播项中的图片、描述标题和描述内容由JS动态生成。
- 移动端时，描述内容隐藏。
- 默认第一个为首选项。
- 左右控制按钮： 使用左右箭头小图标。 布局： 首页.html
<!--轮播图片-->
<section id="myCarousel" class="carousel slide">
<!--轮播圆点容器-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!--轮播内容容器-->
<section class="carousel-inner">
<article class="item active">
<img src=""/>
<div class="carousel-caption"><h4></h4><p class="hidden-xs"></p></div>
</article>
<article class="item">
<img src=""/>
<div class="carousel-caption"><h4></h4><p class="hidden-xs"></p></div>
</article>
<article class="item">
<img src=""/>
<div class="carousel-caption"><h4></h4><p class="hidden-xs"></p></div>
</article>
</section>
<!--左右控制按钮-->
<a href="#myCarousel" data-slide="prev" class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</section>
样式： 首页.css
.carousel img{
width: 100%;
}
脚本： 首页.js
/*图片3s自动轮播*/
$("#myCarousel").carousel({
"interval": 3000,
"pause": "hover"
});
/*轮播图*/
let carousel = $(".carousel-inner").eq(0);
carousel.find("img").eq(0).attr("src", "../img/index/slide1.jpg");
carousel.find("h4").eq(0).text("第一张轮播图的标题");
carousel.find("p").eq(0).text("第一张轮播图的详细介绍，这里给出50到100字的文字描述即可。");
carousel.find("img").eq(1).attr("src", "../img/index/slide2.jpg");
carousel.find("h4").eq(1).text("第二张轮播图的标题");
carousel.find("p").eq(1).text("第二张轮播图的详细介绍，这里给出50到100字的文字描述即可。");
carousel.find("img").eq(2).attr("src", "../img/index/slide3.jpg");
carousel.find("h4").eq(2).text("第三张轮播图的标题");
carousel.find("p").eq(2).text("第三张轮播图的详细介绍，这里给出50到100字的文字描述即可。");
3. 第一部分：标题文字
布局： 首页.html
<!--第1部分-->
<section class="part1 container text-center">
<h3 class="text-info"></h3>
<p class="text-muted"></p>
</section>
样式： 首页.css
/*第1部分*/
.part1 {
margin: 30px auto;
}
/*平板端：[0, 768) 时使用这里的样式*/
@media (min-width: 768px) {
.part1, .part3 {
font-size: 15px;
}
}
/*笔记本：[768, 992) 时使用这里的样式*/
@media (min-width: 992px) {
.part1, .part3{
font-size: 20px;
}
}
/*台式机：[992, 1200) 时使用这里的样式*/
@media (min-width: 1200px) {
.part1, .part3 {
font-size: 25px;
}
}
脚本： 首页.js
/*第一部分*/
let part1 = $(".part1").eq(0);
part1.find("h3").text("| 一米拾光 一米朝阳 |");
part1.find("p").text("摄影爱好者的天堂之内，不会缺少发现美的眼睛。");
4. 第二部分：四小图文
概念： 第2部分内容，包括两个左文右图和两个左图右文，数据皆由JS动态生成。
布局： 首页.html
<!--第2部分内容-->
<section class="part2 container">
<article class="col-md-6">
<div class="media-left">
<img class="media-object thumbnail"/>
</div>
<div class="media-body">
<h3 class="media-heading text-primary"></h3><br/>
<p class="hidden-xs text-muted"></p>
<p class="hidden-xs text-info"></p>
</div>
</article>
<article class="col-md-6">
<div class="media-body text-right">
<h3 class="media-heading text-primary"></h3><br/>
<p class="hidden-xs text-muted"></p>
<p class="hidden-xs text-info"></p>
</div>
<div class="media-right">
<img class="media-object thumbnail"/>
</div>
</article>
<article class="col-md-6">
<div class="media-left">
<img class="media-object thumbnail"/>
</div>
<div class="media-body">
<h3 class="media-heading text-primary"></h3><br/>
<p class="hidden-xs text-muted"></p>
<p class="hidden-xs text-info"></p>
</div>
</article>
<article class="col-md-6">
<div class="media-body text-right">
<h3 class="media-heading text-primary"></h3><br/>
<p class="hidden-xs text-muted"></p>
<p class="hidden-xs text-info"></p>
</div>
<div class="media-right">
<img class="media-object thumbnail"/>
</div>
</article>
</section>
脚本： 首页.js
*第二部分*/
let part2 = $(".part2").eq(0);
part2.find("img").eq(0).attr("src", "../img/index/p2-1.jpg");
part2.find("h3").eq(0).text("夜景专题");
part2.find(".text-muted").eq(0).html("<del>资讯模块错误理解纠正内容填充1</del>");
part2.find(".text-info").eq(0).text("资讯模块错误理解纠正内容填充1");
part2.find("img").eq(1).attr("src", "../img/index/p2-2.jpg");
part2.find("h3").eq(1).text("人像专题");
part2.find(".text-muted").eq(1).html("<del>资讯模块错误理解纠正内容填充1</del>");
part2.find(".text-info").eq(1).text("资讯模块错误理解纠正内容填充1");
part2.find("img").eq(2).attr("src", "../img/index/p2-3.jpg");
part2.find("h3").eq(2).text("静物专题");
part2.find(".text-muted").eq(2).html("<del>资讯模块错误理解纠正内容填充1</del>");
part2.find(".text-info").eq(2).text("资讯模块错误理解纠正内容填充1");
part2.find("img").eq(3).attr("src", "../img/index/p2-4.jpg");
part2.find("h3").eq(3).text("美食专题");
part2.find(".text-muted").eq(3).html("<del>资讯模块错误理解纠正内容填充1</del>");
part2.find(".text-info").eq(3).text("资讯模块错误理解纠正内容填充1");
5. 第三部分：两大图文
概念： 第3部分内容，包括两个左图右文，数据皆由JS动态生成。
布局： 首页.html
<!--第3部分-->
<section class="part3 container text-center">
<article class="row bg-info">
<div class="col-md-6"><img class="img-thumbnail"/></div>
<div class="col-md-6">
<h3 class="text-primary"></h3>
<p class="text-muted"></p>
</div>
</article>
<article class="row bg-success">
<div class="col-md-6"><img class="img-thumbnail"/></div>
<div class="col-md-6">
<h3 class="text-primary"></h3>
<p class="text-muted"></p>
</div>
</article>
</section>
样式： 首页.css
/*第3部分：调整每行内容上下内外边距*/
.part3 .row {
padding: 40px 0px;
margin: 20px 0px;
}
脚本： 首页.js
/*第三部分*/
let part3 = $(".part3").eq(0);
part3.find("img").eq(0).attr("src", "../img/index/p3-1.jpg");
part3.find("h3").eq(0).text("图文标题1");
part3.find("p").eq(0).text("图文详细介绍内容填充1");
part3.find("img").eq(1).attr("src", "../img/index/p3-2.jpg");
part3.find("h3").eq(1).text("图文标题2");
part3.find("p").eq(1).text("图文详细介绍内容填充2");
整体代码，建议仔细看完在复制粘贴
布局： 首页.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>首页</title>
<link href="../bootstrap337/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/global.css" rel="stylesheet">
<link href="../css/首页.css" rel="stylesheet">
</head>
<body>
<!--导航条容器：默认和反色-->
<nav class="navbar navbar-default container-fluid">
<!--导航头-->
<section class="navbar-header">
<!--logo-->
<span class="navbar-brand">
<img id="logoImg"/>
</span>
<!--折叠触发器按钮：三条横线-->
<!--放在 .navbar-header 中，是为了防止移动端串行-->
<button data-toggle="collapse" data-target="#collapseBody" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</section>
<!--导航头折叠内容容器-->
<section id="collapseBody" class="collapse navbar-collapse">
<ul id="navList" class="nav navbar-nav navbar-right">
<li class="active"><a><i> 首页</i></a></li>
<li><a><i> 摄影技能</i></a></li>
<li><a><i> 作品展示</i></a></li>
<li><a><i> 关于我们</i></a></li>
</ul>
</section>
</nav>
<!--轮播图片-->
<section id="myCarousel" class="carousel slide">
<!--轮播圆点容器-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!--轮播内容容器-->
<section class="carousel-inner">
<article class="item active">
<img src=""/>
<div class="carousel-caption"><h4></h4>
<p class="hidden-xs"></p></div>
</article>
<article class="item">
<img src=""/>
<div class="carousel-caption"><h4></h4>
<p class="hidden-xs"></p></div>
</article>
<article class="item">
<img src=""/>
<div class="carousel-caption"><h4></h4>
<p class="hidden-xs"></p></div>
</article>
</section>
<!--左右控制按钮-->
<a href="#myCarousel" data-slide="prev" class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</section>
<!--第1部分-->
<section class="part1 container text-center">
<h3 class="text-info"></h3>
<p class="text-muted"></p>
</section>
<!--第2部分-->
<section class="part2 container">
<article class="col-md-6">
<div class="media-left"><img class="media-object thumbnail"/></div>
<div class="media-body">
<h3 class="media-heading text-primary"></h3><br/>
<p class="hidden-xs text-muted"></p>
<p class="hidden-xs text-info"></p>
</div>
</article>
<article class="col-md-6">
<div class="media-body text-right">
<h3 class="media-heading text-primary"></h3><br/>
<p class="hidden-xs text-muted"></p>
<p class="hidden-xs text-info"></p>
</div>
<div class="media-right"><img class="media-object thumbnail"/></div>
</article>
<article class="col-md-6">
<div class="media-left"><img class="media-object thumbnail"/></div>
<div class="media-body">
<h3 class="media-heading text-primary"></h3><br/>
<p class="hidden-xs text-muted"></p>
<p class="hidden-xs text-info"></p>
</div>
</article>
<article class="col-md-6">
<div class="media-body text-right">
<h3 class="media-heading text-primary"></h3><br/>
<p class="hidden-xs text-muted"></p>
<p class="hidden-xs text-info"></p>
</div>
<div class="media-right"><img class="media-object thumbnail"/></div>
</article>
</section>
<!--第3部分-->
<section class="part3 container text-center">
<article class="row bg-info">
<div class="col-md-6"><img class="img-thumbnail"/></div>
<div class="col-md-6">
<h3 class="text-primary"></h3>
<p class="text-muted"></p>
</div>
</article>
<article class="row bg-success">
<div class="col-md-6"><img class="img-thumbnail"/></div>
<div class="col-md-6">
<h3 class="text-primary"></h3>
<p class="text-muted"></p>
</div>
</article>
</section>
<!--注脚-->
<footer class="bg-warning text-center text-muted">
<p></p>
<p class="text-uppercase"></p>
</footer>
<script src="../jquery321/jquery-3.2.1.min.js"></script>
<script src="../bootstrap337/js/bootstrap.min.js"></script>
<script src="../script/首页.js" type="text/javascript"></script>
</body>
</html>
样式： 首页.css
@charset "utf-8";
.carousel img{
width: 100%;
}
/*第1部分*/
.part1 {
margin: 30px auto;
}
/*第3部分：调整每行内容上下内外边距*/
.part3 .row {
padding: 40px 0px;
margin: 20px 0px;
}
/*媒体查询：浏览器根据屏幕视口大小来选择具体使用哪一种CSS*/
/*没有小于768px的移动端设计区域是因为BOOTSTRAP3默认就是移动端*/
/*平板端：[0, 768) 时使用这里的样式*/
@media (min-width: 768px) {
.part1, .part3 {
font-size: 15px;
}
}
/*笔记本：[768, 992) 时使用这里的样式*/
@media (min-width: 992px) {
.part1, .part3{
font-size: 20px;
}
}
/*台式机：[992, 1200) 时使用这里的样式*/
@media (min-width: 1200px) {
.part1, .part3 {
font-size: 25px;
}
}
脚本： 首页.js
$(() => {
/*LOGO*/
$("#logoImg").attr("src", "../img/logo.png");
/*导航列表*/
let navList = $("#navList");
navList.find("a").eq(0).attr("href", "../html/首页.html");
navList.find("i").eq(0).attr("class", "glyphicon glyphicon-home");
navList.find("a").eq(1).attr("href", "../html/摄影技能.html");
navList.find("i").eq(1).attr("class", "glyphicon glyphicon-fire");
navList.find("a").eq(2).attr("href", "../html/作品展示.html");
navList.find("i").eq(2).attr("class", "glyphicon glyphicon-list");
navList.find("a").eq(3).attr("href", "../html/关于我们.html");
navList.find("i").eq(3).attr("class", "glyphicon glyphicon-question-sign");
/*图片3s自动轮播*/
$("#myCarousel").carousel({
"interval": 3000,
"pause": "hover"
});
/*轮播图*/
let carousel = $(".carousel-inner").eq(0);
carousel.find("img").eq(0).attr("src", "../img/index/slide1.jpg");
carousel.find("h4").eq(0).text("第一张轮播图的标题");
carousel.find("p").eq(0).text("第一张轮播图的详细介绍，这里给出50到100字的文字描述即可。");
carousel.find("img").eq(1).attr("src", "../img/index/slide2.jpg");
carousel.find("h4").eq(1).text("第二张轮播图的标题");
carousel.find("p").eq(1).text("第二张轮播图的详细介绍，这里给出50到100字的文字描述即可。");
carousel.find("img").eq(2).attr("src", "../img/index/slide3.jpg");
carousel.find("h4").eq(2).text("第三张轮播图的标题");
carousel.find("p").eq(2).text("第三张轮播图的详细介绍，这里给出50到100字的文字描述即可。");
/*第一部分*/
let part1 = $(".part1").eq(0);
part1.find("h3").text("| 一米拾光 一米朝阳 |");
part1.find("p").text("摄影爱好者的天堂之内，不会缺少发现美的眼睛。");
/*第二部分*/
let part2 = $(".part2").eq(0);
part2.find("img").eq(0).attr("src", "../img/index/p2-1.jpg");
part2.find("h3").eq(0).text("夜景专题");
part2.find(".text-muted").eq(0).html("<del>资讯模块错误理解纠正内容填充1</del>");
part2.find(".text-info").eq(0).text("资讯模块错误理解纠正内容填充1");
part2.find("img").eq(1).attr("src", "../img/index/p2-2.jpg");
part2.find("h3").eq(1).text("人像专题");
part2.find(".text-muted").eq(1).html("<del>资讯模块错误理解纠正内容填充1</del>");
part2.find(".text-info").eq(1).text("资讯模块错误理解纠正内容填充1");
part2.find("img").eq(2).attr("src", "../img/index/p2-3.jpg");
part2.find("h3").eq(2).text("静物专题");
part2.find(".text-muted").eq(2).html("<del>资讯模块错误理解纠正内容填充1</del>");
part2.find(".text-info").eq(2).text("资讯模块错误理解纠正内容填充1");
part2.find("img").eq(3).attr("src", "../img/index/p2-4.jpg");
part2.find("h3").eq(3).text("美食专题");
part2.find(".text-muted").eq(3).html("<del>资讯模块错误理解纠正内容填充1</del>");
part2.find(".text-info").eq(3).text("资讯模块错误理解纠正内容填充1");
/*第三部分*/
let part3 = $(".part3").eq(0);
part3.find("img").eq(0).attr("src", "../img/index/p3-1.jpg");
part3.find("h3").eq(0).text("图文标题1");
part3.find("p").eq(0).text("图文详细介绍内容填充1");
part3.find("img").eq(1).attr("src", "../img/index/p3-2.jpg");
part3.find("h3").eq(1).text("图文标题2");
part3.find("p").eq(1).text("图文详细介绍内容填充2");
/*注脚*/
let footer = $("footer").eq(0);
footer.find("p").eq(0).text("摄影爱好者基地 | 合作事宜 | 版权投诉");
footer.find("p").eq(1).text(`
黑ICP 备1234567. ©right;
1964-2100 一米拾光网. Powered by Bootstrap.`);
});
