HTML＋CSS＋JS 登录页面的代码结构入门_登录页面js代码

最新推荐文章于 2024-06-16 23:04:02 发布

2401_84433829

最新推荐文章于 2024-06-16 23:04:02 发布

阅读量1k

点赞数 14

分类专栏：程序员文章标签： html css javascript

本文链接：https://blog.csdn.net/2401_84433829/article/details/138280945

版权

程序员专栏收录该内容

181 篇文章 0 订阅

订阅专栏


### 1.HTML


什么是HTML?  
 HTML（HyperText Markup Language）是一种用于创建和组织网页内容的标记语言。它使用标签来定义和描述网页的结构，并通过标签之间的嵌套和属性来指定元素的属性和行为。HTML代码可以在网页浏览器中渲染为可视化的网页。


该代码部分用到以下标签：


1. `<!DOCTYPE html>`：声明文档类型为 HTML。
2. `<html lang="en">`：根元素，指定页面的主要语言为英文。
3. `<head>`：包含关于文档的元信息和引用外部脚本和样式表的标签。
4. `<meta>`：用于设置文档的元信息，如字符编码、兼容模式和视口设置。
5. `<link href="style.css" rel="stylesheet" type="text/css" />`：引用外部样式表文件 `style.css` 来定义页面的样式。
6. `<title>`：设置页面的标题栏显示的文本为 “InsCode 登录页面”。
7. `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">`：引入 Font Awesome 图标库的样式表。
8. `<style>`：内联 CSS 样式定义，用于设置页面的背景图片、字体以及其他样式。
9. `<body>`：包含了页面的主要内容，可见部分的显示区域。
10. `<div class="container">`：一个带有类名为 “container” 的 `<div>` 元素，用于包裹登录表单的内容。
11. `<h2>`：用于显示 “登录” 的标题。
12. `<form>`：登录表单，用于向服务器提交用户的登录凭据。
13. `<div class="input-container">`：用于包裹输入框和图标的 `<div>` 元素。
14. `<i class="fas fa-user"></i>`：使用 Font Awesome 图标库显示一个用户图标。
15. `<input type="text" id="username" name="用户名" onfocus="showPlaceholder()" onblur="hidePlaceholder()" required>`：一个包含 `type` 为文本和 `name` 为 “用户名” 的输入框，还包含有焦点获得和失去时触发事件的交互行为。
16. `<button id="loginBtn" type="submit">登录</button>`：一个表示登录按钮的 `<button>` 元素。
17. `<div class="logo">`：一个带有类名为 “logo” 的 `<div>` 元素，包含站点的标志和欢迎文本。
18. `<img src="logo.svg" alt="InsCode">`：显示名为 “logo.svg” 的图像作为 InsCode 站点的标志。
19. `<script src="script.js"></script>`：引入外部 JavaScript 文件 `script.js`，用于处理与登录表单相关的 JavaScript 交互行为。

InsCode 登录页面

<style>

body
{
font-family: Arial, sans-serif; /* 设置字体 */
background: url(拾光.jpg) repeat-x; /* 设置背景图片 */
background-size: cover;
background-position: center;
}


### 2.CSS


什么是CSS?  
 CSS（Cascading Style Sheets）是一种用于样式化网页的标记语言。它与HTML一起使用，用于控制网页的布局、外观和样式。通过CSS，开发人员可以定义文档的各个元素在浏览器中的显示方式。


对应于前面HTML的CSS代码如下：

/*将页面的内容垂直和水平居中对齐*/
html
{
height: 100%;
width: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}


* 这段代码描述的是将页面的内容垂直和水平居中对齐的样式。
	+ `html` 是选择所有 HTML 元素的根元素。
	+ `height: 100%` 和 `width: 100%` 将页面的高度和宽度设置为占据整个可用空间。
	+ `margin: 0` 确保没有任何外边距。
	+ `display: flex` 将 `display` 属性设置为 `flex`，以创建一个弹性容器。
	+ `align-items: center` 和 `justify-content: center` 让容器内的内容在垂直和水平方向上都居中对齐。

