python之django的修改js模板步骤

2022-06-07  本文已影响0人  软件开发技术修炼

为了快速搭建一个简单的平台,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,指定到样式设置处


第四步,细节补充修改完善

比如:

  1. 元素标签经常出现 嵌套情况,对第三方组件的结构在前端F12一层层解析
  2. 通过在元素的标签内加入style=""的方式来打上样式补丁,修改颜色等等
  3. width:100% 代表宽度为父级元素宽度最大
  4. background-color : black 代表背景颜色
  5. 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非正常关闭,端口被占用,需要直接把谷歌浏览器页面退出,重新启动

上一篇下一篇

猜你喜欢

热点阅读