JRP Version 1.4.120

使用Flask学习制作网页一个月后:
借用HTML书籍学习,自己做的NAS管理系统终于是长得好看了一些:
使用模版继承,最开始是引用人家的库
from flask_bootstrap import Bootstrap
效果:
在这里插入图片描述
我准备进一步管理但是发现好像还不如我重新写一个
于是再弄清楚一点以后,有了这一版,效果如下:
在这里插入图片描述
主要是网页背景想要好看些,目前功能依旧是和之前一样,新增一个时间显示功能,这个是用javascript实现的:

    <script>function mytime(){var a = new Date();var b = a.toLocaleTimeString();var c = a.toLocaleDateString();document.getElementById("time").innerHTML = c+"&nbsp"+b;}setInterval(function() {mytime()},1000);</script>

这个版本主要还是开始尝试使用JS(javascript)和一些CSS,HTML的代码命令开始尝试管理自定义网页内容:
最突出的应该是:
背景图:
但是这里是发现进入某些页面后会出现找不到这个static/base4.jpg图片的问题,或许和我绝对路径和这里相对路径混用造成的Bug,暂时还没有解决…

    html{background-image: url(static/base4.jpg);background-size: cover;}

然后是超链接的一些定义,包含文字大小,位置等等,重要的是开始尝试使用HTML属性继承
从一个 base.html中取得关键属性,然后base.html中含一个空白代码段,运行后续继承网页填充,
这样我的网页格式不必每一个模版都去编排一遍:
base.html 留白部分

    {% block content %}{% endblock %}

然后其他HTML文件引用时使用以下结构,然后在...区域填充页面主题,他可以继承base页面的关键属性,同时自定义新的显示模块(姑且这样描述)

{% extends "BASE.html" %}
{% block content %}....
{% endblock %}

最终成品版本可以到如下链接下载源码:
链接: https://pan.baidu.com/s/1HggRf8S1G4vdfRkHcBzEvw?pwd=5v3r 提取码: 5v3r 复制这段内容后打开百度网盘手机App,操作更方便哦

实际的网页效果展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/418911.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux——进程等待

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、为什么要进程等待二、进程等待的方法1、wait方法2、waitpid方法 三、获取子进程status 一…

如何自学Python:一份详细的指南

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;有感而谈⛺️稳中求进&#xff0c;晒太阳 引言 Python是一种广泛使用的高级编程语言&#xff0c;以其简洁明了的语法和强大的功能而受到许多程序员的喜爱。无论是数据分析、网络开发&#…

为什么选择 go/gplang

原因 C/C代码写的是真慢&#xff1b;自个写的C/C 运行没有go快&#xff0c;还更慢。 性能记录 两数之和 俩个链表相加 // TODO 有时间放更多题目的性能对比

人工智能攻克奥数几何难题:AlphaGeometry 接近金牌选手水平

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

instance_spawn_groups

字段介绍 此表通过 Boss 状态管理副本内的刷新组一旦满足任何 FLAG_ACTIVATE_SPAWN 条件&#xff0c;将激活预设的刷新组&#xff0c;任何 FLAG_BLOCK_SPAWN 条件将不激活刷新组 instance_spawn_groups instanceMapId 副本地图 IDbossStateId Boss 状态 ID&#xff0c;取值参…

Python项目——搞怪小程序(PySide6+Pyinstaller)

1、介绍 使用python编写一个小程序&#xff0c;回答你是猪吗。 点击“是”提交&#xff0c;弹窗并退出。 点击“不是”提交&#xff0c;等待5秒&#xff0c;重新选择。 并且隐藏了关闭按钮。 2、实现 新建一个项目。 2.1、设计UI 使用Qt designer设计一个UI界面&#xff0c…

【51单片机】矩阵按键

0、前言 参考&#xff1a;普中 51 单片机开发攻略 1、硬件 2、软件 main.c #include <reg52.h> #include <intrins.h> #include "delayms.h"typedef unsigned int u16; //对数据类型进行声明定义 typedef unsigned char u8; #define GPIO_KEY P1 #d…

kafka(一)——简介

简介 Kafka 是一种分布式、支持分区、多副本的消息中间件&#xff0c;支持发布-订阅模式&#xff0c;多用于实时处理大量数据缓存的场景&#xff0c;类似于一个“缓存池”。 架构 Producer&#xff1a;消息生产者&#xff1b;Consumer&#xff1a;消息消费者&#xff1b;Brok…

SpringMVC传递数据给前台

SpringMVC有三种方式将数据提供给前台 第一种 使用Request域 第二种 使用Model&#xff08;数据默认是存放在Request域中&#xff09; 与第一种方式其实是一致的 第三种 使用Map集合&#xff08;数据默认是存放在Request域中&#xff09;

PLC物联网网关BL104实现PLC协议转MQTT、OPC UA、Modbus TCP

随着物联网技术的迅猛发展&#xff0c;人们深刻认识到在智能化生产和生活中&#xff0c;实时、可靠、安全的数据传输至关重要。在此背景下&#xff0c;高性能的物联网数据传输解决方案——协议转换网关应运而生&#xff0c;广泛应用于工业自动化和数字化工厂应用环境中。 无缝衔…

SpringBoot解决Slow HTTP慢速攻击漏洞

项目场景&#xff1a; 扫描到的漏洞截图&#xff1a; 攻击原理&#xff1a; Web应用在处理HTTP请求之前都要先接收完所有的HTTP头部&#xff0c;因为HTTP头部中包含了一些Web应用可能用到的重要的信息。攻击者利用这点&#xff0c;发起一个HTTP请求&#xff0c;一直不停的发送…

如何去开发直播电商系统小程序

明确你的直播电商系统的功能和特性&#xff0c;包括用户注册、商品展示、购物车、支付结算、直播功能、评论互动等。根据需求确定系统的基本架构和主要模块。 技术选型&#xff1a;选择适合你的直播电商系统的技术栈。考虑前端框架&#xff08;如React、Vue.js&#xff09;、后…