当前位置: 首页 > news >正文

flex布局:输入框布局demo

目标效果

首先,生成输入框:

  • 代码:
    在这里插入图片描述
  • 结果:
    在这里插入图片描述

设置基本样式

包括:去除边距、设置父盒子的宽度(如果不设置宽度,会使用整个浏览器的宽度)、添加父盒子边框等

  • 代码:
*{margin: 0;padding: 0;
}#main{width: 250px;border: 1px solid #dcdcdc;
}
  • 结果:
    在这里插入图片描述

设置2个label标签的样式

  • code:
#main label{flex:1;background-color: #f5f5f5;font-family: "楷体";text-align: center;   /* 文本居中*/
}

flex:1: 即按照1:1的比例对剩余的空间进行放大或者缩小

  • 结果:
    在这里插入图片描述

调整第二个label标签的样式

由于前面设置label标签为flex布局,因此对第二个label标签进一步设置也只能用flex布局(注意选中的是第三个元素)
在这里插入图片描述

去除文本框的边框

点击文本框前:
在这里插入图片描述
点击文本框后,文本框内容框会有加粗的外框:
在这里插入图片描述
如果不想要,可以添加代码去掉:
在这里插入图片描述

相关文章:

flex布局:输入框布局demo

目标效果 首先,生成输入框: 代码: 结果: 设置基本样式 包括:去除边距、设置父盒子的宽度(如果不设置宽度,会使用整个浏览器的宽度)、添加父盒子边框等 代码: *{margin: 0;pad…...

PHP请求的好处,PHP如何请求淘宝开放接口

PHP的好处有很多,最主要的特性就是PHP的安全性和兼容性明显。 1、良好的安全性 PHP是开源软件,所有PHP的源代码每个人都可以看得到,同时它与Apache编绎在一起的方式也可以让它具有灵活的安全设定, PHP具有了公认的安全性能。开源…...

精选出来的几道Java语法基础面试题

1.成员变量与局部变量的区别有那些? 从语法形式上,看成员变量是属于类的,而局部变量是在方法中定义的变量或是方法的参数;成员变量可以被public,private,static等修饰符所修饰,而局部变量不能被访问控制修饰符及static所修饰;成员变量和局部…...

uniapp或者小程序图片选择中的sizeType属性到底是什么

sizeType属性到底是什么 https://developers.weixin.qq.com/community/develop/doc/0006c261a300089771f9a233a56c00 https://ask.dcloud.net.cn/question/146679 第一个链接来自微信小程序社区,有开发者提了个问题:sizeType: ["original", &q…...

判断一个字符串是否是回文

目录 判断一个字符串是否是回文 程序设计 程序分析 判断一个字符串是否是回文 【问题描述】编写一个程序,判断一个字符串是否为"回文"(顺读和倒读都一样的字符串称为"回文")。 【输入形式】长度小于100的任意字符串 【输出形式】如果输入字符串是回…...

国产软件爆发!中国版Navicat,SQL Studio成数据库管理工具热门

如果关注2023年的A股市场,会发现各行各业都掀起了“国产化替代”运动的热潮。不仅仅是芯片,新能源、医疗器械甚至软件等领域,也都加快了国产化进程。 长期以来,中国的软件业比较依赖国际巨头。比如操作系统以微软为主&#xff0c…...

算法学习day51

算法学习day511.力扣309.最佳买卖股票时机含冷冻期1.1 题目描述1.2分析1.3 代码2.力扣714.买卖股票的最佳时机含手续费2.1 题目描述2.2 分析2.3 代码3.参考资料1.力扣309.最佳买卖股票时机含冷冻期 1.1 题目描述 题目描述 给定一个整数数组,其中第i个元素代表了第…...

10 JS01——初识JS

目标: 1、初识JavaScript 2、JavaScript注释 3、JavaScript输入输出语句 一、初识JavaScript 1、JavaScript是什么 JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言(Script是脚本的意思) 脚本语言:不需要编译,运行过程…...

【软考备考-综合知识】安全性、可靠性与系统性能评测基础知识

计算机的安全性 安全等级 计算机系统中的三类安全性是指技术安全性、管理安全性和政策法律安全性。 信息安全五要素 机密性:全包信息不暴露给未授权的实体或进程。 完整性:只有得到允许的人才能够修改数据,并能够判别出数据是否已被篡改。…...

匆忙之间难免疏忽,写代码更加如此

一个方法包含了多个知识点的合计,合计起来用。实战开发特点1; 基础知识点不牢固,您必定就会感觉寸步难行啊 public class AddJiChuShu{int a 1;int b 2;int c 0;int d 0;string str "";string str2 "张三";//mothe…...

低代码(七)低代码平台后端技术选型2.0

JWT 登录token Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景。JWT的声明一般被用来在身份提供者和服…...

UDS介绍

首先要有网络网络七层的概念: 学习链接: 七层网络模型-CSDN博客 UDS网络层/TP层(ISO 15765-2)的解读 - 知乎 (zhihu.com) 概念: UDS(Unified Diagnostic Services,统一的诊断服务。 标准名是《…...

ASP.NET Core MVC 从入门到精通之初窥门径

随着技术的发展,ASP.NET Core MVC也推出了好长时间,经过不断的版本更新迭代,已经越来越完善,本系列文章主要讲解ASP.NET Core MVC开发B/S系统过程中所涉及到的相关内容,适用于初学者,在校毕业生&#xff0c…...

英码科技智慧环卫:构建宜居城市新篇章

随着城市化进程的加快,城市环境卫生问题日益凸显。如何提高城市环境卫生管理水平,提升城市品质,成为了各级政府和社会各界关注的焦点。智慧环卫作为一种结合现代信息技术的环境卫生管理方式,正在逐渐成为解决城市环境卫生问题的有…...

在Spring Boot微服务使用HashOperations操作Redis Hash哈希散列

记录:403 场景:在Spring Boot微服务使用RedisTemplate的HashOperations操作Redis Hash哈希散列。 版本:JDK 1.8,Spring Boot 2.6.3,redis-6.2.5 1.微服务中Redis配置信息 1.1在application.yml中Redis配置信息 spring:redis:host: 192.1…...

innobackupex备份mysql产生returned OS error 124

解决使用innobackupex备份mysql产生returned OS error 124 xtrabackup 报错Too many open files 故障处理 一、背景 客户反馈数据库备份失败。 二、环境描述 [rootmes-node1 ~]# mysql -V mysql Ver 14.14 Distrib 5.7.24, for Linux (x86_64) using EditLine wrapper [root…...

明明有index.jsp文件访问的时候却显示404

重建一下项目...

人工智能前沿——「全域全知全能」人类新宇宙ChatGPT

🚀🚀🚀OpenAI聊天机器人ChatGPT——「全域全知全能」人类全宇宙大爆炸!!🔥🔥🔥 一、什么是ChatGPT?🍀🍀 ChatGPT是生成型预训练变换模型(Chat G…...

eslint-plugin-import - import/order

eslint-plugin-import是什么? 该插件目的在于支持ES6以上的导入/导出语法,并防止文件路径和导入名称拼写错误的问题。 import/order是什么? 按照约定的规则对引入的模块进行排序。 import/order常用规则介绍 groups 约定引入模块顺序的…...

selenium知识点大全

selenium知识点大全 在使用selenium之前必须先配置浏览器对应版本的webdriver。 1. 初始化浏览器对象 from selenium.webdriver import Chrome# 创建浏览器对象,并且打开一个空的页面 browser Chrome()# 关闭浏览器 browser.close()2. 访问指定网页 from selen…...

CMake系统学习笔记

CMake系统学习笔记 基础操作 最基本的案例 // code #include <iostream>int main() {std::cout << "hello world " << std::endl;return 0; }// CMakeLists.txt cmake_minimum_required(VERSION 3.0)# 定义当前工程名称 project(demo)add_execu…...

基于微信小程序的作业管理系统源码数据库文档

作业管理系统 摘 要 随着社会的发展&#xff0c;社会的方方面面都在利用信息化时代的优势。互联网的优势和普及使得各种系统的开发成为必需。 本文以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&#xff0c;它主要是采用java语言技术和微信小程序来完成对系统的…...

开疆智能Ethernet/IP转Modbus网关连接斯巴拓压力传感器配置案例

本案例是将ModbusRTU协议的压力传感器数据上传到欧姆龙PLC&#xff0c;由于PLC采用的是Ethernet/IP通讯协议&#xff0c;两者无法直接进行数据采集。故使用开疆智能研发的Ethernet转Modbus网关进行数据转换。 配置过程 首先我们开始配置Ethernet/IP主站&#xff08;如罗克韦尔…...

本地主机部署开源企业云盘Seafile并实现外部访问

Seafile是一个开源、专业、可靠的云存储平台&#xff1b;解决文件集中存储、共享和跨平台访问等问题。这款软件功能强大&#xff0c;界面简洁、操作方便。 本文将详细的介绍如何利用本地主机部署 Seafile&#xff0c;并结合nat123&#xff0c;实现外网访问本地部署的 Seafile …...

C++ vector容器存储对象和存储指针的区别(vector对象、vector指针)(存储指针时推荐使用智能指针)

文章目录 **1. 内存管理**- **存储对象**&#xff1a;- **存储指针**&#xff1a; **2. 生命周期控制**- **存储对象**&#xff1a;- **存储指针**&#xff1a; **3. 性能差异**- **存储对象**&#xff1a;- **存储指针**&#xff1a; **4. 使用场景**- **选择存储对象的情况**…...

华为OD机考 - 水仙花数 Ⅰ(2025B卷 100分)

import java.util.*; public static Integer get(int count,int c){if(count<3||count>7){return -1;}//存储每位数的最高位……最低位int[] arr new int[count];List<Integer> res new ArrayList<>();for(int i(int) Math.pow(10,count-1);i<(int) Math…...

Ntfs!ReadIndexBuffer函数分析之nt!CcGetVirtualAddress函数之nt!CcGetVacbMiss

第一部分&#xff1a; NtfsMapStream( IrpContext, Scb, LlBytesFromIndexBlocks( IndexBlock, Scb->ScbType.Index.IndexBlockByteShift ), Scb->ScbType.Index.BytesPerIndexBuffer, &am…...

C++性能优化指南

思维导图&#xff08;转载&#xff09; https://www.processon.com/view/5e5b3fc5e4b03627650b1f42 第 1 章 优化概述 1.1 优化是软件开发的一部分 优化更像是一门实验科学。 1.2 优化是高效的 1.3 优化是没有问题的 **90/10 规则&#xff1a;**程序中只有 10% 的代码…...

国产高云FPGA实现视频采集转UDP以太网输出,FPGA网络摄像头方案,提供2套Gowin工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我已有的所有工程源码总目录----方便你快速找到自己喜欢的项目国产高云FPGA基础教程国产高云FPGA相关方案推荐我这里已有的以太网方案 3、设计思路框架工程设计原理框图输入Sensor之-->OV7725摄像头输入Sensor之-->OV5640摄…...

基于 React Native for HarmonyOS5 的跨平台组件库开发指南,以及组件示例

基于 React Native for HarmonyOS5 的跨平台组件库开发&#xff0c;需融合分层架构设计、鸿蒙原生能力桥接及性能优化技术&#xff0c;核心指南如下&#xff1a; ‌一、分层架构设计‌ 采用 ‌模块化分层结构‌&#xff0c;隔离平台差异逻辑&#xff1a; ├── common_har …...