个人前端编程技巧总结

目录

  • 1. 让界面位于当前屏幕的中心(屏幕中心)
    • css代码
    • 示例
  • 2. 界面透明但是内部元素不透明(毛玻璃)
    • css代码
    • 示例
  • 3. 将当前界面的参数传递到跳转的目标页面(携参跳转)
    • js代码

1. 让界面位于当前屏幕的中心(屏幕中心)

css代码

html,body{
	/* 设定高度使得 html 和 body 填充整个屏幕 */
	height: 100%;
}

body {
	background: white url("../img/login_background.png") no-repeat fixed center;
	background-size: cover;
	
	/* 使得 body 内元素居中显示 */
	display: flex;
	justify-content: center;
	align-items: center;
}

示例

在这里插入图片描述


2. 界面透明但是内部元素不透明(毛玻璃)

css代码

.login-main {
	/* 设置样式 */
	border: solid 2px steelblue;
	border-radius: 20px;
	width: 600px;
	height: 400px;
	
	/* 界面透明但是内部元素不透明 */
	background: inherit;
	overflow: hidden;
}

示例

在这里插入图片描述


3. 将当前界面的参数传递到跳转的目标页面(携参跳转)

js代码

跳转前在目标html后面拼接?key1=value1&key2=value2

var id=1, name="理论最高的吻";

window.location.href = "xxxx.html?id=" + id + "&name=" + name;

目标页面接收参数(字符串多次切割)

var id = window.location.href.split("?")[1].split("&")[0].split("=")[1];

var name = window.location.href.split("?")[1].split("&")[1].split("=")[1];

ps:中文传递时可能会乱码之类,可以使用console.log()输出看看,字符串切割时,得到的参数不对也可以输出看看。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Azure 机器学习 - 使用 Jupyter Notebook 探索 Azure 机器学习

目录 一、前言二、创建跳转盒 (VM)为 VM 启用 Azure Bastion 三、创建工作区四、连接到 VM 桌面五、连接到机器学习工作室允许工作室访问存储 六、停止计算实例七、清理资源 本文介绍如何创建并连接到安全的 Azure 机器学习工作区。 本文中的步骤使用 Azure 机器学习托管虚拟网…

Linux进程状态

目录 书面上的进程状态 Linux系统中的进程状态 R状态 S状态 D状态 T状态 下面是kill命令的一些选项 t状态 X状态 Z状态 进程状态查看 书面上的进程状态 在课本上操作系统的进程状态分为三种 运行态,就绪态,阻塞态 运行态:占有CP…

Clickhouse学习笔记(3)—— Clickhouse表引擎

前言: 有关Clickhouse的前置知识详见: 1.ClickHouse的安装启动_clickhouse后台启动_THE WHY的博客-CSDN博客 2.ClickHouse目录结构_clickhouse 目录结构-CSDN博客 Cickhouse创建表时必须指定表引擎 表引擎(即表的类型)决定了&…

翻页产品宣传册怎么制作,这有模板一键套用制作!

对于一个新手来说,想要在短时间内制作出一本精美的翻页产品宣传册,在一定程度上难度是比较大的。一本出色的翻页产品宣传册,既可以打造直观、奋发向上的宣传,又能更进一步的提高名气。 那么,如何制作出精美的翻页产品宣…

【链表】数据查找和合并

获取链表中间位置的数据 #include <stdio.h> #include <stdlib.h>/* 定义链表的结构体 */ struct Node {int data;struct Node *next; };/* 获取链表中处于中间位置的元素并打印出来*/ void printMiddle(struct Node *head) {struct Node *slow_ptr head;struct …

合并两个链表 --- 递归回溯算法练习二

目录 1. 分析题意 2. 分析算法原理 2.1. 递归思路&#xff1a; 1. 挖掘子问题&#xff1a; 3. 编写代码 3.1. step one 3.2. step two 3.3. step three 3.1. 递归写法 4. 补充 --- 迭代写法 5. 总结 1. 分析题意 力扣上原题链接如下&#xff1a; 21. 合并两个有序链表…

密码学 - RSA签名算法

实验九 RSA签名算法- 一、实验目的 通过实验掌握GMP开源软件的用法&#xff0c;理解RSA数字签名算法&#xff0c;学会RSA数字签名算法程序设计&#xff0c;提高一般数字签名算法的设计能力。 二、实验要求 (1)基于GMP开源软件&#xff0c;实现RSA签名算法。 (2)要求有对应…

【LeetCode笔试题】88.合并两个有序数组

问题描述 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&#xff1a;最终&#xff0c;合…

关灯游戏及扩展

