热门标签
热门文章
- 1Current existing ChromeDriver binary is unavailable, proceding with download and extraction
- 2JAVA JDK下载安装环境变量配置与安装视频教程2022年（超详细）_jdk环境变量视频
- 3从零学习python - 12面向对象Object详解_python 怎么看object的具体
- 4linux CPU100% xmrig病毒处理_execstart=/root/c3pool/xmrig
- 5基于SSM+Layui的图书管理系统（附源码+数据库）_基于ssm智慧图书管理系统
- 6【Picgo指南】图床神器之Picgo工具的安装与快速上手详细教程
- 7蓝桥杯备赛Day6——链表_蓝桥杯竞赛中推荐用链表吗
- 82023 睿抗机器人开发者大赛CAIP-编程技能赛-高职组（国赛）_rc-v1 另类单位圆
- 9基于hadoop气象分析大屏可视化系统-计算机毕业设计
- 10Ai绘画工具，Stable Diffusion插件使用攻略_face yolo和mediapipeface区别
当前位置: article > 正文
自己动手搭网站（四）：用bootstrap写几个简单的页面_bootstrap制作的网站页面
作者：凡人多烦事01 | 2024-05-18 10:04:10
赞
踩
bootstrap制作的网站页面
前言
这是博主自己动手搭建网站尝试过程的一些记录，
上篇：electerm远程连接云服务器，部署环境并发布第一个静态页面
总目录：自己动手搭建网站系列总目录
上篇写了连接云服务器，并发布一个静态页面，至此，所谓的“网站”总算有了一点可以看到的东西，可惜仍然是简陋到惨不忍睹。所以接下来的目标是把网站搭建得好看点并实现一些功能，这篇就简单记录下怎么用bootstrap搭建几个简单的静态页面。
顺便补充一点内容：在看与网站有关的文章时候，我们经常看到“静态页面”和“动态页面”这两个词，那么究竟什么是“动态页面”，什么是“静态页面”，它们 的区别又在哪呢？
这里简单谈下博主个人的看法，个人觉得静态页面就是“中看不中用”的界面。例如我用html搭了个登录页面，看起来像那么回事，有两个框框用来填账户和密码，还有个按钮用来提交，但实际上这只是用来看的，点提交按钮页面根本没啥变化，还是原样子，这就是静态页面。那么更进一步，我们接着把登录的逻辑用代码补充完整，比如怎么处理用户输入，怎么验证用户名和密码，登录完怎么跳转…这样下来，登录页面就“内外兼修”了，就算是个动态页面了。简单来说，静态页面就是做展示界面用的，动态页面则兼有展示和逻辑处理的功能。一般而言，后缀为.html的都可归为静态页面一类。
一、bootstrap简介
bootstrap官网
什么是bootstrap,一个比较官方的介绍：“Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目”。说实话，什么“响应式布局”博主也不是很清楚，不过这并不影响咱们用它。咱主要看重的是“框架”。
大家应该都对html、css、js有所了解，这些都是搭网页需要用到的技术，html让图形界面可以用一堆标记来描述，css是主要是一些固定的样式，用来控制字体、图形等网页元素的格式（例如大小、颜色等），js作用就比较大了，其中一个功能就是“动态效果”，注意此动态非彼动态，不是指“动态页面”，而是“会动的页面”，比如动画、轮播图、游动的图标等…当然，除此之外，js还有许多作用，有兴趣的可以自行了解，这里就不再赘述。
而bootstrap就是用上面的东西做出来的一套的“组件”，让我们不必从原始的html开始搭建网页。例如我想要一个好看的输入框，直接去bootstrap那里找对应的样式，然后复制过来改改就行，不必自己重新写一个；又或者我要搞个轮播图（就是一张一张图轮流展示的那种）功能，直接找bootstrap提供的样式，自己把图片扔进去就成了。如果你觉得bootstrap提供的样式不是很满意，你还可以去改改它的源代码，在它的基础上制定自己想要的独特样式…
二、bootstrap环境准备
bootstrap主要有两种引入方式，本地引入需要把文件下载下来，放到项目目录里，操作上稍微麻烦，然而方便调试和查看代码；而快捷引入（通过cdn)相当于从云端引入，非常快捷方便，然而不便查看代码和调试，两种方式各有优劣吧。
（1）本地导入
下载bootstrap
具体的介绍大家可以参考官方中文文档
和菜鸟教程（推荐，博主自己主要就是跟着这个学的）
顺便一说，菜鸟教程这网站非常适合web技术初学者，它们的讲解详实易懂，而且有许多实例，虽然这名字有点坑…。
博主这里讲讲下载和简单使用。我们进入
bootstrap官网如下图，如果要下载最新版本直接点击download就行，要下载其它版本点击"All release"，博主用的是3.系列的，因为那时我找的教程3系列的最全…下面演示的是下载3版本，点击"All release"
选择3.4
点击“download bootstrap”即可
下载好后解压缩，解压好后应该是下面这个样子的，有三个文件，最新版似乎没有fonts文件，需要自己去官网下载。
下载jQuery
有了以上文件还不行，我们还需要下载一个叫“jQuery”的东西，jQuery官网，点击download,进入如下界面
然后选择一个版本下载，我这里点击上方标红的，出现如下界面
鼠标右键，点击另存为，存到刚刚解压好的bootstrap的js目录里
这样我们就把准备工作完成了，接下来就是应用了。
（2）快捷引入（比较方便）
直接在网页的head标签内添加如下几行就行，其中bootstrap和jquery的版本号是可以改的。
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
- 1
- 2
- 3
三、bootstrap搭建页面
3.1 bootstrap引入项目
我这里使用的是eclipse，使用本地导入方式引入bootstrap，当然，编程工具大家选自己喜欢的就行。只要把上面准备好的文件和网页文件放到同一级目录下，然后按照如下格式引入就行（在html的head标签段中添加下面这么几行）
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
- 1
- 2
- 3
博主因为后面要考虑升级网站，这里就采用jsp（Java server pages）,至于什么是jsp 简单说来，就是加强版的HTML，属于javaweb技术体系的一环，可以内嵌Java代码以实现和后端的交互等。不过咱们先别管这么多，总之，搭静态页面的时候.html结尾的文件和.jsp结尾的文件其实是一样的，jsp方便后面升级成动态页面罢了。另外，由于jsp技术是整个javaweb体系的一环，所以我后端也理所当然地要用Java来写。虽说，jsp放到现在有点“古老”，不过对博主而言，反正只是尝试搭个网站，能用就行。
至于为啥不用更简单的php，这就一言难尽了（反正不是我不会php的原因…）咳咳，好了，闲话少说，下面进入正题。
3.2 bootstrap搭建简单页面
怎么在eclipse中新建一个简单的网站项目我在另外一篇记录。eclipse新建一个简单的网站（web）项目
在eclipse中新建一个“dynamic web project”(动态网站项目)，不要疑惑，我明明说的是搭静态页面，怎么新建起动态网站项目了，动态的部分我不写不就是静态网站了吗？
然后新建一个jsp文件,上面已经说过了，不必非得是jsp，直接html也行，我这里用jsp而已。后面就是写代码搭建页面了，bootstrap有一套网格结构，至于什么是网格结构，简单来说就是将一个网页通过容器（container）、行（row）、列(col-)切分开，变成网一样的形状。具体的介绍大家可以参考官网和菜鸟教程，这里就不细表了。
总之bootstrap网格的基本结构大概是下面这样子的。
<div class="container"> <!-- 容器 -->
<div class="row"> <!--行-->>
<div class="col-*-*"></div> <!--列，3版本里列有以下几种型号：超小设备手机（<768px）（.col-xs-n）、小型设备平板电脑（≥768px）（.col-sm-n）
中型设备台式电脑（≥992px）（.col-md-n）、大型设备台式电脑（≥1200px）（.col-lg-n）n代表某个数字，注意行内的列加起来不应超过12-->
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
下面就直接贴几个我写好的页面代码，都弄好后，博主的项目结构大概是下面这个样子
index.jsp（一般网站首页都取名为index.xxx），为了装饰，我在页面内引入了许多图片，所以直接复制代码运行（引入bootstrap的情况下）会没有图。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title>微光落尘的个人空间</title> <script src="js/jquery-3.5.1.min.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js"></script> <style> .fakeimg { height: 200px; background: #F0FFFF; } .back-img{ background-image:url(img/hometown1.jpg) } </style> </head> <body> <div class="jumbotron text-center back-img" style="margin-bottom:0" > <h1>欢迎来小尘空间</h1> <p>小站虽小，或有其妙</p> </div> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">导航栏</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="index.jsp">主页</a></li> <li class="active"><a href="scenery.jsp">江山如画</a></li> <li class="active"><a href="blog.jsp">博客专栏</a></li> <li class="active"></li> </ul> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-md-4"> <h2 class="text-primary">自我介绍...</h2> <div style="background: #F0FFFF"> <p class="text-primary">代号：苍山沐风人<br> 座右铭：东方欲晓，晨光逐道<br> 兴趣爱好：南山牧马，北海垂杆...<br> 专业序列：逐道之尘<br> 附加信息：介于无危险和极度危险之间，建议小心接触，如果能在拜访的时候戴上龙灵鱼，他将非常高兴</p> <p class="text-primary">补充说明： 以上都是瞎编的</p> </div> <h2 class="text-primary">网站访问参考手册</h2> <%-- 后续升级：做一个自我介绍的栏目列表，可以后台管理 --%> <h5 class="text-info">说明：本手册没有什么可信度，信不信取决于读者的想法</h5> <ul style="background:#F0FFFF;"> <li class="text-primary">建议一、如果你在本站首页看到了让你感到奇怪的话语，不要惊讶，那是正常的。 （因为那都是我瞎编的，什么，你问我是谁，嗯，你或许可以试着猜猜看？猜对没有奖励哦！）</li> <li class="text-primary">建议二、如果你感觉有些无聊和烦闷，可以试着逛逛“江山如画”页面，或许这会让你感觉好点（虽然，但是，那里还只有几张...一些涂抹痕迹）</li> <li class="text-primary">建议三、当你点击“博客专栏”，发现后续查看文章的操作都没有响应，不要惊慌，立即点击导航栏去到其它页面（因为博客功能我还没开发好）</li> <li class="text-primary">建议四、如果你逛完网站后想要和我说点什么，请点击主页的“给我留言”，你会很容易找到它，如果没有，请点击刷新，若还是没有，那......</li> <li class="text-primary">建议六、本网站合规合法，你不用担心本网站被封禁（因为我还没有备案）</li> <li class="text-primary">最后，祝您参光愉快，天天开心！（对了，我在网站的某处留了一个彩蛋，你猜会在哪儿呢？）</li> </ul> </div> <div class="col-md-8"> <h2 class="text-primary">美丽家乡</h2> <div id="myCarousel" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <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> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active" > <img src="img/hometown1.jpg" alt="First slide"> <div class="carousel-caption">标题 1</div> </div> <div class="item" > <img src="img/hometown2.jpg" alt="Second slide"> <div class="carousel-caption">标题 2</div> </div> <div class="item" > <img src="img/hometown3.jpg" alt="Third slide"> <div class="carousel-caption">标题 3</div> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </div> <div class="jumbotron text-center" style="margin-bottom:0"> <p style="color:#0000FF;font-size:30px"><a href="message.jsp">给我留言 <span class="glyphicon glyphicon-pencil"></span> </a> </p> <br> <p>备案信息：暂无</p> </div> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
blog.jsp（博客页面）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title>微光落尘的个人空间</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-3.5.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <style> .fakeimg { height: 200px; background: #F0FFFF; } .back-img{ background-image:url(img/hometown1.jpg) } </style> </head> <body> <div class="jumbotron text-center back-img" style="margin-bottom:0" > <h1>欢迎来小尘空间</h1> <p>小站虽小，或有其妙</p> </div> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">导航栏</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="index.jsp">主页</a></li> <li class="active"><a href="scenery.jsp">吟游赏景</a></li> <li class="active"><a href="blog.jsp">博客专栏</a></li> </ul> </div> </div> </nav> <ul class="list-group"> <li class="list-group-item"> <span class="badge">新</span> 文章一：...... </li> <li class="list-group-item">文章二：......</li> <li class="list-group-item">文章三：......</li> <li class="list-group-item">文章四：......</li> <li class="list-group-item">文章五：......</li> <li class="list-group-item">文章六：......</li> </ul> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
scenery.jsp（风景展示页面）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title>微光落尘的个人空间</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-3.5.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">导航栏</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="index.jsp">主页</a></li> <li class="active"><a href="scenery.jsp">吟游赏景</a></li> <li class="active"><a href="blog.jsp">博客专栏</a></li> </ul> </div> </div> </nav> <div id="myCarousel" class="carousel slide"> <!-- 轮播（Carousel）指标 --> <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> <!-- 轮播（Carousel）项目 --> <div class="carousel-inner"> <div class="item active" > <img src="img/pic1.jpg" alt="First slide"> <div class="carousel-caption">“美丽校园”</div> </div> <div class="item" > <img src="img/pic2.jpg" alt="Second slide"> <div class="carousel-caption">标题2</div> </div> <div class="item" > <img src="img/pic3.jpg" alt="Third slide"> <div class="carousel-caption"">标题3</div> </div> </div> <!-- 轮播（Carousel）导航 --> <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
message.jsp(留言页面)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title>微光落尘的个人空间</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-3.5.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <style> .back-img{ background-image:url(img/hometown1.jpg) } </style> </head> <body> <div class="jumbotron text-center back-img" style="margin-bottom:0" > <h1>欢迎来小尘空间</h1> <p>小站虽小，或有其妙</p> </div> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">导航栏</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="index.jsp">主页</a></li> <li class="active"><a href="scenery.jsp">吟游赏景</a></li> <li class="active"><a href="blog.jsp">博客专栏</a></li> </ul> </div> </div> </nav> <form role="form" id="form1"> <div class="form-group"> <label for="name">tip:欢迎留言!!!</label> <textarea id="tarea" class="form-control" rows="6"></textarea> <br> <button type="submit" id="btn1_send class="btn btn-success">发送 </button> </div> </form> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
AdminLog.jsp（后台登录页面）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset=UTF-8"> <title>微光落尘的个人空间</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/jquery-3.5.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/dealEvent.js"></script> <style> .in_style{ background-color:rgba(30,144,255,0.1); color:#1E90FF } body{ background:url("img/hometown2.jpg") no-repeat center center; /*加载背景图*/ /* 背景图不平铺 */ background-size:cover; /* 让背景图基于容器大小伸缩 */ background-attachment:fixed; /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ background-color:#CCCCCC; /* 设置背景颜色，背景图加载过程中会显示背景色 */ } </style> </head> <body> <div class="text-center" > <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">导航栏</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="index.jsp">主页</a></li> <li class="active"><a href="scenery.jsp">吟游赏景</a></li> <li class="active"><a href="blog.jsp">博客专栏</a></li> </ul> </div> </div> </nav> <div> <h1>欢迎来小尘空间</h1> <p>网站后台传送门</p> </div> <div class="container"> <div class="row" style="margin-top:30px"> <div class="col-sm-4 col-md-offset-4"> <form id="form1" class="bs-example bs-example-form" role="form" method="post"> <div class="input-group"> <span class="input-group-addon control-label in_style">时空节点</span> <input type="text" name="username" class="form-control in_style" placeholder=""> </div> <br> <div class="input-group"> <span class="input-group-addon control-label in_style">开启秘钥</span> <input type="password" name="password" class="form-control in_style" placeholder=""> </div> <br> <div class="input-group-btn"> <button type="submit" id="b_log" class="btn btn-success" style="background-color:rgba(0,0,0,0.1);border:none;color:#1E90FF">点击传送</button> </div> </form> </div> </div> </div> </div> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
最后添几张跑起来的效果图
如果本篇文章对您有帮助的话，别忘了点个赞！
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/587825
推荐阅读
相关标签
