登录页面制作

最新推荐文章于 2024-08-14 10:44:37 发布
最新推荐文章于 2024-08-14 10:44:37 发布
阅读量3.7k 收藏 30
点赞数 5
分类专栏： 页面制作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42317351/article/details/88955539
版权

制作一个登录页面

首先，我说一下我的编辑器，它是Visual Studio Code 2017版本开发工具我主要的码代码都在这软件里进行开发，这次的登陆页面就用它编写的，好了接下来请看步骤：

效果图：

在这里插入图片描述

  1. 制作框架
    先编写div盒子代码附上名称：
<body>
        <div class="nav">
            
       </div>
     <div class="centent">
             <div class="centent1"></div>
        <div class="centent2">
               <div class="img">
                
           </div>
                <div class="img">
                
           </div>
           </div>
       <div class="input1">
              
       </div>
       <div class="bottom">
           
       </div>
       
     </div>
</body>
  1. 给框架加上样式
  <style>

  body{
	     background:url("image/logo.jpg") no-repeat center center;    
	     background-size:cover;
       background-attachment:fixed;
}
  .nav{
	     width:100%; 
		   height:100px; 
			 background-color: rgba(38,103,255,0.9);
		
			 font-size:30px;
			 text-align:left;
		   
}
  .nav b{
		     margin-left:16%; 
				 margin-top:30px; 
				 color: cornsilk; 
				 font-family: "楷体";
}
	.centent{
	         width:400px; 
			     height:400px; 
			     margin-left:68%; 
			     margin-top:160px; 
			     background-color:rgba(102,204,255,0.7);
			 
}
	.centent1{
	          width:400px; 
			      height:50px; 
			      text-align:center;
			      line-height:45px;
			      color:#eff1f8;
			      font-family:"楷体";
			      font-size:30px;
			      background-color:rgba(38,103,255,0.7);
			 
}
	.centent2{
	          width:400px; 
			      height:140px;
			      margin-top:30px;
			     
}
	.centent2 img{
		            width:40px; 
								height:35px; 
								float:left; 
								opacity: 0.7; 
								margin-top:25px; 
								margin-left:50px;
}
	.centent2 input{
		              font-size:15px; 
									margin-top:25px; 
									background-color:rgb(102, 204, 255);
}
	.input1{
		      margin-top:5px; 
					text-align:center;
}
	.input1 input{ 
		            font-size:20px; 
								background-color:rgba(102,204,255,0.5);
}
	.bottom{
		      width:400px; 
	        margin-top:20px;
			    height:114px; 
}
.bottom img{
	          width: 400px;
					  height:120px;
	          opacity:0.4;
						
}
  </style>
  1. 写上内容
<body>
  <div class="nav">
	         <b>思忆</b>
		       <hr width="38%"; height="1"; color="LavenderBlush	"; align="left";></hr>
		       <hr width="28%"; height="1"; color="Cyan"; align="left";></hr>
		       <hr width="18%"; height="1"; color="ForestGreen"; align="left";></hr>
	</div>
  <div class="centent">
          <div class="centent1"><b>用户登录</b></div>
	 <div class="centent2">
	        <div class="img"><img src="image/logo3.jpg"/>
		     <input type="text" name="" value="" placeholder="用户名" "this.placeholder=''" "this.placeholder='用户名'" style="width:200px; height:30px;" />
		</div>
		     <div class="img"><img src="image/logo4.jpg"/>
		     <input type="text" name="" value="" placeholder="密码" "this.placeholder=''" "this.placeholder='密码'" style="width:200px; height:30px;" />
		</div>
		</div>
	<div class="input1">
	       <input type="button" value="登录">
	       <input type="button" value="注册">
	</div>
	<div class="bottom">
         <img src="image/logo2.jpg"/>
	</div>
	
  </div>
 </body>

  完结
