HTML+CSS精美漂亮的登录页面

最新推荐文章于 2024-06-16 23:04:02 发布

weixin_74

最新推荐文章于 2024-06-16 23:04:02 发布

阅读量3w

点赞数 83

分类专栏： Html 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/weixin_44727274/article/details/110576172

版权

Html 专栏收录该内容

2 篇文章 2 订阅

订阅专栏

一、先结果图

在这里插入图片描述

二、代码

总结构图（未使用JavaScript）：
未使用js

1、index.html(使用div标签，未使用form标签)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Sign in</title>
		<link rel="stylesheet" type="text/css"href="./css/index.css"/>
		<link rel="stylesheet" type="text/css"href="./css/iconfont.css"/>
	</head>
	<body>
		<div id="login-box">
			<h1>Login</h1>
			<div class="input-box">
				<i class="iconfont">&#xe609;</i>
				
				<input type="text" placeholder="UserName" />
			</div>
			<div class="input-box">
				<i class="iconfont">&#xe605;</i>
				<input type="password" placeholder="UserPassword" />
			</div>
			<button>Sign in</button>
		</div>
		
	</body>
</html>

2、index.css

body{
	background-image: url(../img/桥.jpg);
	background-repeat: no-repeat;
	background-size:100%;
	background-position: 0px -50px;
}
#login-box{
	background-color: #00000068;
	border-radius: 13px;
	text-align: center;
	margin: 0px auto;
	margin-top: 80px;
	width: 350px;
	height: 400px;
}

#login-box h1{
	padding-top: 60px;
	color: #ffffff;
}

#login-box .input-box{
	margin-top: 30px;
}
#login-box .input-box input{
	border: none;
	background: none;
	border-bottom: #FFFFFF 2px solid;
	padding: 5px 10px;
	outline: none;
	color: #FFFFFF;
}

#login-box button{
	line-height:30px;
	margin-top: 30px;
	width: 130px;
	height: 30px;
	border-radius:13px ;
	outline: none;
	border: none;
	background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
	color: #FFFFFF;
}

#login-box button:hover{
	background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
#login-box .input-box i{
	color: #FFFFFF;
}

3、iconfont.css（可在官网自行下载https://www.iconfont.cn/）

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1606872294248'); /* IE9 */
  src: url('iconfont.eot?t=1606872294248#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO8AAsAAAAAB6wAAANvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDFIJ/ATYCJAMMCwgABCAFhG0HNxvGBsiemjxBRAhmg9koBWDBEY/gaezbvN09E2tu9cATkUQo4k2s0cgQGo1MJGn3Ev6hzjw/EOq5GNxK4DwA+R3JcUiuIpdxLk/9seUZAA1Tfy7h3JxCAM/H3P+Lw2nTw3A+UE5zbIy6AOOAAhp7URpggSToDWM3ETTE1QTqDVtEOBbb+yFFAToF4paqSJCSUSgN6aFWqK4YWcQbSFSbnsa9APCafz/+gydSSKoy0PP85no/rPqV+Cs1P/q/2zhFAHM6HYxxZCwChbhRabguPgosilfvCRKa46sVIU3lrgxn+Lxq+IdHEkQ1kNoIZpVg4lciZiTCVJl11StlUI0aPAE+ApLOoT2rlnJzctIzmu5a1mCRbQ+y/H7D6N9tdhQY+hzHG9LfFtv2ytf2MbPjpjlwvDCba5Gj1jtrj/2+5AVvzd3GG2PbsZt9cbtv1Gc9u9Uff/Z2A816YKC4c+b67Md2XfysRY49fXsNoDG+2kNjeiEzHlvg7cSko+dDeHzh+Qfw6P36nWnUoesdCHq2PTeaJhaMXxr258lFW08COVuxcRA6RnV91UmhL34gfr2WLBx6N81l3/Me3eat/uHZJKxO1ipqXLzQM0+s2FwhdiH8JrGyW7Ap2XWzWAGuL8+qT2ePV12vqq2+kDmefRrVtNb+Ims8i+B+1o6rGq+6UVde3SfhXZ08JgstktTSpgrHjoV6+edlT8PIenGkPicrZ13OcSxAtD5MA1TKl+MHeEiejd/w437j88f37qnsZf9qKODnt8xfsq2iQLdkUCvRmfmbmB2Lis8GylxcBmaE4exY4kugyTRT6OdkQru54aYukOhCrcmUIakxBFmtSWTBLkKVBstQrdYe1FvgG9+gAxMvSh3mHZAgtLoCSbNPkLV6iSzYD1Cl2zeo1hrxUO9q5M/YYDrUtLUMSxz70cwWpMo0SpCap4n0XqzoYYml2ZwwiFlMdSO3w5UP+3AUsyn6xDYqHs4JIoxGkCith8NhijRGg1jmjgDn2hKnk1Q9ySHTCKQ5wmASDvNDZmyBqGRUFKHlubTC53thCl2YhDUU9KgHYUyMWj3i5uDqgPQJop0KbuWcmI0UHhxHIARDRSCipMPCMEAhWnWzIEzGOQQG+DRLOJVSpKvAsbwo8n4roB5YMEeKHEX1bRpVAnpCRI1IAAA=') format('woff2'),
  url('iconfont.woff?t=1606872294248') format('woff'),
  url('iconfont.ttf?t=1606872294248') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1606872294248#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-yonghu:before {
  content: "\e609";
}

.icon-mima:before {
  content: "\e605";
}

4、背景图片自取

在这里插入图片描述希望帮到更多的小伙伴~~~~

weixin_74

关注

83
点赞
踩
417

收藏

觉得还不错? 一键收藏
8
评论
HTML+CSS精美漂亮的登录页面

一、先结果图二、代码总结构图（未使用JavaScript）：1、index.html(使用div标签，未使用form标签)<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Sign in</title> <link rel="stylesheet" type="text/css"href="./css/index.css"/>
复制链接

扫一扫