要求：

使用 Eclipse 创建一个静态的登录页面

实现步骤：

  1. 在 Eclipse 中，点击“File”，显示菜单，选择“New” “Other”
  2. 点击“Other”菜单项，显示“New（新建）”对话框，展开“Web”节点，选择“Static Web Project”创建css目录并在css目录中添加style.css文件
  3. 点击“Static Web Project”节点，弹出“New Static Web Project”界面，创建静态 Web 项目 LoginProject
  4. 点击“Finish”按钮后，新建“LoginProject”项目成功，在该项目的“WebContent”目录中，新建HTML“login.html”页面，添加html代码
  5. 新建 login.css 文件，定义整个登录页面的背景

login.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>用户登录</title>

<link rel="stylesheet" type="text/css" href="css/login.css"/>

</head>

<body>

	<div class="page">

		<div class="loginwarp">

			<div class="logo">用户登录</div>

			<div class="logo_from">

				<form id="login" name="logo" method="post">

					<ul>

						<li class="login-item"><span>用户名：</span>

							<input type="text" name="username" id="username" value="" class="login-input" />

						</li>

						<li class="login-item"><span>密&nbsp;&nbsp;&nbsp;码：</span>

							<input type="text" name="password" id="password" value="" class="login-input" />

						</li>

						<li class="login-sub">

							<input type="submit" name="submit" value="登录" />

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

						</li>

					</ul>

				</form>

			</div>

		</div>

	</div>

</body>

</html>

login.css

body{

	background: #ddd;

}

ol,ul,li{

	list-style: none;

}

.loginwarp{

	margin: 250px auto;

	width: 400px;

	padding: 30px 50px;

	background: #fff;

	overflow: hidden;

	font-size: 14px;

}

.loginwarp .logo{

	width: 100%;

	height: 44px;

	line-height: 44px;

	font-size: 20px;

	text-align: center;

	border-bottom: 1px solid #ddd;

}

.loginwarp .login_from{

	margin-top: 15px;

}

.login-item{

	padding: 2px 8px;

	border: 1px solid #666;

	border-radius: 8px;

	margin-top: 10px;

}

.login-input{

	height: 35px;

	border: none;

	line-height: 35px;

	width: 200px;

	font-size: 14px;

	outline: none;

}

.login-sub{

	text-align: center;

}

.login-sub input{

	margin-top: 15px;

	background: #45b547;

	line-height: 35px;

	width: 150px;

	color: #FFFFFF;

	font-size: 16px;

	border: none;

	border-radius: 5px;

}

源码地址：点击查看

