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

}

登录

登录

欢迎来到 InsCode

### 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`：设置按钮的背景颜色为浅灰色。
	+ `transition: background-color 0.3s, transform 0.3s`：为按钮的背景颜色和变换效果设置过渡动画。
	+ `#loginBtn:hover`：设置鼠标悬停在按钮上时的样式。
	+ `cursor: pointer`：将鼠标悬停在按钮上时的光标样式设置为手型指针。
	+ `opacity: 0.8`：将按钮的不透明度设置为 0.8，使其稍微变暗，以提供视觉反馈。
	+ `background-color: #f00`：将按钮的背景颜色改为红色。
	+ `transform: scale(1.02)`：将按钮的大小放大 1.02 倍，以一种平滑的动画效果进行缩放。


![在这里插入图片描述](https://img-blog.csdnimg.cn/370c17e1a79f4a948a4b6f0e00045a7d.jpeg#pic_center)  
 ![当鼠标移动到此](https://img-blog.csdnimg.cn/b79a0cf9e1d64822b6e26c3068413a32.jpeg#pic_center)


通过这些样式设置，实现了按钮的文本颜色、内边距、外边距、边框、宽度、背景颜色和过渡效果的定义。同时，使用 `:hover` 伪类选择器设置了鼠标悬停时按钮的样式，包括光标样式、背景颜色变化和按钮的缩放效果。这些样式共同创建了一个具有交互友好和动态效果的按钮样式。


### 3.JS


什么是Javascript?  
 JavaScript是一种高级编程语言，用于在网页上添加交互性和动态功能。它是一种脚本语言，可以直接嵌入到HTML代码中，并在浏览器中执行。


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

/*控制框内占位符文本的显示和隐藏*/
function showPlaceholder() {
if (event.target.value === ‘’)
{
event.target.placeholder = ‘请输入’ + event.target.name;
}
}

function hidePlaceholder()
{
event.target.placeholder = ‘’;
}

* `function showPlaceholder()`：


	+ 这个函数在输入框获得焦点时调用，用于显示占位符文本。
	+ 使用 `event.target.value` 获取当前输入框的值。
	+ 如果输入框的值是空的，即用户没有输入内容，则将占位符文本设置为 “请输入” + 输入框的名称（即 `event.target.name`）。
* `function hidePlaceholder()`：


	+ 这个函数在输入框失去焦点时调用，用于隐藏占位符文本。
	+ 将占位符文本设置为空，即清空文本内容。


![在这里插入图片描述](https://img-blog.csdnimg.cn/42c7a63cc4a246c49f6fbc5eebb45bd0.jpeg#pic_center)




---


打开全栈工匠技能包-1小时轻松掌握SSR

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi00NWMyNWY5NmI2YTQzOWU5N2UzNGJjNjdjNzIyZDFiYl9oZC5qcGc?x-oss-process=image/format,png)



两小时精通jq+bs插件开发

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMzLnpoaW1nLmNvbS84MC92Mi01ZGU5MTQ1ZDI0OWJmZDliNTFiZjMyOTVmMTg2ZGFlZV9oZC5qcGc?x-oss-process=image/format,png)

生产环境下如歌部署Node.js



![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi01NjcyZjU2ZTg1NTcwMDM3ZTg1ZmJlODI0MDA3MDJiYl9oZC5qcGc?x-oss-process=image/format,png)



网易内部VUE自定义插件库NPM集成

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMzLnpoaW1nLmNvbS84MC92Mi1kN2M3ZWVjOWJiZGVmYjJiMjNjNzExNzgzZWM4MzIwZV9oZC5qcGc?x-oss-process=image/format,png)



谁说前端不用懂安全，XSS跨站脚本的危害

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi0yNDAwODRhMGFlNzQwNmUzMWI4NjM0NTk3ZTFjOWQwN19oZC5qcGc?x-oss-process=image/format,png)



webpack的loader到底是什么样的？两小时带你写一个自己loader

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi0xOWQ2YTQ4MTJmZmQzZjZmYzdlYjJmMjJlMjUwZTM2Y19oZC5qcGc?x-oss-process=image/format,png)