前端 代码 登录页面

最新推荐文章于 2024-06-16 23:04:02 发布
最新推荐文章于 2024-06-16 23:04:02 发布
阅读量229 收藏 1
点赞数 1
文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65459869/article/details/131685910
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>登录页面</title>

    <style>

        *{

            background-image: url(./06.jpg);

        }

        div{

            position: relative;

            margin: 300px auto;

            margin-top:100px;

            width: 300px;

            background-image: url(./05.jpg);

            text-align: center;

        }

        button{

            width: 250px;

            height: 50px;

            border-radius: 15px;

        }

    </style>

</head>

<body>

    <div>

        <h1>登录页面</h1>

        账号：<input type="text"><br><br>

        密码：<label for=""></label><input type="password"><br><br><br>

        <button><a href="./yemian.html" target="_blank" style="font-size: 35px; text-decoration: none; color: rgb(252, 158, 174);">登&nbsp;&nbsp;录</a></button>

    </div>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" href="./07.ico">

    <title>亚亚版权所有</title>

    <style>

        *{

            background-image: url(./04.jpg);

        }

    </style>

</head>

<body>

    <table border="2" cellspacing="1" cellpadding="18" align="center" height="620px" >

        <tr>

           

            <td colspan="2" width="500px" height="5">

                &ensp;<a href="#1">个人介绍</a>&ensp;&ensp;&ensp;

                <a href="#2">新闻咨询</a>&ensp;&ensp;&ensp;

                <a href="#3">就业团队</a>&ensp;&ensp;&ensp;

                <a href="#4">技术支持</a>&ensp;&ensp;&ensp;

                <a href="https://www.tfent.cn/" target="_blank">专业售后</a>&ensp;&ensp;&ensp;

                <a href="https://www.gov.cn/" target="_blank">线上客服</a>&ensp;

            </td>

        </tr>

        <tr>

            <a id="1"></a>

            <td width="350px" height="200px" style="background-image: url(./01.jpg);" height="100%" width="100%"></td>

            <td width="150px" height="200px">

                <form action="">

                   <label for="">邮箱：</label><input type="text" name="" id="" value=""><br>

                   <label for="">密码：</label><input type="password" name="" id="" ><br>

                   性别：<input type="radio" name="sex" id="" value="">男<input type="radio" name="sex" id="" value="">女<br>

                   爱好：<input type="checkbox" name="" id="">吃饭

                   <input type="checkbox" name="" id="">睡觉

                   <input type="checkbox" name="" id="">打豆豆<br>

                   所在部门：<select name="" id="">

                    <option value="">开发十八部</option>

                    <option value="">开发十九部</option>

                    <option value="">开发二十部</option>

                    <option value="">开发二十一部</option>

                   </select><br>

                   <input type="reset" value="重置">

                   <input type="submit" value="发送">

                </form>

            </td>

        </tr>

        <tr></tr>

            <td colspan="2" height="200px">

                sdfj的艺人运营机构包括艺人策划、整体包装及宣传推广。机构由深谙日韩偶像运营模式及国内娱乐圈形势的精英团队组成,

                从未出道时便对旗下练习生进行包装宣传，包括参与自制节目及网络短剧的录制，并在网络以及电视媒体进行投放，保证其稳定的

                曝光率，累积艺能经验，使练习生在出道后更加顺利成功。<a id="2"></a>

                出道后,依托sdfj丰富的媒体资源,配备专业的经纪团队，根据每位艺人不同的个性特点制定相应的长期发展计划。公司不仅

                和日韩、港台的经纪公司拥有着良好的合作沟通关系，为艺人日后的事业提供广阔的发展前景；同时还和索尼音乐、华纳唱片等唱

                片公司进行音乐合作，为艺人的音乐唱片发行出版提供了多种渠道。旗下艺人能在时代峰峻艺人经纪模式下，获得多方面的良好演

                艺发展。现如今公司签约的优秀练习生，依靠公司强大专业的师资力量，定期接受全方位艺能培训，公司承担前期全部培训费用。

            </td>

        </tr>

        <tr>

            <td  colspan="2" height="200px"  style="background-image: url(./02.jpg);"><a id="3"></a></td>

        </tr>

        <tr>

            <td width="350px" height="15px">

                版权信息：本网站归某某某某某某所有 <a id="4"></a> 团队:前端开发21部 联系方式:18564686248

            </td>

            <td width="150px" height="15px"><img src="./03.jpg" alt="" width="100px" height="100px"></td>

        </tr>

    </table>

