html后台登录界面网页设计界面

article/2025/11/3 15:11:14

一款简单的html后台登录界面网页设计界面带给大家。

效果图：
在这里插入图片描述
html代码：

<!DOCTYPE html>
<html>
<head><title>某某公司后台登录系统</title><link rel="stylesheet" href="css/style.css"><meta name="viewport" content="width=device-width, initial-scale=1" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="order by dede58.com"/><meta name="keywords" content="Simple Login Form Widget Responsive, Login Form Web Template, Flat Pricing Tables, Flat Drop-Downs, Sign-Up Web Templates, Flat Web Templates, Login Sign-up Responsive Web Template, Smartphone Compatible Web Template, Free Web Designs for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design" /><script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script></head><body><h1>某某公司后台登录系统</h1><div class="container w3"><h2>现在登录</h2><form action="#" method="post"><div class="username"><span class="username" style="height:19px">用户:</span><input type="text" name="name" class="name" placeholder="" required><div class="clear"></div></div><div class="password-agileits"><span class="username"style="height:19px">密码:</span><input type="password" name="password" class="password" placeholder="" required><div class="clear"></div></div><div class="rem-for-agile"><input type="checkbox" name="remember" class="remember">记得我<br><a href="#">忘记了密码</a><br></div><div class="login-w3"><input type="submit" class="login" value="Login"></div><div class="clear"></div></form></div><div class="footer-w3l"><p> 某某公司后台登录系统</p></div>
</body>
</html>

图片素材：

在这里插入图片描述

css样式-style.css

、html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}ol,ul{list-style:none;margin:0px;padding:0px;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}a{text-decoration:none;}.txt-rt{text-align:right;}.txt-lt{text-align:left;}.txt-center{text-align:center;}.float-rt{float:right;}.float-lt{float:left;}.clear{clear:both;}.pos-relative{position:relative;}.pos-absolute{position:absolute;}.vertical-base{vertical-align:baseline;}.vertical-top{vertical-align:top;}nav.vertical ul li{display:block;}nav.horizontal ul li{display: inline-block;}img{max-width:100%;}body {background:url('../images/1.jpg') no-repeat 0px 0px;background-size: cover;font-family: 'Open Sans', sans-serif;background-attachment: fixed;background-position: center;
}body a {transition: 0.5s all;-webkit-transition: 0.5s all;-moz-transition: 0.5s all;-o-transition: 0.5s all;-ms-transition: 0.5s all;
}h1 {color: #FFF;text-align: center;letter-spacing: 6px;font-size: 40px;margin-top: 75px;
}.container {width: 32%;margin: 50px auto;text-align: center;background:rgba(0, 0, 0, 0.43);-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}h2 {font-size:	30px;color: #FFF;padding-top: 45px;letter-spacing:3px;
}
form {padding: 65px;
}form span {width: 23%; float: left;background: #fed14e;padding: 10.2px 10px;position: relative;color: #005377;font-size: 15px;letter-spacing: 1px;
}form span:after {content: '';position: absolute;width: 0;height: 0;right: -11px;border-top: 6px solid rgba(0, 0, 0, 0);border-left: 11px solid #fed14e;border-bottom: 6px solid rgba(0, 0, 0, 0);top: 14px;
}
input.name {width: 65%;padding:10px 10px 10px 15px;border: none;outline: none;font-size: 17px;letter-spacing: 1px;margin-bottom: 35px;float:left;
}input.password {width: 65%;padding:10px 10px 10px 15px;border: none;outline: none;font-size: 17px;letter-spacing: 1px;margin-bottom: 35px;float:left;
}
.rem-for-agile{width:50%;float:left;text-align:left;font-size:13px;color:rgb(238, 223, 179);
}
.rem-for-agile a{color:rgb(238, 223, 179);margin-top:3px;display:inline-block;padding-left:18px;
}
.rem-for-agile a:hover{color: #fff;
}
input[type="checkbox"] {margin: 10px 5px 0px 0px;vertical-align: sub;
}.login-w3{width:50%;float:right;
}
input[type="submit"]{background-color:#005377;color:#fff;padding:11px;outline: none;border:none;font-size: 17px;width:50%;cursor:pointer;margin-top:5px;transition: 0.5s all;-webkit-transition: 0.5s all;-moz-transition: 0.5s all;-o-transition: 0.5s all;-ms-transition: 0.5s all;
}
input[type="submit"]:hover{background:#fed14e;color:#000;}
.footer-w3l{margin-top: 150px;margin-bottom: 20px;
}
.footer-w3l p {color:white;text-align:center;font-size:13px;letter-spacing:1px;
}
.footer-w3l a{color:white;text-decoration:none;
}
.footer-w3l a:hover{text-decoration:underline;
}
@media screen and (max-width: 1440px) {form span {font-size:14px;padding:10.5px 10px;}input.name{width: 63%;}input.password {width: 63%;}}
@media screen and (max-width: 1366px) {.container {width: 37%;}}@media screen and (max-width: 1080px) {.container {width: 46%;}}
@media screen and (max-width: 991px) {h1{margin-top:50px;}.container {width: 52%;}}@media screen and (max-width: 800px) {.container {width: 63%;}form {padding: 55px;}}@media screen and (max-width: 736px) {h1 {letter-spacing: 4px;font-size: 35px;}h2 {font-size: 28px;padding-top: 35px;letter-spacing: 2px;}}
@media screen and (max-width: 667px) {.container {width: 66%;}form {padding: 53px;}}
@media screen and (max-width: 640px) {form {padding: 42px;}
}
@media screen and (max-width: 600px) {.container {width: 70%;}
}
@media screen and (max-width: 568px) {.container {width: 74%;}
}
@media screen and (max-width: 480px) {h1 {letter-spacing: 2px;font-size: 31px;}.container {width: 78%;}form {padding: 30px;}input.name {width: 62%;}input.password{width: 62%;}input[type="submit"] {margin-top:8px;}
}
@media screen and (max-width: 414px) {.container {width: 85%;}form span {font-size: 12px;}input.name {width: 58.5%;padding: 9px 9px 9px 15px;}input.password{width: 58.5%;padding: 9px 9px 9px 15px;}.footer-w3l p {letter-spacing:0;}
}@media screen and (max-width: 384px) {form span {width: 25%;}input.name {width: 57.5%;}input.password{width: 57.5%;}
}@media screen and (max-width: 375px) {h1 {font-size: 27px;}h2 {font-size: 24px;}input.name {width: 57%;}input.password{width: 57%;}form span{padding-left:5px;}}
@media screen and (max-width: 320px) {h1 {font-size: 23px;letter-spacing:1px;}h2 {font-size: 19px;letter-spacing:1px;padding-top:25px;}form {padding: 20px;}form span {font-size: 11px;width:27%;}input.name {padding: 8px 9px 8px 15px;width:55%;}input.password {padding: 8px 9px 8px 15px;width:55%;}.rem-for-agile{font-size:11px;}input[type="submit"] {padding: 9px;font-size: 16px;width: 60%;margin-top:10px;}
}

http://chatgpt.dhexx.cn/article/Vwx7U5ts.shtml

相关文章

HTML 实现好看的登录注册界面（一)

