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

news2024/11/24 11:39:30

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.coloradmin.cn/o/846753.html

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

相关文章

基于vant的密码输入框,数字键盘,及金额输入

<template><div><el-button click"showPopup">余额支付</el-button><!--以下是密码输入--><van-popup v-model"passshow"closeableclose-icon-position"top-left"position"bottom":style"{ hei…

情感书单素材库大全,好的文案试试做成视频吧

当我们沉浸在热爱的小说或故事中时&#xff0c;我们会被情感所吸引&#xff0c;感受到其中所包含的情感&#xff0c;这些情感会在我们的内心深处留下印记。情感书单素材库是一个非常棒的资源&#xff0c;可以帮助我们发现那些让我们心动的故事和情感&#xff0c;从而创作出有意…

真实分享!赴日IT培训 在日本做程序员真的不加班?

如果有人告诉你完全没有加班那是不太可能的&#xff0c;但是日本的IT行业加班确实不严重&#xff0c;大家可以看一下厚生劳动省&#xff0c;你可以理解为中国的社会保障部这样一个作用&#xff0c;但是是做事风格不太一样的社会保障部&#xff0c;给大家放张IT产业加班图&#…

正运动亮相2023半导体设备材料与核心部件展示会,助力半导体产业高速高精应用

■展会名称&#xff1a; 第11届&#xff08;2023&#xff09;半导体设备材料与核心部件展示会 ■展会日期 2023年8月9日-11日 ■展馆地点 无锡太湖国际博览中心A6馆 ■展位号 A6-A361 正运动技术&#xff0c;作为国内领先的运动控制企业&#xff0c;将于2023年8月9日参加…

炼油厂运营商遭黑客入侵,全球范围内大规模宕机

据最新报道&#xff0c;以色列最大的炼油厂运营商BAZAN Group的网站遭遇黑客入侵&#xff0c;导致该网站在全球出现大范围宕机。在上周末&#xff0c;该集团全球各地的炼油厂网站均无法访问&#xff0c;显示"请求超时"和"被公司的服务器拒绝"等字样。黑客组…

排序第二课【选择排序】直接选择排序 与 堆排序

目录 1. 排序的概念&#xff1a; 2.选择排序的基本思想 3.直接选择排序 4.堆排序 1. 排序的概念&#xff1a; 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性&#xf…

RISC-V架构的演变

随着苹果基于ARM的硅和新的RISC-V CPU的推出&#xff0c;对于CPU开发来说&#xff0c;这是一个令人兴奋的时刻&#xff0c;尽管开发人员的旅程目前对后者来说有点坎坷。 我最喜欢的理论是&#xff0c;没有发生是孤独的&#xff0c;而只是重复了以前发生过的事情&#xff0c;也…

手写springboot

前言 首先确定springboot在spring基础上主要做了哪些改动&#xff1a;内嵌tomcatspi技术动态加载 一、基本实现 1. 建一个工程目录结构如下&#xff1a; springboot: 源码实现逻辑 user : 业务系统2.springboot工程项目构建 1. pom依赖如下 <dependencies>…

vue基于java的高校就业管理系统的设计和实现f0c2k

相比于传统的高校就业管理方式&#xff0c;智能化的管理方式可以大幅提高学生的就业率&#xff0c;实现了高校就业管理的标准化、制度化、程序化的管理&#xff0c;有效地防止了高校就业的随意管理&#xff0c;提高了信息的处理速度和精确度&#xff0c;能够及时、准确地查询和…

生命科学组织使用 OpenText ETX 随时随地为医疗保健和生命科学人员提供相关信息

生命科学组织使用 OpenText ETX 随时随地为医疗保健和生命科学人员提供相关信息 引领生命科学远程工作的IT新高度 生命科学组织一直承受着改进工作流程、降低成本和比以往更快地交付产品的压力。 使用远程访问和集中式 IT 基础架构&#xff0c;企业可以在加快上市时间方面取得…

opencv基础45-图像金字塔01-高斯金字塔cv2.pyrDown()