使用 Eclipse 创建一个静态的登录页面的更多相关文章

  1. 用Eclipse 创建一个 简单的 Maven JavaWeb 项目

    使用Maven 创建一个简单的 javaWeb 项目: 本篇属于 创建 JavaWeb 项目的第三篇: 建议阅读本篇之前 阅读 用 Eclipse 创建一个简单的web项目  ;本篇是这这篇文章的基础 ...

  2. 用 Eclipse 创建一个简单的web项目

    Eclipse neon 汉化版 ; 1;右击新建 -->  选择 动态Web项目 2:  填写 项目名 项目位置 ; 选择 Dynamic web module version 和 tomca ...

  3. vue-cli3.0创建项目之完成登录页面

    借鉴博客:https://www.cnblogs.com/KenFine/p/10850386.html 接着上一个创建的新项目vue-mydemo01来: 1.创建一个login.vue组件页面:如 ...

  4. eclipse创建一个文件夹

    如何给eclipse创建一个文件夹,便于项目的管理:有时我们的eclipse中会有很多项目的,有的是公司的如Project1,Project2,Project3....还有的呢, 也可能是自己平时做的 ...

  5. 用 eclipse 创建一个简单的 meaven spring springMvc mybatis 项目

    下面是整体步骤: 1: 先创建一个Maven 项目: 选择跳过骨架: 因为要搭建的是 web 项目  所以这个地方选择 war 包; 点击完成 这样就完成 Maven项目的搭建: 接下俩 先把 Mav ...

  6. [Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面

    引言 查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框 在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...

  7. iOS 在工程内部创建一个静态库target

    当你在开发项目的时候需要把公用的东西打包出来,其他项目方便使用的时候,打包成静态库是你的最优选择,在工程内部开发的时候新建一个target进行静态库的开发可以使你的开发调试更加方便而不是单独新建一个工 ...

  8. Eclipse创建一个mybatis工程实现连接数据库查询

    Eclipse上创建第一mybatis工程实现数据库查询 步骤: 1.创建一个java工程 2.创建lib文件夹,加入mybatis核心包.依赖包.数据驱动包.并为jar包添加路径 3.创建resou ...

  9. Eclipse创建一个Maven Web项目

    在这篇文章中,我们将演示如何在Eclipse IDE中使用maven创建一个动态Web项目. 使用的工具和技术 - Eclipse Jee Oxygen Maven 3.3.3 JavaSE 1.8 ...

随机推荐

  1. JS去除对象或数组中的空值('',null,undefined,[],{})

    javascript去掉对象或数组中的'',null,undefined,[],{}.思路就是创建一个新的空对象,然后对传入的对象进行遍历,只把符合条件的属性返回,保留有效值,然后就相当于把空值去掉了 ...

  2. C++之数组转换

    题目如下: 这道题经过好久的思考也没找到能一次性输入两组数的方法,只能一次性处理一组数,所以就把代码放上来,欢迎交流留言一起讨论可以放两组数的方法~(QQ 841587906) 1 #include ...

  3. Oracle中创建DB LINK

    当用户要跨本地数据库,访问另外一个数据库表中的数据时,本地数据库中必须创建了远程数据库的dblink,通过dblink本地数据库可以像访问本地数据库一样访问远程数据库表中的数据.下面讲介绍如何在本地数 ...

  4. my37_MGR流控对数据库性能的影响以及MGR与主从的性能对比

    mysql> show variables like 'group_replication_flow_control_applier_threshold'; +----------------- ...

  5. Mycat的事务异常：Caused by: java.sql.SQLException: Transaction error, need to rollback.Distributed transaction is disabled!

    工作中踩到的一个坑 ,一个报错,导致整个服务不能用.工程部署四个节点,请求是按轮询机制分发的,所以请求四次报错,整个系统瘫痪.记录下 . 项目环境:spring +Mybaties +mycat +D ...

  6. java中的迭代器的含义

    可迭代是Java集合框架下的所有集合类的一种共性,也就是把集合中的所有元素遍历一遍.迭代的过程需要依赖一个迭代器对象,那么什么是迭代器呢? 迭代器(Iterator)模式,又叫做游标模式,它的含义是, ...

  7. 【C/C++】散列/算法笔记4.2

    先说一下我自己的理解. 我先给你N组数据,这个N组里可能有重复的! 然后我们先统计好了N组里面的独立的每个对应的出现了几次(相当于map,然后每项属性有出现了多少次的),用的是数组下标对应 现在我们给 ...

  8. Linux目录终章，单用户模式修改密码、环境变量、第三方软件安装

    目录 今日内容概要 内容详细 解析映射文件 磁盘挂载文件 开机加载脚本 系统启动级别 使用单用户模式修改密码 变量加载文件 登录提示信息 第三方软件安装目录(编译安装目录) 系统日志目录 保存系统运行 ...

  9. Docker从入门到精通（三）——概念与执行流程

    前面我们大概介绍了docker是什么以及如何安装docker,但是对里面出现的一些名词,可能大家还不熟悉,这篇文章就来为大家解惑. 1.容器化平台 Docker 是提供应用打包,部署与运行应用的容器化 ...

  10. CTF 自动拼图

    忘记在哪个群里面看见有师傅说过这样一句加,百度搜索"CTF拼图脚本,有惊喜". 在做JUSTCTF的题时候,看到一道拼图题.就想着试一试. 先百度搜了,看到了fjh1997师傅的一 ...