以上就是我本人辛苦做出来的页面代码希望能对大家有点用但其中也有不足的望大家包含因为我也是小菜鸟一个。
完整的代码页
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>登陆页面</title>
  <style>

  body{
	     background:url("image/logo.jpg") no-repeat center center;    
	     background-size:cover;
       background-attachment:fixed;
}
  .nav{
	     width:100%; 
		   height:100px; 
			 background-color: rgba(38,103,255,0.9);
		
			 font-size:30px;
			 text-align:left;
		   
}
  .nav b{
		     margin-left:16%; 
				 margin-top:30px; 
				 color: cornsilk; 
				 font-family: "楷体";
}
	.centent{
	         width:400px; 
			     height:400px; 
			     margin-left:68%; 
			     margin-top:160px; 
			     background-color:rgba(102,204,255,0.7);
			 
}
	.centent1{
	          width:400px; 
			      height:50px; 
			      text-align:center;
			      line-height:45px;
			      color:#eff1f8;
			      font-family:"楷体";
			      font-size:30px;
			      background-color:rgba(38,103,255,0.7);
			 
}
	.centent2{
	          width:400px; 
			      height:140px;
			      margin-top:30px;
			     
}
	.centent2 img{
		            width:40px; 
								height:35px; 
								float:left; 
								opacity: 0.7; 
								margin-top:25px; 
								margin-left:50px;
}
	.centent2 input{
		              font-size:15px; 
									margin-top:25px; 
									background-color:rgb(102, 204, 255);
}
	.input1{
		      margin-top:5px; 
					text-align:center;
}
	.input1 input{ 
		            font-size:20px; 
								background-color:rgba(102,204,255,0.5);
}
	.bottom{
		      width:400px; 
	        margin-top:20px;
			    height:114px; 
}
.bottom img{
	          width: 400px;
					  height:120px;
	          opacity:0.4;
						
}
  </style>
 </head>
 <body>
  <div class="nav">
	         <b>思忆</b>
		       <hr width="38%"; height="1"; color="LavenderBlush	"; align="left";></hr>
		       <hr width="28%"; height="1"; color="Cyan"; align="left";></hr>
		       <hr width="18%"; height="1"; color="ForestGreen"; align="left";></hr>
	</div>
  <div class="centent">
          <div class="centent1"><b>用户登录</b></div>
	 <div class="centent2">
	        <div class="img"><img src="image/logo3.jpg"/>
		     <input type="text" name="" value="" placeholder="用户名" "this.placeholder=''" "this.placeholder='用户名'" style="width:200px; height:30px;" />
		</div>
		     <div class="img"><img src="image/logo4.jpg"/>
		     <input type="text" name="" value="" placeholder="密码" "this.placeholder=''" "this.placeholder='密码'" style="width:200px; height:30px;" />
		</div>
		</div>
	<div class="input1">
	       <input type="button" value="登录">
	       <input type="button" value="注册">
	</div>
	<div class="bottom">
         <img src="image/logo2.jpg"/>
	</div>
	
  </div>
 </body>
