Html5+CSS3打造用户登陆界面

来源:设计前沿收集 作者:sunnycha 时间:2017-12-25

本案例的知识点主要3个方面,一个是html5的结构,一个是CSS3样式,一个是页面居中的定位。

1.html5中的属性(placeholder)实现文本框的提示信息,required属性设置文本框信息是必填的。

2. CSS3的属性线性渐变(linear-gradient)实现页面(body)区域的背景色。

3.通过绝对定位(position:absolute)和CSS3中的变形(transform)实现div的页面居中定位。

案例的效果如下:

网站前端技术干货之Html5+CSS3实现用户登陆界面

网页login.html的代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

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

</head>

<body>

<div class="login1">

<h1>后台管理登陆</h1>

<div>

<form>

<p>

<input type="text" placeholder="请输入登录帐号" required="required"/>

</p>

<p>

<input type="password" placeholder="请输入登录密码" required="required"/>

</p>

<p>

<button type="submit">登陆</button>

</p>

</form>

</div>

</div>

</body>

</html>

外部样式文件page.css的代码如下:

网站前端技术干货之Html5+CSS3实现用户登陆界面

网站前端技术干货之Html5+CSS3实现用户登陆界面

网站前端技术干货之Html5+CSS3实现用户登陆界面