414day（版心右侧的user模块）

最新推荐文章于 2024-08-08 08:56:38 发布

原创最新推荐文章于 2024-08-08 08:56:38 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了京东网页版中用户模块的设计与实现，包括HTML结构、CSS样式及交互效果，如登录、注册链接和新人福利展示等。

《2018年11月22日》【连续414天】

标题：版心右侧的user模块；
内容：

<div class="user">
	 				<div class="user-info">
	 					Hi~欢迎来到京东！<br>
						<a href="#">登录</a>
						<a href="#">注册</a>
						<a href="#" class="info-img">
							<img src="images/no_login.jpg" alt="">
						</a>
	 				</div>
	 				<div class="user-profit">
	 					<a href="#">新人福利</a>
	 					<a href="#">PLUS</a>
	 				</div>
	 			</div>

.user {
	height: 90px;
	background-color: pink;
	padding: 20px 15px 0;
}
.user-info {
	padding-left: 54px;
	height: 40px;
	font-size: 12px;
	color: #747474;
	line-height: 22px;
	position: relative;
}
.user-info a{
	font-size: 12px;
	color: #747474;
}
.user-info a:hover{
	color: #f10215;
}
.info-img {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	overflow: hidden;
}
.info-img img {
	width: 100%;
	height: auto;
}
.user-profit {
	margin-top: 24px;
}
.user-profit a {
	width: 68px;
	height: 20px;
	border: 2px solid #f10215;
	display: inline-block;
	font-size: 12px;
	color: #f10215;
	text-align: center;
	line-height: 20px;
	margin-right: 4px;
}
.user-profit a:hover {
	background-color: #f10215;
	color:  #fff;
}