7.8 图形界面应用案例——关灯游戏 题目&#xff1a; [案例]游戏初步——关灯游戏。 关灯游戏是很有意思的益智游戏&#xff0c;玩家通过单击关掉(或打开)一盏灯。如果关(掉&#xff08;或打开)一个电灯&#xff0c;其周围(上下左右)的电灯也会触及开关&#xff0c;成…

spring boot configuration annotation processor notconfigured解决方法

spring boot configuration annotation processor notconfigured解决方法 一、问题描述二、解决方法 一、问题描述 我在使用ConfigurationProperties注解的时候idea出现提示信息spring boot configuration annotation processor notconfigured&#xff0c;但是却不影响程序的运…

22款奔驰S400L升级原厂360全景影像 打破死角

本次星骏汇小许介绍的是22款奔驰S400L升级原厂360全景影像&#xff0c;上帝视角看清车辆周围环境&#xff0c;更轻松驾驶 升级360全景影像系统共有前后左右4个摄像头&#xff0c;分别在车头&#xff0c;车尾&#xff0c;以及两边反光镜下各一个&#xff0c;分别用来采集车头&a…

Springboot+vue的企业资产管理系统(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的企业资产管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的企业资产管理系统&#xff0c;采用M&#xff08;model&a…

如何更好的使用Copilot

Copilot从诞生到现在过去了挺长时间了&#xff0c;大家对Copilot的评价算是褒贬不一吧。有些人觉得Copilot高效且神奇&#xff0c;可以对自己的工作大大提效&#xff1b;有些觉得也就那样&#xff0c;为什么要花那么多钱做这个事情&#xff0c;钱它不香吗&#xff1f; 从最开始…

地推网推必备app拉新平台 又升级啦 一手官签渠道

今天地推网推必备app拉新平台 ”聚量推客“ 又升级啦 一手邀请码 000000 今天升级了什么呢&#xff1f; 针对地推和网推作业人员升级了团队管理和做单excel导出功能&#xff0c;更好得查看自己和团队的作业情况&#xff0c;这个功能是地推和网推的一个必备功能

CodeWhisperer 史上最强大的 AI 编程助手!!

最近用了一个叫 CodeWhisperer 的插件&#xff0c;这个软件对于来说开发人员&#xff0c;插件有好多实用的功能&#xff0c;能有效减少我们的重复性工作&#xff0c;让编码更高效&#xff0c;代码质量也提升了很多。 CodeWhisperer 简介 CodeWhisperer 是亚⻢逊出品的一款基于…

uniapp中在组件中使用被遮挡或层级显示问题

uniapp中在组件中使用或croll-view标签内使用uni-popup在真机环境下会被scroll-view兄弟元素遮挡&#xff0c;在开发环境下和安卓系统中可以正常显示&#xff0c;但在ios中出现了问题 看了许多文章都没有找到问题的原因&#xff0c;最后看到这一个文章http://t.csdnimg.cn/pvQ…

Clickhouse学习笔记(4)—— Clickhouse SQL

insert insert操作和mysql一致 标准语法&#xff1a;insert into [table_name] values(…),(….)从表到表的插入&#xff1a;insert into [table_name] select a,b,c from [table_name_2] update 和 delete ClickHouse 提供了 Delete 和 Update 的能力&#xff0c;这类操作…

AI 引擎系列 5 - 以 AI 引擎模型为目标运行 AI 引擎编译器(2022.1 更新)

AI 引擎系列 5 - 以 AI 引擎模型为目标运行 AI 引擎编译器&#xff08;2022.1 更新&#xff09; 简介 在先前的 AI 引擎系列博文中&#xff0c;我们以 x86 模型为目标运行了 AI 引擎编译器&#xff0c;并运行了 X86 仿真器来验证 AI 引擎应用的功能模型。在本文中&#xff0c;…

嵌入式CTS测试

1.概述 CTS是一套开源测试套件&#xff0c;可以实现对OpenGL、ES、OpenCL、Vulkan的兼容性测试。OpenGL ES CTS的测试集&#xff0c;其测试用例涵盖了各种OpenGL ES 的功能和特性。这些功能包括着色器编译和链接、图元绘制、纹理操作、帧缓冲操作、深度测试、模板测试以及其他一…

直播间自动发言机器人的运行分享,与开发需要到的技术分析

先来看实操成果&#xff0c;↑↑需要的同学可看我名字↖↖↖↖↖&#xff0c;或评论888无偿分享 一、引言 随着人工智能技术的不断发展&#xff0c;自动发言机器人已经成为了当今社交媒体领域的重要组成部分。它们能够自动化地发布内容、回复用户评论和消息&#xff0c;大大提高…