HTML 实现好看的登录注册界面（一)

1. 效果图展示 2. 代码 2.1 HTML部分 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" con…
阅读更多...
HTML制作用户登录界面

HTML制作用户登录界面

1、index代码 <!doctype html> <html><head><meta charset"utf-8"><title>login</title><link rel"stylesheet" type"text/css" href"css/index.css"/></head><body><div&…
阅读更多...
登录界面html源代码_网页制作：一个简易美观的登录界面

登录界面html源代码_网页制作：一个简易美观的登录界面

登录界面html源代码_网页制作&#xff1a;一个简易美观的登录界面 效果图 在我们做一个页面之前&#xff0c;要先想好他的一个整体布局&#xff0c;也就是我们这里面的login.html主页面&#xff0c;大致结构如下&#xff1a; 接下来&#xff0c;我们先上代码&#xff0c;看一…
阅读更多...
HTML+CSS登陆界面实例

HTML+CSS登陆界面实例

登录界面截图 项目代码仓库地址 项目的代码放在了github的代码仓库当中&#xff1a;点我 项目访问地址 将登录界面项目部署在了github上面&#xff1a;点我 项目代码解析 项目的界面简析 主要部分是Login的模块&#xff0c;包括username文本框和password文本框以及Login的…
阅读更多...
HTML+CSS登录注册界面

HTML+CSS登录注册界面

目录 一、效果演示二、代码实现2.1、HTML主页面2.2、CSS代码2.3、JS代码 一、效果演示 [注]: 这里需要我们创建三个文件&#xff0c;一个是index.html文件&#xff0c;一个是style.css文件还有一个是login.js文件&#xff0c;把代码copy上去 只要路径找好就能正常运行了。 演示…
阅读更多...
HTML+CSS登录界面

HTML+CSS登录界面

今天学习了一个HTML+CSS登录界面 效果图如下： 背景图片可以选取自己喜欢的，以下是实现代码： login.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet&quo…
阅读更多...
HTMLCSS登录界面及讲解

HTMLCSS登录界面及讲解

PS:该源码非原创&#xff0c;原文章来自(2条消息) HTMLCSS登录界面_桐艾的博客-CSDN博客_登录页面 这里只做源码讲解 页面效果如下&#xff1a; 首先是login.html <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>登…
阅读更多...
好看的html登录界面，

好看的html登录界面，

