HTML+CSS 改进前端简易响应式登录界面

news/2024/11/16 9:24:11/

day5 改进上次的项目 HTML+CSS前端 动态响应用户登录界面_一只名叫Me的猫的博客-CSDN博客


 emmet自动创建html模板

在vscode中,空白html文件打入一个感叹号,可以自动创建html模板,避免手搓(悲)。

 上次就是因为手搓导致漏了utf-8编码。模板是这个样子的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

 block和inline元素区分 

块级元素在页面上以块的形式显示,自动占据父元素的整个宽度,独占一行,可以设置 width、height、margin、padding 等属性;

内联元素在页面上以行内的形式显示,只占据其内容的宽度,不独占一行,通常不能设置 width、height、margin-top、margin-bottom,但可以设置 margin-left 和 margin-right。

常见块级元素:
<div> <p> <h1~h6> <ul> <ol> <li>
常见内联元素:
<span> <a> <strong> <img> <br> <input>

上次的项目中,banner-box采用了inline-block的display方式,导致还需要修改元素样式。

css自定义属性

相当于宏定义,增加代码可读性以及维护性。 

使用变量时,用 var(变量名)  ,例如:

input属性 

input标签有很多类型,参考以下链接 <input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN​​​​​​​

通过把密码输入框的type标签改成password,可以隐藏输入的密码,效果如下: 

 

 上下滑动网页设置

为了使网页在屏幕大小变形时可以上下翻动,可以设定最小高度值

​​​​​​​


http://www.ppmy.cn/news/1022689.html

相关文章

研究论文关于火灾的烟雾探测

普拉萨梅什加德卡尔 探索所有模型以选择最佳模型。 一、介绍&#xff1a; 烟雾探测器检测烟雾并触发警报以提醒他人。通常&#xff0c;它们存在于办公室、家庭、工厂等。通常&#xff0c;烟雾探测器分为两类&#xff1a; Photoelectric Smoke Detector- 设备检测光强度&#x…

SQL常见命令语句

1.连接数据库 mysql (-h IP) -u root -p 密码2.查看数据库 show databases3.使用数据库 use db_name4.查看表 show tables [from db_name]5.查看表结构 desc tb_name6.创建、删除、选择数据库 create database db_namedrop database db_nameuse db_name7.数据类型 参考链…

巨人互动|Meta海外户Meta的业务工具转化API

Meta的业务工具转化API是一项创新技术&#xff0c;它可以帮助企业实现更高效的业务工具转化和集成。通过这个API&#xff0c;企业可以将不同的业务工具整合到一个统一的平台上&#xff0c;提高工作效率和协作能力。本文小编将介绍Meta的业务工具转化API的功能和优势。 巨人互动…

RHCE使用RHEL系统角色题报错

题目&#xff1a; 使用 RHEL 系统角色 4. 安装 RHEL 系统角色软件包&#xff0c;并创建符合以下条件的 playbook/home/curtis/ansible/selinux.yml &#xff1a; 在所有受管节点上运行 使用 selinux 角色 配置该角色&#xff0c;以强制状态使用 selinux 报错一&#xff1a; [c…

系统集成项目管理工程师好考吗?不报班能考过吗?

即使不参加培训班&#xff0c;只要自我控制能力还不错&#xff0c;也可以通过考试。中级集成考试难度不大&#xff0c;主要是要理解47个过程的输入输出和工具的使用&#xff0c;很多题目都是按照这个逻辑出的。建议可以在网上或者刷题APP上找一些资料和真题来练习&#xff0c;因…

5V升压到12V2A芯片方案

5V升压到12V2A芯片方案&#xff0c;采用了一款2.7V-18V输入&#xff0c;4.5V-18V输出的峰值10A同步升压芯片&#xff0c;内置了MOS&#xff0c;封装为QFN13。 在电子设备中&#xff0c;经常会遇到需要将低电压提升到较高电压的情况。例如&#xff0c;对于一些需要12V电压供电的…

有人真的会去分析代码吗

很早之前使用 webpack 的时候&#xff0c;也有类似的插件&#xff0c;分析打包出来之后的代码&#xff0c;分别是哪些模块比较庞大&#xff0c;针对打包的内容进行优化。说实话&#xff0c;知道归知道&#xff0c;但是没有哪个项目使用分析过。最近刚好看见了两个插件&#xff…

【Spring专题】Spring之Bean的生命周期源码解析——阶段一(扫描生成BeanDefinition)

目录 前言阅读指引阅读建议 课程内容一、生成BeanDefinition1.1 简单回顾1.2 概念回顾1.3 核心方法讲解 二、方法讲解2.1 ClassPathBeanDefinitionScanner#scan2.2 ClassPathBeanDefinitionScanner#doScan2.3 ClassPathScanningCandidateComponentProvider#findCandidateCompon…