最近闲来无事，想着把自己工作正在做的一个项目做一个简单的分享与实战教程，该项目不困难但是由于涉及要素过多所以比较复杂。所以这里分享出来也是为了帮助新手小白能在实战当中快速了解python知识。主要内容涉及Python、HTML5、JavaScript、云计算、AI等。
如果有大佬发现问题，也非常欢迎指教
上期回顾
上期我们聊到如何创建我们的第一个APP并在浏览器中显示出来，这期我们将详细介绍如何设计自己的主页。
创建statics文件夹
在我们的项目文件夹下创建statics文件夹，同时在里面分别创建css、images、js三个文件夹分别保存相对应的文件。
同时在settings.py中尾部写入以下设置：
STATIC_URL = '/statics/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "statics"),
]
注意：STATIC_URL默认的值是’/static/’，这里我们将其改成与statics文件夹名称相符，防止后面混淆。
主页设计
首先我们要明确我们想要一个什么样的主页，当前互联网中有各式各样的主页，有介绍型、商城型、博客型等等，但是考虑我们这次设计的是一个AI管理调度平台，那么我们优先考虑管理后台型的主页。
首先我们来看一下完全搭建完成后是一个什么样子的：
然后我们可以把这个主页分成五个部分建设：
第1部分
首先我们将整个页面划分为两个部分，分别是图中的第1部分和其他部分
#这里是第1部分
#这里是其他部分
注意：本次平台设计bootstrap+jquery的技术路线，在body中需要引入相应的文件，在主页设计完成后会给出需要引入哪些文件。
上述代码中我们可以看到有两个相似的类分别是”col-2″及”col-10″，这两个类的主要作用是将网页中的一行按比例进行分割，因为在bootstrap中完整的一行被认为由12个小格子分割而成，所以这里我们第一部分在这一行中就占了2/12，而其他部分占了10/12。
然后接着我们在第1部分写入以下代码：
#这里是第1部分
芒果云AI中台
主页
智能标签
智能拆条
智能唱词
人脸检测
内容库
然后我们就可以实现以下效果：
这里我们可以看到第1部分的效果已经出来了，这里你可以按照自己的需求来增加导航栏、修改名称、修改图标等等。
第2部分
#这里是其他部分
#这里是第2部分
概况
用户管理
开发者支持
帮助
个人信息
安全凭证
钱包
退出登录
然后我们就可以实现以下效果：
这里我们可以看到顶部导航栏、搜索栏、用户头像及相关配置的功能的设计已经实现了。在下一期我们将会继续介绍剩下的内容如何实现。
如果文章帮助到了您，可否给一个点赞关注收藏呢~
如果遇到编程上的问题，欢迎留言哦~
Original: https://blog.csdn.net/weixin_42144330/article/details/123688771
Author: 跟着皮皮实战Python
Title: 从零开始打造云端AI管理调度平台（四）如何设计主页_1
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/735399/
转载文章受原作者版权保护。转载请注明原作者出处！