为了快速搭建一个简单的平台，html页面采用直接引用jquery之家的模板；引用时，掌握方法改起来特别快。
修改时，按下面操作，注意以下几点即可~
第一步，下载js模板，放入
1、下载jquery模板，jquery之家地址：http://www.htmleaf.com/
里面的模板特别丰富，可预览，可免费下载，一般下载简洁的模板即可
2、下载下来之后，解压后放到static目录下
3、先检查index.html能否在浏览器中本地文件方式打开和正常使用。
注意：本地打开与映射到url外网打开的区别：
1. 打开的url不同
2. 打开方式不同
3. 引入静态资源的路径不同
静态资源必须放static里，写法必须是/static/ 一级一级往下写【考虑安全】
引入到url中，注意：
加入“/static/201912068536”，<link rel="stylesheet" href="/static/201912068536/css/bootsnav.css">
第二步，查看分析，进行大致处理
1-查：引入模板，大致检查有没有小错误；【别人上传，可能有问题】
2-引用：然后把index复制到template下，才能引用
对内部一切href,src的相对路径，都要前加/static/组件包名/
3-删：然后进行删减，分别删减head,body,script 三部分。
1. head中主要删减title,demo和已经引进过的Bootstrap,jquery等
2. Body中主要删减其他广告部分标签，并且对目标部分进行扒皮处理
3. script中对已经引入过的jquery等进行删减
注意：每删减一步都要打开Html来看看 是否还能正常使用。
4-暂放：href,src若引入的是http开头 则为外链，暂时不用管，速度慢可下载到本地static中正常引入即可（后期再附上下载加快速度的方法）
第三步，如何融入到一个页面，在引入的基础上，继续编写
1、一个html引入另一个html的方法
通过{% include "xxx.html" %} 的方式来引入其他html的内容，多用于菜单
extend与include的区别：{% extends 'menu.html' %} 多用于继承
2、通过F12调试后修改属性
1）如上图：<nav class="navbar navbar-default navbar-mobile bootsnav" style="">，打补丁style="margin-bottom: 0px"
2）或者选中“bootsnav”，按ctrl，指定到样式设置处
第四步，细节补充修改完善
比如：
- 元素标签经常出现 嵌套情况，对第三方组件的结构在前端F12一层层解析
- 通过在元素的标签内加入style=""的方式来打上样式补丁，修改颜色等等
- width:100% 代表宽度为父级元素宽度最大
- background-color ： black 代表背景颜色
- margin-left/right/top/bottom : 20px 代表外边距
1. 背景样式
<head>
<style>
body{
background-image: url("/static/img/back.png");
background-size: cover;
}
</style>
</head>
2. 调节透明度
opacity: 0.9;
position: absolute;
top: 50%;
3. 表单请求：
<form class="form",action="/login_act/",method="post">
4. 调整高度
margin: -50px auto;
padding: 80px 0;
最后补充，异常处理：
pycharm非正常关闭，端口被占用，需要直接把谷歌浏览器页面退出，重新启动
网友评论