什么是图像金字塔&#xff1f; 图像金字塔&#xff08;Image> Pyramid&#xff09;是一种用于多尺度图像处理和分析的技术&#xff0c;它通过构建一系列不同分辨率的图像&#xff0c;从而使得图像可以在不同尺度下进行处理和分析。图像金字塔在计算机视觉、图像处理和计算机…

就地程控站控制柜与斗轮机之间无线通讯

一、应用背景 马钢的前身是成立于1953年的马鞍山铁厂&#xff0c;2019年马钢集团正式成为中国宝武控股子公司。马钢产品以建筑用型线材为主&#xff0c;满足重型工业厂房、轻钢结构、高层建筑、桥梁结构、工业管道等构件的加工需要。目前马钢在岗员工4.8万人&#xff0c;具备了…

三菱PLC与变频器通讯-ModbusRTU协议

Modbus是Modicon公司为其PLC与主机之间的通讯而发明的串行通讯协议。其物理层采用RS232、485等异步串行标准。由于其开放性而被大量的PLC及RTU厂家采用。Modbus通讯方式采用主从方式的查询&#xff0d;相应机制&#xff0c;只有主站发出查询时&#xff0c;从站才能给出响应&…

【快应用】list组件属性的运用指导

【关键词】 list、瀑布流、刷新、页面布局 【问题背景】 1、 页面部分内容需要瀑布流格式展示&#xff0c;在使用lsit列表组件设置columns进行多列渲染时&#xff0c;此时在里面加入刷新动画时&#xff0c;动画只占了list组件的一列&#xff0c;并没有完全占据一行宽度&…

Node.js新手在哪儿找小项目练手?

前言 可以参考一下下面的nodejs相关的项目&#xff0c;希望对你的学习有所帮助&#xff0c;废话少说&#xff0c;让我们直接进入正题>> 1、 NodeBB Star: 13.3k 一个基于Node.js的现代化社区论坛软件&#xff0c;具有快速、可扩展、易于使用和灵活的特点。它支持多种数…

数字孪生技术:建筑环境的智能化革命

在数字化时代&#xff0c;科技的飞速发展正在深刻影响着建筑行业。数字孪生技术作为数字化转型的重要组成部分&#xff0c;正在为建筑环境带来革命性的变革。数字孪生技术通过将现实世界与虚拟模型实时同步&#xff0c;为建筑规划、施工、运营和维护等各个环节提供了更智能、高…

准备三个月,终拿快手offer!薪资28k*16

昨天有VIP小伙伴给小孟说&#xff1a;拿到了快手的offer。 聊了半个小时&#xff0c;待遇还不错。准备去了&#xff01;28k&#xff0c;16薪。 快手的k3c职级可对标阿里的P7。 前面我说过&#xff1a;能去大厂就去大厂&#xff0c;有机会就去争取&#xff0c;年纪轻轻的&a…

电脑怎么备份文件?学会这4招!

“由于我是个比较粗心的人&#xff0c;平常很容易把一些文件弄不见。因此&#xff0c;我想把电脑中一些比较重要的文件进行备份&#xff0c;有没有朋友知道电脑怎么备份文件呢&#xff1f;求解答&#xff01;” 在使用电脑时&#xff0c;可能经常会由于各种突然原因导致我们的文…

RDMA服务类型(二)

参考IB协议版本V1.4&#xff1a;https://download.csdn.net/download/zz2633105/88148107 参考知乎文章《RDMA基本服务类型》&#xff1a;https://zhuanlan.zhihu.com/p/144099636 可靠服务 何为可靠服务呢&#xff0c;引用IB协议中的原话&#xff08;IB V1.4版本9.7章节&am…

专业服务管理软件推荐:提升效率的强大工具

借助Zoho Projects的多功能专业服务管理平台&#xff0c;将服务交付提升到一个新的水平。 一、提高利润并满足每一位客户 Zoho Projects的多功能专业服务管理系统使您和您的团队能够更好地管理您的所有工作&#xff0c;以提高客户满意度。优化沟通、与同事协作并监控项目的每个…