返回 CSS3设计一...... 登陆

CSS3设计一个简洁的用户登录界面

phpcn_u203072 2018-05-17 09:28:02 1366

CSS3设计一个简洁的用户登录界面,可作为网站后台、用户中心的登录模板来使用,运用了CSS3技术,默认支持PC端、移动设备、PAD等设备,谈不上漂亮,不过挺简洁,而且修饰为圆滑风格,还带阴影的立体感,这种风格若使用传统的CSS技术,需要借助图片来实现,而在CSS3中,实现这些样式都挺方便的。

<!DOCTYPE html>
<head>
<title>CSS3登录界面   </title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;outline: none;
}
body {
	background: #4E0085;
}
form {
	border: 1px solid #270644;
	width: 250px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	background:  -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));
	margin:50px auto;
	padding: 20px;
	-moz-box-shadow:0px -5px 300px #270644;
	-webkit-box-shadow:0px -5px 300px #270644;
}
label {
	font-size: 12px;
	font-family: arial, sans-serif;
	list-style-type: none;
	color: #fff;
	text-shadow: #000 1px 1px;
	margin-bottom: 10px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: block;
}
input {
  -webkit-transition-property: -webkit-box-shadow, background;
  -webkit-transition-duration: 0.25s;
  	padding: 6px;
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
	border-top: 1px solid #ad64e0;
	-moz-box-shadow: 0px 0px 2px #000;
	-webkit-box-shadow: 0px 0px 2px #000;
	margin-bottom: 10px;
	background: #8a33c6;
	width: 230px;
}
input.submit {
  -webkit-transition-property: -webkit-box-shadow, background;
  -webkit-transition-duration: 0.25s;
	width: 100px;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
	background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
	color: #fff;
	text-transform: uppercase;
	text-shadow: #000 1px 1px;
	border-top: 1px solid #ad64e0;
	margin-top: 10px;
}
input.submit:hover {
	-webkit-box-shadow: 0px 0px 2px #000;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));
	background:  -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);
}
</style>
</head>
<body>
<form action="">
		<label>用户名:</label>
			<input type="text" name="username" />
		<label>密  码:</label>
			<input type="password" name="password"  />
			<input type="submit" value="登录" name="submit" class="submit" />
</form>
</body>
</html>

手记引用自:http://www.codesc.net/jscss/3289.shtml

最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(1)我要回复

  • 光明若可比

    光明若可比2018-06-11 15:52:38

    <pre class="brush:php;toolbar:false"><br/></pre><p>&lt;!DOCTYPE html&gt;</p><p>&lt;head&gt;</p><p>&lt;title&gt;CSS3登录界面 &nbsp; &lt;/title&gt;</p><p>&lt;style type=&quot;text/css&quot;&gt;</p><p>* {</p><p>&nbsp; &nbsp; margin: 0px;</p><p>&nbsp; &nbsp; padding: 0px;outline: none;</p><p>}</p><p>body {</p><p>&nbsp; &nbsp; background: #4E0085;</p><p>}</p><p>form {</p><p>&nbsp; &nbsp; border: 1px solid #270644;</p><p>&nbsp; &nbsp; width: 250px;</p><p>&nbsp; &nbsp; -moz-border-radius: 20px;</p><p>&nbsp; &nbsp; -webkit-border-radius: 20px;</p><p>&nbsp; &nbsp; background: &nbsp;-moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);</p><p>&nbsp; &nbsp; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));</p><p>&nbsp; &nbsp; margin:50px auto;</p><p>&nbsp; &nbsp; padding: 20px;</p><p>&nbsp; &nbsp; -moz-box-shadow:0px -5px 300px #270644;</p><p>&nbsp; &nbsp; -webkit-box-shadow:0px -5px 300px #270644;</p><p>}</p><p>label {</p><p>&nbsp; &nbsp; font-size: 12px;</p><p>&nbsp; &nbsp; font-family: arial, sans-serif;</p><p>&nbsp; &nbsp; list-style-type: none;</p><p>&nbsp; &nbsp; color: #fff;</p><p>&nbsp; &nbsp; text-shadow: #000 1px 1px;</p><p>&nbsp; &nbsp; margin-bottom: 10px;</p><p>&nbsp; &nbsp; font-weight: bold;</p><p>&nbsp; &nbsp; letter-spacing: 1px;</p><p>&nbsp; &nbsp; text-transform: uppercase;</p><p>&nbsp; &nbsp; display: block;</p><p>}</p><p>input {</p><p>&nbsp; -webkit-transition-property: -webkit-box-shadow, background;</p><p>&nbsp; -webkit-transition-duration: 0.25s;</p><p>&nbsp; &nbsp; &nbsp; padding: 6px;</p><p>&nbsp; &nbsp; border-bottom: 0px;</p><p>&nbsp; &nbsp; border-left: 0px;</p><p>&nbsp; &nbsp; border-right: 0px;</p><p>&nbsp; &nbsp; border-top: 1px solid #ad64e0;</p><p>&nbsp; &nbsp; -moz-box-shadow: 0px 0px 2px #000;</p><p>&nbsp; &nbsp; -webkit-box-shadow: 0px 0px 2px #000;</p><p>&nbsp; &nbsp; margin-bottom: 10px;</p><p>&nbsp; &nbsp; background: #8a33c6;</p><p>&nbsp; &nbsp; width: 230px;</p><p>}</p><p>input.submit {</p><p>&nbsp; -webkit-transition-property: -webkit-box-shadow, background;</p><p>&nbsp; -webkit-transition-duration: 0.25s;</p><p>&nbsp; &nbsp; width: 100px;</p><p>&nbsp; &nbsp; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));</p><p>&nbsp; &nbsp; background: &nbsp;-moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);</p><p>&nbsp; &nbsp; color: #fff;</p><p>&nbsp; &nbsp; text-transform: uppercase;</p><p>&nbsp; &nbsp; text-shadow: #000 1px 1px;</p><p>&nbsp; &nbsp; border-top: 1px solid #ad64e0;</p><p>&nbsp; &nbsp; margin-top: 10px;</p><p>}</p><p>input.submit:hover {</p><p>&nbsp; &nbsp; -webkit-box-shadow: 0px 0px 2px #000;</p><p>&nbsp; &nbsp; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));</p><p>&nbsp; &nbsp; background: &nbsp;-moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);</p><p>}</p><p>&lt;/style&gt;</p><p>&lt;/head&gt;</p><p>&lt;body&gt;</p><p>&lt;form action=&quot;&quot;&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;用户名:&lt;/label&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;text&quot; name=&quot;username&quot; /&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;label&gt;密 &nbsp;码:&lt;/label&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;password&quot; name=&quot;password&quot; &nbsp;/&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;submit&quot; value=&quot;登录&quot; name=&quot;submit&quot; class=&quot;submit&quot; /&gt;</p><p>&lt;/form&gt;</p><p>&lt;/body&gt;</p><p>&lt;/html&gt;</p>

  • 取消 回复 发送
  • PHP中文网