【无标题】

已于 2022-03-31 19:42:56 修改
阅读量1.1k 收藏
点赞数
文章标签： 嵌入式 html
于 2022-03-26 15:56:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/redciel/article/details/123755177
版权

文章目录

第五周周记

一·重新规划页面功能布局

1.登录界面

在这里插入图片描述

2.登陆过后应直接跳转到数据库界面

数据库可以分为备选人数据库和犯罪嫌疑人数据库
备选人数据库里面是所有输入的备选人信息，信息较为全面。
犯罪嫌疑人数据库包含的是截取到的犯罪嫌疑人的照片/视频，信息模糊：视频/照片发布时间，视频长短，以及其他重要细节描述。

备选人数据库

在这里插入图片描述
点击页码过后可以显示所有页码数，并且可以随机选择一个页码进入该界面。每一个照片下面显示备选人的基本信息。每一个备选人信息都可以被删除，也可以直接被编辑。
双击照片进入新的界面，查看完整的备选人信息，并且可以编辑保存信息。保存过后回到主界面，信息应该发生对应的改变。
在这里插入图片描述

犯罪嫌疑人数据库

犯罪嫌疑人数据库与备选人数据库相似，将基本信息板块更改为犯罪嫌疑人图片/视频描述。

3.数据收集模块

数据收集模块分为备选人模块以及犯罪嫌疑人模块，收集不同的数据放入对应的数据库。

4.嫌疑人智能对比模块

分为犯罪嫌疑人模块和备选人模块
在这里插入图片描述

二·学习angular

1.dom节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2.父子组件以及组件之间的通信

在这里插入图片描述

子组件获取父组件

先定义
在这里插入图片描述
再使用input接收
在这里插入图片描述

父组件获取子组件

使用output
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三.登陆界面样式设计

1.整体界面颜色基调选择

在这里插入图片描述

2.页面布局实现

问题1

taiwindcss无法调用，界面无法显示样式
在这里插入图片描述
解决方法：创建的工程有问题，导致tailwindcss创建失败，重新建立工程，成功。

问题2

设置的背景h-full，但是仅仅只能在页面显示一固定宽度，且无法调整。
在这里插入图片描述
在这里插入图片描述
解决方法：在这里插入图片描述
将原来设置的 <div class="flex items-center justify-center h-full">
更改为：<div class="flex items-center justify-center min-h-screen">

问题3

想要添加背景图片但是在extend中无法输入代码，删除代码过后文件无法继续运行，只能重新启动。
在这里插入图片描述
在这里插入图片描述
解决方法：直接在html中编写背景样式，<body class="bg-center "style="background-image: url(https://img0.baidu.com/it/u=4097731050,467745331&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800)">

最终效果

在这里插入图片描述

四.下周任务

1.继续学习angular
2.开始编写数据库板块，尽量下周之内完成。

仟仟千千芊芊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
tailwind css_如何使用Tailwind CSS构建样式化的登陆页面
08-18 1704
tailwind css 介绍 (Introduction) Developers use Cascading Style Sheets (CSS) to style websites. But often, when building large websites or apps, it becomes tedious to write these rules from scratch. Thi...
vue+element+axios tebel表格的增删改查
zy158982045727的博客
05-25 529
<template> <div style="padding: 20px"> <div> <main class="h-full pb-16 overflow-y-auto"> <div class="container grid px-6 mx-auto"> <div style="position: relative"> <a ...
tailwind css
atwillll的博客
11-05 4840
优势 不用命名， 不会使css文件变大 随意更改 与内联样式相比 是从预定义的设计系统中选择样式 响应式设计 可使用hover，focus等 hover:鼠标悬停 focus:焦点 active: group-hover:悬停在父元素上时对子元素设置样式。父元素添加group，子元素添加group-hover group-focus:与group-hover一样 focus-within:尽在一个字元素获得焦点时才应用功能类 focus-visible:当一个元素具有焦点且仅在用户使用键盘时才应用功能类 m
客观评价 增长趋势比 vite 还猛的 TailwindCSS
粉丝们务必加入微信粉丝群
06-15 717
前端社群常见的宗教战争文： TailwindCSS根本邪魔歪道， Class根本不是这样用的， 看了真他妈一肚子火 —— 硬派本格 CSS/SCSS支持者会有这样的言论，也许是你日常的工作流程中，不适合用这样的框架，又或许是你没有客观的理解过 TailwindCSS 的优点所以体会不到它的魅力。先说结论：如果你是一个团队做 SAAS 产品，需要在统一的产品风格主题上面展开，并且使用 React 之类可以模块化x组件的前端框架，那麽 TailwindCSS 会是很值得导入的样式解决方案。我发现对我来说，打断心
解决 flex align-items：center 无法居中（微信小程序）
weixin_42371145的博客
07-16 1万+
转自：https://www.cnblogs.com/zzd0916/p/7218451.html 进击的小牛牛 因为最近再做小程序，需要用到flex布局，因为写惯了web项目，初次学习确实感弹性布局的强大（关键是不用再管可恶的ie了）。 但是也遇到了align-items：center无法居中的问题，想了很久终于找到了解决办法。 解决方法： 1.确定好自己的主轴方向是不是row，如果是co...
Qt-无标题窗口
学而思
05-21 7379
        今天学习了下无标题窗口，于是来记录下我的学习过程首先建立一个Qt Widgets Application继承QWidget类创建完后直接运行就得到了如下效果那么，既然是无标题窗口就要去掉窗口栏啊，于是加上setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);去掉标题栏，但是这样整个窗口就不能移动...
