一.效果图
二、.
三、源码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<title>登陆框</title>
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
}
#login{
margin: 100px auto;
width: 300px;
height: 300px;
background-color: #66ffff;
border-radius: 10px;
text-align: center;
}
#login:before{/*头部颜色变换样式，只是显示样式，不是实际内容，使用伪类*/
content: ‘‘;/*激活伪类*/
display: block;/*变为块级元素，才能显示出来*/
width: 100%;
height: 10px;
background-image: -webkit-linear-gradient(left,#390 0%,#390 20%,#60f 20%,#60f 40%,#3cf 40%,#3cf 60%,#f30 60%,#f30 80%,#fc3 80%,#fc3 100%);/* -webkit: 使用谷歌内核 -linear-gradient：颜色渐变属性，css3新属性只适用于谷歌内核 */
border-radius: 10px 10px 0 0;
}
#login h1{
color: #096;
}
#login input{
width: 240px;
height: 40px;
margin-bottom: 30px;
border-radius: 5px;
}
.text{
border: 1px solid #333;
text-indent: 20px;/* 缩进 */
}
.submit{
border: none;/*清除边框样式*/
background-color: #2290de;
}
</style>
</head>
<body>
<div id="login">
<h1>Login</h1>
<input type="text" class="text" placeholder="请输入用户名"><!-- placeholder 文本提示 -->
<input type="password" class="text" placeholder="请输入密码">
<input type="submit" class="submit">
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/Liuxingtao/p/10313971.html
时间： 2024-10-03 18:35:26