</html>
小小贴
关注
专栏目录
如何制作一个简单的HTML登录页面（附代码）
web前端入门基础进阶教程-htmlcssjs
06-18 1万+
几乎每个网站都会有登录页面，那你知道如何写HTML登录页面吗？这篇文章就和大家分享一个HTML简单登录界面的代码，有一定的参考价值，感兴趣的朋友可以看看。 **实例：**制作一个HTML登录页面，包含邮箱，登录密码，立即注册，忘记密码等，代码如下： HTML部分： > <div class="dowebok"> > > <div class="logo"></div> > > <div class="form-item"> &
注册登录页面
weixin_49289233的博客
11-30 744
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style> body { background-image: url("./bg.jpg"); } </style> </head&gt...
从零开始：登录页面的简单实现教程，让你的网站更具吸引力！
最新发布
hulianwangjike的博客
08-14 630
持续每天分享好用的软件源码
登录界面制作
haier123888的博客
12-05 3928
1、新建项目“登录界面”。选择【文件】→【新建】→【项目】，弹出“新建项目”界面，选择【windows桌面】→【windows窗体应用】，命名“登录界面”。 2、设置窗体的基本属性。修改窗体的标题，命名为“登录界面”，添加背景图片。 3、向窗体中拖入相应的控件。 4、实现登录的功能。双击【登录】按钮，进入登录的单击事件，在单击事件中，对用户的用户名和密码进行验证。 首先添加如下...
制作一个登录页面
影子
07-30 313
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ font-family: Roboto; background-color: #e76f51; display: flex; justify-content: c..
登录界面的制作
weixin_44751962的博客
03-11 469
刚刚开始独立编写代码的时候，真的是一步一个挫折，多亏了老师的录屏和小伙伴的指导，我慢慢的懂得了一些基本的步骤。 就像是开始做一个登录界面的时候，首先我们要想一下登录界面需要哪些基本的要素。比如说图形界面类，组件类和辅助类，还有标签，按钮，文本框，密码框，复选框，以及它的一个整体布局。 首先呢，我们要做一个标签，就要先创建一个对象，以及构造方法，然后进行定义，为了将这个标签表示出来，我们要创建一个窗...
Android登录页面制作并且记住账号密码
01-03
一、页面搭建 二、代码实现 package com.hiscene.test; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.text.TextUtils; import android.view.View; import ...
简单登录界面制作.zip
04-28
这个"简单登录界面制作.zip"压缩包提供了一个完整的实例，可以帮助开发者理解和实践如何构建一个基础的用户登录功能。下面将详细介绍其中涉及的关键知识点。 1. **登录界面设计**： - 使用Android Studio作为集成...
matlab制作的登陆界面
05-07
在这个案例中，我们将探讨如何使用MATLAB来制作一个简单的登录界面，以及涉及的相关知识点。 首先，`Login.m`文件是MATLAB GUI程序的核心，通常包含一个或多个函数，这些函数定义了界面的行为。在登录界面中，主要...
Labview登录界面制作
10-29
在“Labview登录界面制作”这个主题中，我们将深入探讨如何利用LabVIEW来设计一个具有用户验证功能的登录界面。 1. **界面设计** LabVIEW中的界面设计主要依赖于前面板（Front Panel）和程序框图（Block Diagram）...
VC++编写的一个登陆界面
04-18
VC++编写的一个登陆界面VC++编写的一个登陆界面VC++编写的一个登陆界面VC++编写的一个登陆界面VC++编写的一个登陆界面VC++编写的一个登陆界面VC++编写的一个登陆界面VC++编写的一个登陆界面VC++编写的一个登陆界面VC++编写的一个登陆界面VC++编写的一个登陆界面
html5,js所编写的一个精美的登陆以及注册界面
10-09
web前端,模仿阿里云注册界面,编写，登陆界面以及注册界面都有相应的注释很容易照着修改！
简洁美观的一个登录页面
03-14
基于webstorm编写的一个小小的简洁美观的登录页面，外观高仿D站登录页面，代码不同更为易懂
JSP实验报告+登录系统的制作课程 简单的登录页面 制作页面
02-22
JSP 实验报告 + 登录系统的制作课程 JSP（Java Server Pages）是一种基于 Java 语言的服务器端脚本技术，主要用于在 Web 服务器上生成动态网页。下面是 JSP 实验报告 + 登录系统的制作课程的相关知识点： 知识点1...
超简易可使用登录界面制作
zyg_web的博客
01-15 448
来吧，展示： 动态效果： （注：使用了HTML CSS JavaScript） HTML部分：
7.登录界面的制作
weixin_38644630的博客
11-25 192
7.登录界面的制作 直接贴代码，背景图片需要自己替换一下自己喜欢 <template> <div class="container"> <div class="login-box"> <div class="login-text"> 登 录 <br /> <span>欢迎使用xxx软件</span> </div>
如何制作登录界面
努力是为了将来有好的生活，所以一起努力吧！
04-11 4948
今天我将使用HTML,CSS和JavaScript做一个个性化的登录界面 我们先来看看运行的结果： 注意：我在本文中只会简介有些重要的代码，因为我们不是在写代码而是在写博客。 第一步 先在桌面建一个.html文件，.html前面名字可以以你们的风格来写，这里我就用index.html来演示。这次代码可以把CSS+JavaScript放在HTML文件里面。 我们先从index.html讲起，我们先把HTML基本代码写出来。 <div class="container"> <
python登陆界面制作
09-22
要制作Python登录界面，可以使用tkinter模块设计图形界面。设计步骤如下： 1. 导入tkinter模块 2. 创建主窗口window 3. 设计欢迎界面，包括系统名称显示、用户类型选择、用户名及密码输入、登录及退出按钮、欢迎界面等功能 4. 定义相关函数实现按钮的功能，如退出系统、管理员登录、普通用户登录等 5. 设置按钮的位置 6. 运行主窗口 下面是一个简单的示例代码： import tkinter as tk # 创建主窗口 window = tk.Tk() window.title("登录界面") window.geometry("400x300") # 欢迎界面设计 def welcome(): winlabel = tk.Label(window, text='请选择用户类型:', fg='black', bg='pink', font=("微软雅黑", 15, 'bold')) winlabel.place(x=100, y=110) winlabel.configure(width=20, height=4) # 按钮设计 bt_logquit = tk.Button(window, text='退出系统', bg='pink', command=usr_sign_quit) bt_logquit.place(x=200, y=230) bt_admin_login = tk.Button(window, text='管理员登录', bg='pink', command=admin_log_in) bt_admin_login.place(x=110, y=180) bt_user_login = tk.Button(window, text='普通用户登录', bg='pink', command=usr_log_in) bt_user_login.place(x=270, y=180) welcome() window.mainloop()
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值