<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
<style> | |
* { | |
margin: 0; | |
padding: 0; | |
text-decoration: none; | |
} | |
.wrap { | |
width: 190px; | |
height: 100px; | |
margin: 50px auto; | |
background-color:greenyellow; | |
/* padding-left: 12px; | |
padding-top: 15px; | |
padding-bottom: 12px; | |
padding-right: 20px; */ | |
padding: 16px 20px 12px 15px; | |
box-sizing: border-box; | |
position: relative; | |
} | |
.wrap .top img { | |
float: left; | |
border-radius: 50%; | |
width: 40px; | |
height: 40px; | |
padding-right: 12px; | |
} | |
.a1 { | |
font-size: 13px; | |
line-height: 17px; | |
} | |
.a2 { | |
font-size: 12px; | |
line-height: 20px; | |
} | |
.a3 { | |
display: block; | |
width: 70px; | |
height: 25px; | |
font-size: 12px; | |
background-color: #e7201d; | |
line-height: 25px; | |
text-align: center; | |
color: white; | |
border-radius: 25px; | |
position: absolute; | |
} | |
.a4 { | |
display: block; | |
width: 70px; | |
height: 25px; | |
font-size: 12px; | |
background-color: #363634; | |
line-height: 25px; | |
text-align: center; | |
color: #f5ed87; | |
border-radius: 25px; | |
position: absolute; | |
left: 105px; | |
} | |
.wrap .bot { | |
padding-top: 12px; | |
text-align: center; | |
} | |
/* .wrap .bot{ | |
float: left; | |
position: absolute; | |
} */ | |
</style> | |
</head> | |
<body> | |
<div class="wrap"> | |
<!-- 上 --> | |
<div class="top"> | |
<img src="./images/logo.png" alt=""> | |
<div class="a5"> | |
<p class="a1">Hi~欢迎逛京东!</p> | |
<a class="a2">登录 | 注册</a> | |
</div> | |
</div> | |
<!-- 下 --> | |
<div class="bot"> | |
<a class="a3" href="#">新人福利</a> | |
<a class="a4" href="#">PLUS会员</a> | |
</div> | |
</div> | |
</body> | |
</html> |
position: relative;
最新推荐文章于 2023-08-14 14:07:19 发布