html精美登录界面源码
时间: 2023-06-07 17:02:18 浏览: 140
为了制作一个精美的登录界面,我们需要使用HTML语言来设计页面布局和样式。下面是一个简单的HTML登录界面源码。
<!DOCTYPE html>
<html>
<head>
<title>登录界面</title>
<style>
body{
background-color: #f5f5f5;
font-family: Arial, Helvetica, sans-serif;
}
.container{
margin: 200px auto;
width: 400px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
border-radius: 6px;
text-align: center;
}
h1{
color: #333;
padding-top: 30px;
}
input[type="text"], input[type="password"]{
padding: 10px 20px;
margin: 20px 0px;
width: 80%;
border-radius: 20px;
border: none;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
input[type="submit"]{
background-color: #333;
color: #fff;
padding: 10px 20px;
margin: 20px 0px;
border: none;
border-radius: 20px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>登录</h1>
<form>
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
以上代码定义了一个带有背景颜色和阴影效果的容器,用于放置登录表单。h1标签用于显示标题,而form标签包含了输入框和提交按钮。输入框使用了圆角边框和阴影效果,可以让表单更加美观。提交按钮使用了深色背景和浅色字体,提高了可读性。
综上所述,通过这样的HTML登录界面源码的设计,可以制作出一个简单而又精美的登录界面,提高用户体验。