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

news/2024/5/18 8:56:41

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.niftyadmin.cn/n/4924371.html

相关文章

react-media如何使用

介绍 react-media 是 React 中用于响应式设计的一个很好的库。它可以用于在视口宽度满足特定条件时渲染组件。 主要功能包括: 媒体查询:通过 minWidth, maxWidth 和 width 等设置媒体查询条件。 渲染组件:当媒体查询条件匹配时渲染子组件。 默认样式:可以设置默认渲染的组件。…

现代C++中的从头开始深度学习:【4/8】梯度下降

一、说明 在本系列中&#xff0c;我们将学习如何仅使用普通和现代C编写必须知道的深度学习算法&#xff0c;例如卷积、反向传播、激活函数、优化器、深度神经网络等。 在这个故事中&#xff0c;我们将通过引入梯度下降算法来介绍数据中 2D 卷积核的拟合。我们将使用卷积和上一个…

QEMU源码全解析30 —— QEMU/KVM API 使用实例

本文内容参考&#xff1a; 《QEMU/KVM》源码解析与应用 —— 李强&#xff0c;机械工业出版社 特此致谢&#xff01; 在本系列之前文章中&#xff0c;讲解了QEMU参数解析、QEMU Module&#xff08;模块&#xff09;、并且花了大力气&#xff08;十几篇文章&#xff09;重点讲…

【CHI】(一)基础概念

基于CHI issueF 本章介绍了CHI体系结构和术语。它包含以下部分&#xff1a; 体系结构概述拓扑结构术语事务分类一致性概述组件命名读数据来源 一、CHI架构 CHI架构是一个可扩展的、支持一致性的集线器接口和由多个组件使用的片上互连。根据系统要求的PPA&#xff08;perform…

十四、深度学习之卷积+池化+全连接各层

1、神经网络 人脑中有大量的脑神经元。每个脑神经元(图中黑点)都可以看做是一个小的记忆体负责不同的记忆,神经元之间通过树突(图中细线)连接起来。 假如人看到一只猫,一个神经元之前见过猫,那么就会把信息往后传,此时神经元处于激活状态;没有见过的啥也不做,…

C++执行程序计时函数详解

通常计时函数主要有两个&#xff0c;分别是getTickCount()和getTickFrequency(). getTickCount()函数&#xff0c;返回的是CPU自某个时间&#xff08;如启动电脑&#xff09;以来走过的时钟周期数&#xff1b;getTickFrequency()函数&#xff0c;返回的是CPU一秒钟所走的时钟周…

适配器模式来啦

网上的大多数的资料中适配器模式和代理模式都是紧挨着进行介绍的&#xff0c;为什么呢&#xff1f;&#xff1f;&#xff1f; 是因为适配器模式和代理模式有太多的相似之处&#xff0c;可以进行联动记忆但是也要做好区分。 在菜鸟教程中&#xff0c;适配器模式的定义是作为两…

【构造】CF1798 D

Problem - D - Codeforces 题意&#xff1a; 思路&#xff1a; 首先如果 a 全是 00&#xff0c;那么显然无解。 否则考虑从左到右构造新数列&#xff0c;维护新数列的前缀和 s。 如果 s≥0&#xff0c;则在剩余未加入的数中随便选择一个非正数添加到新数列末尾。如果 s<…