1.项目结构
pro_photograph
|_ bootstrap337
|_ css
|_global.css
|_作品展示.css
|_关于我们.css
|_摄影技能.css
|_首页.css
|_ html
|_ 作品展示.html
|_ 关于我们.html
|_ 摄影技能.html
|_ 首页.html
|_ img
|_ index
|_ infomation
|_ photo
|_ logo.png
|_ jquery321
|_ jquery-3.2.1.js
|_ jquery-3.2.1.min.js
|_ script
|_ 作品展示.js
|_ 关于我们.js
|_ 摄影技能.js
|_ 首页.js
2.img图片大全
需要自己下载改名
index
- p2-1.jpg
- p2-2.jpg
- p2-3.jpg
- p2-4.jpg
- p3-1.jpg
- p3-2.jpg
- slide1.jpg
- slide2.jpg
- slide3.jpg
infomation
- jumbotron.jpg
- left1-1.jpg
- left1-2.jpg
- left1-3.jpg
- left1-4.jpg
- left1-5.jpg
- left1-6.jpg
- right1-1.jpg
- right1-2.jpg
- right1-3.jpg
- right1-4.jpg
- right1-5.jpg
photo
- p001.jpg
- p002.jpg
- p003.jpg
- p004.jpg
- p005.jpg
- p006.jpg
- p007.jpg
- p008.jpg
logo.png
3.代码模板
<!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>首页</title>
<link href="../bootstrap337/css/bootstrap.min.css" rel="stylesheet">
<!--全局样式-->
<link href="../css/global.css" rel="stylesheet">
<!--引入css文件-->
<link href="../css/？？？.css" rel="stylesheet">
</head>
<body>
<script src="../jquery321/jquery-3.2.1.min.js"></script>
<script src="../bootstrap337/js/bootstrap.min.js"></script>
<!--引入js文件-->
<script src="../script/？？？.js" type="text/javascript"></script>
</body>
</html>
4.全局样式
概念： 在所有的HTML文件中引入这个全局css文件。
样式： global.css
@charset "utf-8";
.jumbotron{
background-image: url("../img/infomation/jumbotron.jpg");
}
.navbar{
margin-bottom:0px;
}
.navbar-brand{
/*.navbar-brand自带内补会让Logo图片缩小*/
padding: 2px 15px;
}
footer{
padding-top: 20px;
padding-bottom: 10px;
}
5.注脚部分
概念： 所有HTML内容的注脚部分代码相同。
布局：
<!--注脚-->
<footer class="bg-warning text-center text-muted">
<p></p>
<p class="text-uppercase"></p>
</footer>
脚本：
<!--注脚-->
/*注脚*/
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.`);