</body>

</html>

 

 

 

 

 

哎亚亚哎亚亚
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
登录页面代码
HE627386528的博客
03-22 4782
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 用户名:<input id="username" name="username" /><br> 密码:<inpu...
代码实现前端网页
weixin_53278894的博客
12-21 305
写接口 const express = require('express') //创建服务器实例 const app = express() //配置解析表单数据的中间件 app.use(express.urlencoded({ extended: false})) //一定要在路由之前，配置cors这个中间件，从而解决接口跨域问题 const cors = require('cors') app.use(cors()) //导入路由模块 const router = require('./apiRout
HTML精美登录页面，（动态渐变效果＋稍微透明效果）
weixin_46253800的博客
03-28 2355
最近，学校留的html作业做出来十分简陋学校作业如上图所示，今天我来教大家做一个精美的登录页面。以下是精美的登录页面。HTML精美登录页面。
简单的HTML登录界面（带源码）
宝子的博客
07-05 2万+
非常的简单，第一眼看到这个界面的时候就感觉非常的喜欢，给我一种简约又美观的感觉，然后就模仿样式自己写出来了，给大家分享一下。还写了一个注册页面大部分的代码都差不多，因为它们实在太像了，我太喜欢了。
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 登录注册表单自带自定（超实用）轻松搞定登录功能：完整源代码与详细教程（新手必看）轻松入门登录表单自带自定义验证码
最新发布
南北极之间
06-16 752
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
简单网页版的注册登录案例（JSP+CSS+MySQL+Servlet+MVC设计思想，含源码！）
qq_44495081的博客
02-15 6505
一、登陆注册小案例 1、数据库创建与连接测试 创建数据库weblogin，创建users用户表 #创建表users CREATE TABLE `weblogin`.`users`( `uid` INT(10) ZEROFILL NOT NULL AUTO_INCREMENT COMMENT '用户ID', `username` VARCHAR(100) COMMENT '用户名', `...
好看实用的六个html登录页面
热门推荐
bhegi_seg的博客
03-10 5万+
本人找到了六个html登录页面，感觉还行，也挺好看的。 1.效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
前端登陆页面
Where there is a will, there is a way !
03-02 7334
例如，你可以使用JavaScript为表单添加验证功能，或者使用CSS和JavaScript为页面添加一些动态效果，比如当用户输入错误时，用户名和密码输入框可能会出现红色边框。该页面包含一个简单的表单，用户需要输入用户名和密码才能登录。同时，我们还引用了一个CSS文件，该文件可以在同一目录下创建一个名为style.css的文本文件，以自定义页面的外观和样式。当表单被提交时，该代码将检查用户名和密码输入框是否为空。你可以将这些CSS代码保存到一个名为style.css的文件中，并将其与HTML文件链接起来。
【炫酷登录界面】详解5款高级的前端登录页面及实现源码（附完整源码）
赏樱看雪撸代码
06-16 2万+
好看大气的登录页面，高级炫酷登录界面，5款登录界面源码分享，web登录页面制作，如何实现高级登录页面，如何设置透明遮罩，div实现水平垂直居中，CSS动画效果，登录动态切换效果，高科技登录按钮，动态炫酷登录界面实现，animation实现动态登录按钮效果。
前端登录页面
guangmingdaihua的博客
07-06 3543
关于使用HTML5+CSS3实现编写流光效果的Web前端登陆页面。注：实现本次效果全程使用HBuilder软件进行操作和编写。
拿来即用的前端登录页面（简洁清爽版）
RoyRaoHR的博客
05-12 1万+
代码： resgister.css为自定义文件 bootstrap-3.3.7-dist/css/bootstrap.min.css jquery-3.6.0.min.js bootstrap-3.3.7-dist/js/bootstrap.min.js 都可以通过相应官网下载 background:url(‘…/imags/timg.jpg’) no-repeat;中的time.jpg为登录背景图，可以自己替换 代码 admin.css log.css layui.css layui.js jquery-
前端小案例——登录界面（正则验证, 附源码）
前端小白一枚
03-04 2039
这是一个非常适合前端入门练习的小案例，各位小伙伴可以自行更改样式和内容，如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主QQ。来监听 DOMContentLoaded 事件，确保页面中的所有元素都已加载完毕。最后，根据验证结果，在页面上显示相应的提示信息。在表单提交事件中，首先阻止默认的表单提交行为。，以便在验证用户输入后自行处理提交逻辑。和用于显示验证信息的元素。当页面加载完成后，通过。用于验证身份证号码。
前端代码+登陆与注册
08-28
4. 页面跳转：登录成功后，使用`window.location.href`将用户重定向到主页面或其他指定页面。 总结，这个前端项目涵盖了用户身份验证的多种方式，包括账号登录、扫码登录和短信验证。通过HTML、CSS和JavaScript技术...
小米官网前端页面代码
01-10
除此之外，小米官网的前端代码可能还涉及到其他技术，如： - SEO优化：通过元标签（meta tags）和语义化HTML提高搜索引擎可见性。 - AJAX调用API：与后端服务器通信，获取产品信息、评论等实时数据。 - Web字体：...
基于HTML的前端静态登录页面
02-07
本项目"基于HTML的前端静态登录页面"提供了一个简洁、直观的登录界面设计，适用于初学者快速理解和实践HTML与CSS的基础知识。下面将详细阐述这个登录页面的设计原理和相关技术。 1. HTML基础： HTML（HyperText ...
javaweb新浪微博邮箱登录界面，图书周排行榜界面，正则表达式验证用户注册页面前端代码资源包
09-28
在本资源包中，我们关注的是JavaWeb应用中的前端界面设计，特别是登录界面、图书周排行榜界面以及用户注册页面的实现。这些元素是构建交互性强、用户体验良好的Web应用的关键部分。我们将深入探讨每个方面，同时引入...
图书管理系统前端代码设计.zip
07-15
《图书管理系统前端代码设计》是针对前端开发人员提供的一套完整的图书管理系统的界面代码实现。这个系统采用纯HTML编写，以黄色为主色调，设计简洁且兼容性良好，无论是独立使用还是整合到Vue等现代前端框架中，都...
html好看的登录页面1（十三种风格登录页面源码）
xcLeigh
06-15 3万+
html好看的登录页面1（十三种风格登录源码），大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
用前端代码生成登录界面
04-06
抱歉，我是一个语言模型，无法生成前端代码。但是，我可以提供一些前端代码的示例，用于生成登录界面。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="login-box"> <h2>Login</h2> <form> <div class="user-box"> <input type="text" name="username" required=""> <label>Username</label> </div> <div class="user-box"> <input type="password" name="password" required=""> <label>Password</label> </div> <button type="submit">Login</button> </form> </div> </body> </html> ``` CSS代码： ```css * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #333; } .login-box { width: 320px; height: 420px; background: #fff; color: #333; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 10px #000; padding: 20px; } .login-box h2 { text-align: center; margin-bottom: 30px; } .login-box form { display: flex; flex-direction: column; } .login-box form .user-box { position: relative; } .login-box form .user-box input { width: 100%; padding: 10px 0; font-size: 16px; color: #333; margin-bottom: 30px; border: none; border-bottom: 1px solid #333; outline: none; background: transparent; } .login-box form .user-box label { position: absolute; top: 0; left: 0; padding: 10px 0; font-size: 16px; color: #333; pointer-events: none; transition: 0.5s; } .login-box form .user-box input:focus ~ label, .login-box form .user-box input:valid ~ label { top: -20px; left: 0; color: #03a9f4; font-size: 12px; } .login-box button { background: #03a9f4; color: #fff; border: none; padding: 10px 20px; cursor: pointer; margin-top: 30px; border-radius: 5px; font-size: 16px; } ``` 这段代码生成了一个简单的登录界面，包括用户名和密码输入框、登录按钮等元素。你可以根据需要修改代码，以实现更复杂的登录界面。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值