界面效果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html><head><title>Login Page</title><style>body {background-color: #f2f2f2;font-family: Arial, sans-serif;}form {background-color: #fff;border-radius: 5px;box-shado…
阅读更多...
HTML简单登录界面的实现

HTML简单登录界面的实现

简单登录界面的实现&#xff1a; 直接一个实例上代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"&…
阅读更多...
html好看的登录界面2（十四种风格登录源码）

html好看的登录界面2（十四种风格登录源码）

文章目录 1.登录风格效果说明1.1 凹显风登录界面1.2 大气简洁风登录界面1.3 弹出背景风登录界面1.4 动态左右切换风登陆界面1.5 简洁背景切换登录界面1.6 可关闭登录界面1.7 蒙蒙山雨风登录界面1.8 苹果弹框风登录界面1.9 上中下青春风登录界面1.10 夏日风登录界面1.11 星光熠熠…
阅读更多...
html+css唯美登录页面，代码提供（效果展示）

html+css唯美登录页面，代码提供（效果展示）

文章目录 效果图所有代码 效果图 所有代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" co…
阅读更多...
使用 ELK 收集日志

使用 ELK 收集日志

在当前分布式、微服务架构下&#xff0c;各个应用都部署在不同的服务器上&#xff0c;每个应用都在记录着自己重要或者不重要的日志信息。当我们要通过日志信息来排查错误时&#xff0c;可以根据出错应用在对应的机器上找报错相关的日志信息。但是&#xff0c;可能我们不具有相…
阅读更多...
ELK日志分析

ELK日志分析

目录 一、概述 ELK工作原理 二、Elasticsearch 1.介绍 2.基础核心概念 (1)接近实时&#xff08;NRT&#xff09; (2)集群&#xff08;cluster&#xff09; (3)节点&#xff08;node&#xff09; (4)索引&#xff08;index&#xff09; (5)类型&#xff08;type&…
阅读更多...
ELK日志分析系统（一）之ELK原理

ELK日志分析系统（一）之ELK原理

文章目录 前言一、ELK简介1.ELK日志分析系统组成1.1Elasticsearch&#xff08;es&#xff09;1.2Logstash1.3Kibana 2.日志处理步骤 二、Elasticsearch1.Elasticsearch概述2.Elasticsearch核心概念2.1接近实时&#xff08;NRT&#xff09;2.2集群&#xff08;cluster&#xff0…
阅读更多...
ELK相关软件下载安装

ELK相关软件下载安装

一、Windows安装elasticsearch 1、安装JDK&#xff0c;至少1.8.0_73以上版本&#xff0c;验证&#xff1a;java -version 2、下载和解压缩Elasticsearch安装包&#xff0c;查看目录结构 下载地址&#xff1a;https://www.elastic.co/cn/downloads/elasticsearch 目录结构&am…
阅读更多...
ELK日志分析系统

ELK日志分析系统

目录 一、ELK日志分析系统 1、日志分析 2、elk 日志分析的工具 3、Logstash 4、elasticsearch介绍 5、Elasticsearch的基础核心概念 7、logstash介绍 8、Kibana介绍 二、实验 1、配置elasticsearch环境 2、安装elasticsearch-head插件 3、安装logstash 4、在node1主…
阅读更多...
centos7搭建elk

centos7搭建elk

ELK 是 ElasticSearch、 LogStash、 Kibana 三个开源工具的简称，现在还包括 Beats，其分工如下: LogStash/Beats: 负责数据的收集与处理ElasticSearch: 一个开源的分布式搜索引擎，负责数据的存储、检索和分析Kibana: 提供了可视化的界面。负责数据的可视化操作基于 ELK Stack…
阅读更多...
ELK简介

ELK简介

目录 1.什么是ELK 2.为什么使用ELK 3.ELK的工作流程简介 4.ELK重点组件介绍 ①Filebeat工作原理&#xff1a; ②Logstash工作原理&#xff1a; 5.ELK架构举例 ①&#xff1a; ②&#xff1a; ③&#xff1a; 1.什么是ELK ELK是三个开源软件的缩写&#xff0c;分别是E…
阅读更多...
ELK分布式日志解决方案

ELK分布式日志解决方案

一、简介 ELK&#xff0c;包含三款产品&#xff0c;Elasticsearch、Logstash、Kibana&#xff0c;可在项目中作为日志框架使用。 项目中框架整合所需技术&#xff1a; 在整个方案中&#xff0c;各组件的作用如下&#xff1a; 应用服务 生产日志&#xff0c;通过Logger产生日…
阅读更多...
ElasticSearch（九）：ELK 架构

ElasticSearch（九）：ELK 架构

日志收集——》格式化分析——》检索和可视化——》风险告警 ELK架构 经典的ELK整合消息队列Nginx架构 什么是Logstash Logstash核心概念Logstash数据传输原理Logstash配置文件结构Logstash QueueLogstash导入数据到ES同步数据库数据到Elasticsearch 什么是Beats FileBeat简介…
阅读更多...
推荐文章

Copyright @ 2022~2023