/*盒子细节设置*/
.container,.logo
{
text-align: center; /*文本内容居中对齐*/
padding: 30px; /*设置容器的内边距*/
max-width: 300px; /*容器的最大宽度*/
margin: 0 auto; /*设置容器的外边距*/
background-color: rgba(255, 255, 255, 0.5); /*设置白色透明背景*/
}
.container h2
{
text-align: center;
}


* 这段代码描述的是容器的细节样式设置。
	+ `.container, .logo` 是选择类名为 `.container` 和 `.logo` 的所有元素。
	+ `text-align: center` 将文本内容居中对齐。
	+ `padding: 30px` 设置容器的内边距为 30px。
	+ `max-width: 300px` 设置容器的最大宽度为 300px。
	+ `margin: 0 auto` 设置容器的外边距为自动，并且在水平方向上居中对齐。
	+ `background-color: rgba(255, 255, 255, 0.5)` 设置容器的背景颜色为半透明的白色。

/*设置输入框*/
.container input[type=“text”],
.container input[type=“password”]
{
width: 100%;
padding: 12px 30px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.5); /*设置输入框透明*/
}


* 这段代码描述的是输入框的样式设置。
	+ `.container input[type="text"], .container input[type="password"]` 选择类名为 `.container` 的元素下的所有 `type` 为文本和密码的输入框元素。
	+ `width: 100%` 设置输入框宽度为 100%。
	+ `padding: 12px 30px` 设置输入框的内边距为 12px 顶部/底部和 30px 左侧/右侧。
	+ `margin: 8px 0` 设置输入框的外边距为 8px 顶部/底部和 0 左侧/右侧。
	+ `display: inline-block` 将元素显示为内联块级元素，即在同一行显示。
	+ `border: 1px solid #ccc` 设置输入框的边框为 1px 灰色实线边框。
	+ `box-sizing: border-box` 使用 `border-box` 盒子模型，让元素的总宽度包括内边距和边框。
	+ `background-color: rgba(255, 255, 255, 0.5)` 设置输入框的背景颜色为半透明的白色。

/*设置输入框内图标*/
.input-container {
position: relative;
}
.input-container i {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
padding: 0 5px;
color: #888;
}


* 这段代码描述的是输入框内图标的样式设置。
	+ `.input-container` 是选择类名为 `.input-container` 的元素。
	+ `position: relative` 将元素的定位方式设置为相对定位。
	+ `.input-container i` 是选择位于 `.input-container` 内的 `i` 元素。
	+ `position: absolute` 将图标元素的定位方式设置为绝对定位。
	+ `top: 50%` 将图标元素的顶部位置设置为父容器的 50% 处。
	+ `left: 5px` 将图标元素的左侧位置设置为离父容器左边缘 5px 的距离。
	+ `transform: translateY(-50%)` 使用 `translateY` 将图标元素在垂直方向上上移自身高度的一半，

/*按钮部分*/
#loginBtn
{
color: white;
padding: 14px 20px;
margin: 10px 0;
border: none;
width: 100%;
background-color: #ccc;
transition: background-color 0.3s, transform 0.3s; /* 添加过渡效果 */
}
#loginBtn:hover
{
cursor: pointer;
opacity: 0.8;
background-color: #f00; /* 改变背景色 */
transform: scale(1.02); /* 放大按钮 */
}


* 这段代码描述的是按钮样式设置。
	+ `#loginBtn`：选择 ID 为 `loginBtn` 的按钮元素，并设置它们的样式。
	+ `color: white`：将按钮文本的颜色设置为白色。
	+ `padding: 14px 20px`：设置按钮的内边距为 14px 顶部/底部 和 20px 左侧/右侧。
	+ `margin: 10px 0`：设置按钮的外边距为 10px 顶部/底部 和 0 左侧/右侧。
	+ `border: none`：移除按钮的边框。
	+ `width: 100%`：将按钮的宽度设置为 100%。
	+ `background-color: #ccc`：设置按钮的背景颜色为浅灰色。


#### 专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

* HTML+CSS
* JavaScript
* 前端框架
* 前端性能优化
* 前端监控
* 模块化+项目构建
* 代码管理
* 信息安全
* 网络协议
* 浏览器
* 算法与数据结构
* 团队管理
* **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。



**其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等**

**由于文章篇幅有限，仅展示部分内容**

![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)