个人前端编程技巧总结

news2024/11/24 19:05:01

目录

  • 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()输出看看,字符串切割时,得到的参数不对也可以输出看看。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

cmake 之add_definitions使用误区

需求 需要实现,在cmake中定义宏定义,可以:1) 在code中可以使用;2) 在cmake中可以识别是否已定义 问题 宏定义,cmake有add_definitions函数,直观的实现方法如下。 cmake_minimum…

java--实体javaBean

1.什么是实体类 1.就是一种特殊形式的类 2.这个类中的成员变量都要私有,并且要对外提供相应的getXXX,setXXX方法 3.类中必须要有一个公共的无参的构造器 2.实体类有啥应用场景 实体类只负责数据存取,而对数据的处理交给其他类来完成&…

【数据结构】线性表的链式存储结构

🦄个人主页:修修修也 🎏所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 顺序存储结构的不足的解决办法 从上一节我们对顺序表的讨论中可见,线性表的顺序存储结构的特点是: 逻辑关系上相邻的两个元素在物理位置(内存)上也相邻,因此可以随机存取表中…

妙手ERP功能更新:Shopee认领配置中的主货号支持按后缀自动递增、Ozon采集箱支持批量编辑【颜色样本图】、TikTok Shop......

为了给卖家朋友带来更好的使用体验,更高效地运营跨境店铺,妙手ERP在上周优化了以下多项功能。 01、产品模块优化 全平台 - 系统新增密码错误被锁提示 Shopee - 认领配置中的主货号(父SKU)支持按后缀自动递增 - 发布配置中的【定…

通过SOLIDWORKS Composer让自定义视图更智能

SOLIDWORKS Composer是一款专业的技术文档创建工具,通过SOLIDWORKS Composer可以快速创建所需的技术文档,无论是用于装配说明,维护手册还是销售展示。 当使用SOLIDWORKS Composer创建交互式内容的时候,自定义视图至关重要。自定义…

DAY47 198.打家劫舍 + 213.打家劫舍II + 337.打家劫舍 III

198.打家劫舍 题目要求:你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警…

前端-选中DOM定位源代码

用到的工具:react-dev-inspector 使用流程 根据react-dev-inspector文档进行配置 安装 yarn add --dev react-dev-inspector配置:在根目录下配置Inspector import { createRoot } from react-dom/client import { Inspector } from react-dev-inspe…

Spring中的循环依赖解决方案

前言:测试环境突发BeanCurrentlyInCreationException,导致后端服务启动失败,一看就是Spring的Bean管理中循环依赖。项目中存在Bean的循环依赖,是代码质量低下的表现。多数人寄希望于框架层来给擦屁股,造成了整个代码的…

[工业自动化-6]:西门子S7-15xxx编程 - PLC系统硬件组成与架构

目录 一、PLC系统组成 1.1 PLC 单机系统组成 1.2 PLC 分布式系统 二、PLC各个组件 2.1 PLC上位机 2.2 PLC主站:PLC CPU控制中心 (1)主要功能 (2)主站组成 2.3 PLC分布式从站: IO模块的拉远 (1&am…

Pytorch R-CNN目标检测-汽车car

概述 目标检测(Object Detection)就是一种基于目标几何和统计特征的图像分割,它将目标的分割和识别合二为一,通俗点说就是给定一张图片要精确的定位到物体所在位置,并完成对物体类别的识别。其准确性和实时性是整个系统的一项重要能力。 R-CNN的全称是Region-CNN(区域卷积神经…

Python之文件与文件夹操作

目录 1、Pathlib1.1、glob(),rglob()1.2、目录拼接1.3、重命名1.4、复制文件 2、os3、os.path4、示例 1、Pathlib # 通过cwd()获得当前工作目录 # 通过home()获得主目录from pathlib import Path currentPath Path.cwd() print(f"Current directory: {currentPath}"…

Android开发中自定义饼图以及百分比展示

本篇文章主要讲解有关怎么用自定义View绘制圆形饼图,饼图内容包含:饼图内部添加百分比、绘制短延长线以及长延长线、延长线上添加文字说明。下面进行主要内容分析说明,文章最后附上全部代码以及具体使用说明: 效果图:…

3d max软件中的缓存垃圾该如何清理?

使用3d max建模到渲染操作,来回对效果图调整的次数过多时,就会出现一下看不到的垃圾缓存,影响保存的速度,影响效率! 对于这类的3d垃圾清理的有什么高效方法呢? 3dmax垃圾清理的常规操作如下: 1、…

pandas的一些函数

1、pd.read_csv () 读取csv文件 import pandas as pddf pd.read_csv(Popular_Baby_Names.csv)df pd.read_csv(Popular_Baby_Names.csv, sep;, header0, index_col0, skiprows5, na_valuesN/A)##读取CSV文件data.csv,使用;作为分隔符,第一行作为标题&…

idea 一直卡在maven正在解析maven依赖

修改maven Importing的jvm参数 -Xms1024m -Xmx2048m

OpenAI开发者大会之后,当何去何从?

简介 过往总结 ​产品升级 GPT-4 Turbo Agent化 此间的未来 定制GPT GPT商店 Assistants API 总结与思考 简介 此次发布会简单总结如下。 1. 发布GPT-4 Turbo: 更长。支持128K上下文输入,标准GPT-4是8K版本,之前升级出了32K版本 更…

kubernetes (k8s)的使用

一、kubernetes 简介 谷歌2014年开源的管理工具项目,简化微服务的开发和部署。 提供功能:自愈和自动伸缩、调度和发布、调用链监控、配置管理、Metrics监控、日志监控、弹性和容错、API管理、服务安全等。官网:https://kubernetes.io/zh-cn…

5-爬虫-打码平台、打码平台自动登录打码平台、selenium爬取京东商品信息、scrapy介绍安装、scrapy目录结构

1 打码平台 1.1 案例 2 打码平台自动登录打码平台 3 selenium爬取京东商品信息 4 scrapy介绍安装 5 scrapy目录结构 1 打码平台 # 1 登录某些网站,会有验证码---》想自动破解-数字字母:python模块:ddddocr-计算题,成语题&#xf…

物联网AI MicroPython学习之语法 ucollections集合和容器类型

学物联网,来万物简单IoT物联网!! ucollections 介绍 ucollections 模块用于创建一个新的容器类型,用于保存各种对象。 接口说明 namedtuple - 创建一个新namedtuple容器类型 函数原型: 创建一个具有特定名称和一组…

rviz添加qt插件

一、增加rviz plugin插件 资料:http://admin.guyuehome.com/42336 https://blog.51cto.com/u_13625033/6126970 这部分代码只是将上面两个链接中的代码整合在了一起,整合在一起后可以更好的理解其中的关系 1、创建软件包 catkin_create_pkg rviz_tel…