C#中实现无标题栏窗体拖动的代码
热门推荐
百锦再的博客
01-18 1万+
事件来实现拖动功能。当鼠标按下时，我们标记鼠标正在拖动，并保存当前坐标。在鼠标移动时，如果鼠标正在拖动，我们更新窗体的位置，使其跟随鼠标移动。当鼠标释放时，我们取消拖动标记。请注意，在窗体上添加了对应事件处理程序的窗体控件属性应该设置为对应的事件处理程序方法。在窗体设计视图，选择属性窗格，在事件选项卡中为。在C#中实现无标题栏窗体拖动的代码可以通过处理鼠标事件来实现。这样，当你在运行窗体时，你就可以通过鼠标拖动窗体来改变其位置。事件分别选择对应的处理程序方法。在这个示例代码中，我们通过处理。
C# 移动无标题栏无边框窗体的3种方法
SabreWulf
03-13 2257
目录 第一种：手工移动 第二种：调用系统API 1.引入下面代码 前提需要引入命名空间using System.Runtime.InteropServices 2.增加鼠标按下事件发送消息，让系统误以为按下是标题栏 第三种，重写 WndProc 第一种：手工移动 直接通过修改窗体位置从而达到移动窗体的效果 //定义一个位置信息Point用于存储鼠标位置 private Point mPoint; /// <summary>
Qt无标题窗口
05-21
在本文中，我们将深入探讨如何使用Qt框架创建一个无标题窗口，这在界面设计和自定义标题栏美化中非常有用。我们将关注`framelesswidget.cpp`、`main.cpp`、`framelesswidget.h`等核心文件，理解它们在实现无标题窗口...
VC去掉'无标题'字样的方法.zip
11-21
在使用Visual C++进行编程时，我们经常会在创建新的窗口或者对话框时默认看到标题栏显示为“无标题”。这可能会对用户界面的美观性和专业性造成一定的影响。本资料包提供了一种方法来帮助开发者去掉这个“无标题”...
visual c++取掉对话框窗口的 -无标题 字样的方法
08-04
在Visual C++编程环境中，创建窗口应用程序时，默认情况下，窗口标题栏可能会显示“-无标题”字样，这通常是由于没有正确设置窗口类或没有自定义窗口标题所导致的。要解决这个问题，我们需要深入理解Windows API中的...
c#实现无标题栏窗口的拖动
09-05
本篇文章将详细讲解如何在C#中实现这种无标题栏窗口的拖动以及其他基本操作。 首先，为了实现无标题栏窗口的拖动，我们需要处理窗体的鼠标事件。窗体的`FormBorderStyle`属性应设置为`None`，这会去除窗体的边框和...
Android 全屏无标题栏的三种实现方法
09-02
在Android应用开发中，有时我们需要实现全屏无标题栏的效果，以提供更加沉浸式的用户体验。以下将详细介绍三种在Android中实现全屏无标题栏的方法。 ### 方法一：通过Java代码 在Activity的`onCreate()`方法中，在...
【嵌入式开发之标准I/O】流的刷新、定位以及格式化输出、输入
boy_ding_jian的博客
07-21 1102
流的刷新、定位以及格式化输入和输出。
断言和注释规范和编译技巧
2403_82385265的博客
07-20 498
当这个头文件被同一个文件第二次“#include”包含的时候，由于有了第一次包含中的“#define __LED_H”定义，这时再判断“#ifndef__LED_H”，判断的结果就是假了，从“#ifndef”至“#endif”之间的内容都无效，从而防止了同一个头文件被包含多次，编译时就不会出现“redefine。“bsp_led.h”文件中使用了“#include“stm32f10x.h””语句，按习惯，可能我们写主程序的时候会在 main 文件写“#include“bsp_led.h”
江科大/江协科技 STM32学习笔记P6
sususu_2001的博客
07-19 315
AHB(Advanced High-performance Bus), 高速总线，用来接高速外设的。APB (Advanced Peripheral Bus) 低速总线，用来接低速外设的。APB2一般是和AHB同频率，都是72MHz，APB1一般是36MHz。APB2连接的一般是外设中稍微重要的部分，比如GPIO端口，还有一些外设的一号，比如USART1、SPI1、TIM1、TIM8，还接ADC、EXTI、AFIO。其他的2、3、4…外设和DAC、PWR、BKP等次要点的外设都放到APB1。
STM32学习（4）--OLED调试工具
最新发布
LHYYUYG的博客
07-23 462
OLED（Organic Light Emitting Diode）：有机发光二极管OLED显示屏：性能优异的新型显示屏，具有功耗低、相应速度快、宽视角、轻薄柔韧等特点0.96寸OLED模块：小巧玲珑、占用接口少、简单易用，是电子设计中非常常见的显示屏模块供电：3~5.5V，通信协议：I2C/SPI，分辨率：128*64。
51单片机14（独立按键实验）
Yz202267的博客
07-21 984
7、但实际上是不是这种波形呢，不是的，因为我们的这种机械开关，它里面会有一个抖动的情况，那我们来看一下实际的这种波形，当我们的按键没有按下，它默认是高电平，假设我们有上拉电阻，当我们按键按下的时候，这里呢会存在一个抖动，抖动过程之后，才会进入一个稳定的一个闭合状态，也就是说，当我们的按键按下的时候，刚开始它会有一个抖动的过程，抖动了一段时间之后，才变成低电平，变成低电平。另一端呢，是连接到GND，也就是我们刚才介绍的，当我们的按键按下的时候，这个GND是不是低电平，低电平这里就是连接在一起了。
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值