表单登录css样式_使用CSS3简化一个光滑的登录表单

最新推荐文章于 2024-06-11 11:30:38 发布

daique1908

最新推荐文章于 2024-06-11 11:30:38 发布

阅读量2.1k

点赞数

文章标签： html python css js java ViewUI

表单登录css样式

让我们使用基本HTML5创建一个最小巧的登录表单，然后使用一些CSS3技术对其进行增强。是时候将一些简单的元素变成美丽的东西了。

寻找捷径？

如果您想为自己的网站提供一些漂亮CSS3表单，并且不想自己创建它们，那么Envato Market上的CSS3 Form Pack不会出错。仅需$ 5，您即可：

33种登录表单样式
66种搜索表单样式
12种联系表单样式
具有文本框，文本区域，单选按钮，复选框，选择框样式的一般形式
每种形式的各种颜色样式

难怪它是Envato市场上最畅销CSS3表单项之一。

介绍

Web表单是网站设计不可或缺的一部分。无论目的如何，表单都旨在成为用户输入值和提交数据的简单方法。有了HTML5和CSS3，我们可以创建直观易用且外观吸引人的表单。

该设计

我认为网页设计应该干净高效。我们将要编码的表单设计遵循这些原则，仅包括三个元素：用户名输入，密码输入和提交输入。由于标记非常简单，因此当我们将标记编码为HTML和CSS时，它可以提供更大的灵活性。

这是设计中我们需要记住的一些元素：

渐变色
内心的阴影
不透明边界
文字阴影
占位符文字

大多数元素都是CSS样式，但是我们也会检查placeholder属性，因为这将向我们的用户建议他们应该输入哪种数据。

步骤1：基础HTML和CSS结构

让我们首先创建一个带有表单和三个输入的干净HTML5模板：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>slick Login</title>
	<meta name="description" content="slick Login">
	<meta name="author" content="Webdesigntuts+">
</head>

<body>
	<form>
		<input type="text" name="username">
		<input type="password" name="password">
		<input type="submit" value="Log In">
	</form>
</body>
	
</html>

现在，我们没有什么特别之处，只有一个表格，三个输入和一个空白文档。让我们创建一个名为style.cssCSS文件，并将其链接回我们HTML页面：

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

请记住，CSS文件当前位于我们的主目录中。如果选择将CSS文件放在另一个文件夹（例如文件夹'css'）中 ，请确保使用正确的路径。

在将自己的样式添加到CSS文件之前，从干净的表盘开始一直是一个好习惯。我们将从Eric Meyer的CSS Reset开始样式，该样式会删除默认样式，并允许我们在任何浏览器中从同一点构建规则。

让我们从为登录页面定义字体和背景渐变开始。在CSS重置后插入以下代码：

body {
	font-family: sans-serif;
	
	background-color: #323B55;
	background-image: -webkit-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -moz-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -o-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -ms-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: linear-gradient(bottom, #323B55 0%, #424F71 100%);
}

现在，我们已经添加了这段代码，页面现在应该具有很酷的线性渐变背景。渐变从颜色为＃323B55的页面底部（0％）开始，到颜色为＃424F71的页面顶部（100％）结束。万一从不支持渐变的浏览器查看页面，则声明一个background-color至关重要，我将它设置为与渐变相同的颜色（0％）。 CSS3渐变的妙处在于您可以添加许多“色标”，例如，另一种颜色更改为25％。在body标签中添加的最后一件事是font-family ，我决定使用Sans Serif类型。

现在我们有了基础，是时候开始添加更多样式了！

步骤2：设置登录表单的样式

在为登录表单启动CSS样式之前，我们需要向HTML文档中添加一些内容。首先，首先在表单中添加一个id ，我们将其称为'slick-login' 。接下来，在每个输入标签中添加一个placeholder属性。到目前为止，这是HTML页面的外观：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>slick Login</title>
	<meta name="description" content="slick Login">
	<meta name="author" content="Webdesigntuts+">
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
	<form id="slick-login">
		<input type="text" name="username" placeholder="me@tutsplus.com">
		<input type="password" name="password" placeholder="password">
		<input type="submit" value="Log In">
	</form>
</body>

</html>

HTML5输入占位符属性是对输入标签的重要补充。代替使用用户必须替换的输入值， placeholder属性使我们可以显示帮助文本，并在用户开始在字段中键入内容后消失。它尚未得到广泛支持，因此应谨慎使用。举例来说， placeholder属性在浏览器中不起作用，用户将不知道要输入什么值。稍后我们将介绍一种后备技术，但是占位符文本应作为建议而不是标记输入也不是一文不值。

现在我们有了更新HTML页面，我们可以开始在登录表单中添加一些样式了。这是我们之前声明的表单idCSS。

#slick-login {
	width: 220px;
	height: 155px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -110px;
	margin-top: -75px;
}

对于此登录表单，我决

最低0.47元/天解锁文章

daique1908

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单登录css样式_使用CSS3简化一个光滑的登录表单

让我们使用基本HTML5创建一个最小巧的登录表单，然后使用一些CSS3技术对其进行增强。是时候将一些简单的元素变成美丽的东西了。寻找捷径？如果您想为自己的网站提供一些漂亮CSS3表单，并且不想自己创建它们，那么Envato Market上的CSS3 Form Pack不会出错。仅需$ 5，您即可： 33种登录表单样式 66种搜索表单样式 12种联系表单样式具有...
复制链接

扫一扫