seo接单,东莞seo建站排名,大数据营销案例,湖南省郴州市嘉禾县邮政编码目录
head部分
内联样式部分
body部分
login-form类的div
myModal类的div id
script部分
总的代码
界面与操作演示 !DOCTYPE html
html langen
!DOCTYPE html
这是文档类型声明#xff0c;告诉浏览器这是一个 HTML文档。
!DOCTYPE html
html langen
!DOCTYPE html
这是文档类型声明告诉浏览器这是一个 HTML文档。
html langen
这是 HTML 文档的根元素langen 表明文档的主要语言是英语。
head部分
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleLogin Page/titlestylebody {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}.login-form {padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: white;width: 300px;}.form-group {display: flex;flex-direction: row;margin-bottom: 10px;}.form-group label {width: 100px;text-align: right;padding-right: 10px;}.form-group input {flex-grow: 1;}/* Modal styles */.modal {display: none; /* Hidden by default */position: fixed; /* Stay in place */z-index: 1; /* Sit on top */left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-color: rgb(0,0,0); /* Fallback color */background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}/* Modal Content/Box */.modal-content {background-color: #fefefe;margin: 15% auto; /* 15% from the top and centered */padding: 20px;border: 1px solid #888;width: 80%; /* Could be more or less, depending on screen size */}/* The Close Button */.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}.close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}/style
/head
head
表示head部分的开始这里包含元信息如字符集、视口设置和样式等信息。 meta charsetUTF-8
指定文档的字符编码为 UTF-8一种常用的多字节编码格式 meta nameviewport contentwidthdevice-width, initial-scale1.0
设置视口的宽度等于设备的宽度并且初始缩放比例为 1使得网页在移动设备手机端和pc端都能正常显示上也能正确显示。 titleLogin Page/title
title标签用于设置网页的标题显示在浏览器标签上。
内联样式部分 style
style表示内联样式表部分的开始这里定义了页面的样式里面会有很多类类似于c中的类帮助我们设置字体的大小格式等。 body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}
body用于设置整个页面的样式
font-family: 页面使用的字体。
display: flex: 使用弹性盒子布局使字体或者图标动态变化使它们在任何屏幕尺寸下都能表现良好。
justify-content: center: 内容居中对齐。
align-items: center: 垂直居中对齐。
height: 100vh: 高度为视口高度。
background-color: 背景颜色。 .form-group label {width: 100px;text-align: right;padding-right: 10px;}
form-group label 样式类
width: 宽度。
text-align: right: 文本右对齐。
padding-right: 右边距。 .form-group input {flex-grow: 1;}
flex-grow: 1: 填充剩余空间。 /* Modal styles */.modal {display: none; /* Hidden by default */position: fixed; /* Stay in place */z-index: 1; /* Sit on top */left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-color: rgb(0,0,0); /* Fallback color */background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}
.modal 类的样式
display: none: 默认不显示。
position: fixed: 固定定位。
z-index: 层叠级别。
left, top: 位置。
width, height: 宽高。
overflow: 溢出处理。
background-color: 背景颜色。 /* Modal Content/Box */.modal-content {background-color: #fefefe;margin: 15% auto; /* 15% from the top and centered */padding: 20px;border: 1px solid #888;width: 80%; /* Could be more or less, depending on screen size */}
.modal-content 类的样式
background-color: 背景颜色。
margin: 外边距。
padding: 内边距。
border: 边框样式。
width: 宽度。 /* The Close Button */.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}
.close 类的样式
color: 字体颜色。
float: right: 浮动到右边。
font-size: 字体大小。
font-weight: 字体粗细。 .close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}
定义 .close 类的悬停和聚焦状态样式
color: 字体颜色。
text-decoration: 文本装饰。
cursor: 鼠标光标。 /style
/head
style表示内联样式部分的结束head表示head部分的结束。
body部分
bodydiv classlogin-formh2Login/h2form idloginFormdiv classform-grouplabel forusernameUsername:/labelinput typetext idusername nameusername required/divdiv classform-grouplabel forpasswordPassword:/labelinput typepassword idpassword namepassword required/divbutton typesubmitLogin/button/form/div!-- Modal --div idmyModal classmodal!-- Modal content --div classmodal-contentspan classclosetimes;/spanp登录成功/p/div/div
body
表示body部分的开始。
login-form类的div div classlogin-form
div 标签是一种常用的容器标签用于对文档中的部分或整个内容进行分块并对其应用样式或进行布局。
这里div表示接下来开始是.login-form 类的 div h2Login/h2
h2表示这是一个二级标题其中Login会显示在网页上。 form idloginForm
在HTML中form 标签用于创建一个表单用户可以通过这个表单提交信息。
id 属性是 form 标签的一个重要属性它用于唯一标识一个表单元素在一个文档中只出现一次而class可以多次使用。 div classform-grouplabel forusernameUsername:/labelinput typetext idusername nameusername required/div
定义用户名输入框属于form-group类
label: 标签。for 属性的值 username 与后面的 input 的 id 属性值相匹配表示这个标签与 input 字段相关联。
input: 输入框用于接收用户输入的文本数据type里的text表示要输入文本nameusername 用于在表单提交时标识这个输入字段的数据。要求必填required。 div classform-grouplabel forpasswordPassword:/labelinput typepassword idpassword namepassword required/div
label: 标签。
input: 输入框类型为密码要求必填。 button typesubmitLogin/button
提交按钮用于提交表单。
button 标签用于创建一个按钮用户可以点击这个按钮来触发某种操作。
submit表示这是一个提交按钮当用户点击这个按钮时会触发表单的提交。
Login是文本用户看到的按钮上的内容。 /form
结束登录表单。 /div
结束 .login-form 类的 div。
myModal类的div id !-- Modal --div idmyModal classmodal
开始模态框弹窗的 divID 为 myModal。 !-- Modal content --div classmodal-content
开始模态框的内容区。类为modal-content。 span classclosetimes;/span
定义关闭按钮。
span 标签是一个内联元素用于对文档中的部分内容进行分组并应用样式或进行JavaScript操作。
times; 是一个HTML实体表示乘号×在这里用作关闭按钮的图标。 p登录成功/p
定义模态框内的消息文本。 /div
结束模态框的内容区。 /div
结束模态框的 div。
script部分 script// Get the modalvar modal document.getElementById(myModal);// Get the button that opens the modalvar btn document.getElementById(loginForm).querySelector(button);// Get the span element that closes the modalvar span document.getElementsByClassName(close)[0];// When the user clicks the button, open the modal btn.addEventListener(click, function(event) {event.preventDefault(); // 阻止表单默认提交行为modal.style.display block;});// When the user clicks on span (x), close the modalspan.onclick function() {modal.style.display none;}// When the user clicks anywhere outside of the modal, close itwindow.onclick function(event) {if (event.target modal) {modal.style.display none;}}/script
/body
/html script
开始 script 标签用于编写 JavaScript 代码。 // Get the modalvar modal document.getElementById(myModal);
定义一个变量modal获取模态框元素。
这行代码使用 document.getElementById 方法获取页面中 ID 为 myModal 的元素并将其赋值给变量 modal。
getElementById 方法返回页面中具有指定 ID 的元素。
var btn document.getElementById(loginForm).querySelector(button);
这行代码首先获取 ID 为 loginForm 的元素然后使用 querySelector 方法查找第一个 button 元素并将其赋值给变量 btn。
querySelector 方法返回匹配指定 CSS 选择器的第一个元素。
var span document.getElementsByClassName(close)[0];
这行代码使用 document.getElementsByClassName 方法获取类名为 close 的所有元素并选取第一个元素赋值给变量 span。
getElementsByClassName 方法返回一个包含所有具有指定类名的元素的 HTMLCollection 对象。
btn.addEventListener(click, function(event) {event.preventDefault(); // 阻止表单默认提交行为modal.style.display block;
});
这代码为按钮添加了一个点击事件监听器。
当用户点击按钮时事件监听器中的回调函数会被执行。
event.preventDefault() 方法阻止了按钮默认的提交行为。
modal.style.display block; 将模态框的 display CSS 属性设置为 block使其可见。
span.onclick function() {modal.style.display none;
}
这行代码为关闭按钮添加了一个点击事件监听器。
当用户点击关闭按钮时事件监听器中的回调函数会被执行。
modal.style.display none; 将模态框的 display CSS 属性设置为 none使其不可见。
window.onclick function(event) {if (event.target modal) {modal.style.display none;}
}
这行代码为整个窗口添加了一个点击事件监听器。
当用户在窗口的任意位置点击时事件监听器中的回调函数会被执行。
event.target 返回实际触发事件的目标元素。
如果点击的目标元素是模态框本身则关闭模态框。 /script
结束 script 标签。
/body
结束 body 部分。
/html
结束整个 HTML 文档。
总的代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleLogin Page/titlestylebody {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}.login-form {padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: white;width: 300px;}.form-group {display: flex;flex-direction: row;margin-bottom: 10px;}.form-group label {width: 100px;text-align: right;padding-right: 10px;}.form-group input {flex-grow: 1;}/* Modal styles */.modal {display: none; /* Hidden by default */position: fixed; /* Stay in place */z-index: 1; /* Sit on top */left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-color: rgb(0,0,0); /* Fallback color */background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}/* Modal Content/Box */.modal-content {background-color: #fefefe;margin: 15% auto; /* 15% from the top and centered */padding: 20px;border: 1px solid #888;width: 80%; /* Could be more or less, depending on screen size */}/* The Close Button */.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}.close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}/style
/head
bodydiv classlogin-formh2Login/h2form idloginFormdiv classform-grouplabel forusernameUsername:/labelinput typetext idusername nameusername required/divdiv classform-grouplabel forpasswordPassword:/labelinput typepassword idpassword namepassword required/divbutton typesubmitLogin/button/form/div!-- Modal --div idmyModal classmodal!-- Modal content --div classmodal-contentspan classclosetimes;/spanp登录成功/p/div/divscript// Get the modalvar modal document.getElementById(myModal);// Get the button that opens the modalvar btn document.getElementById(loginForm).querySelector(button);// Get the span element that closes the modalvar span document.getElementsByClassName(close)[0];// When the user clicks the button, open the modal btn.addEventListener(click, function(event) {event.preventDefault(); // 阻止表单默认提交行为modal.style.display block;});// When the user clicks on span (x), close the modalspan.onclick function() {modal.style.display none;}// When the user clicks anywhere outside of the modal, close itwindow.onclick function(event) {if (event.target modal) {modal.style.display none;}}/script
/body
/html
界面与操作演示
