css+div布局实现套餐产品价格卡片对比效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div布局实现套餐产品价格卡片对比效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,700'> <style> * { margin: 0; padding: 0; } body { font-size: 15px; background-color: #f4f4f4; } .main-container { text-align: center; } .card-container { width: 75%; margin: 0 auto; padding: 50px 0; display: flex; justify-content: space-between; } .card { text-align: center; font-family: Lato; } .card:hover .card-header { background-color: #ed145b; } .card-header { font-weight: bold; background-color: #5a5a5a; color: #f4f4f4; padding: 0 30px; padding-top: 15px; transition: background-color 0.2s ease-in-out; } .card-header .card-name { cursor: default; } .dollar { font-size: 1.333333em; position: relative; top: -2px; } .amount { font-size: 3.333333em; } .card-time { margin-bottom: 5px; } .card-name { text-transform: uppercase; background-color: #f4f4f4; color: #5a5a5a; transform: translatey(50%); cursor: default; } .card-body { background-color: white; padding: 0 30px; padding-bottom: 40px; padding-top: 40px; } .card-body .button { color: #f4f4f4; background-color: #ed145b; margin-top: 30px; } .card-feature { color: #5a5a5a; line-height: 2.5em; } .button { text-transform: uppercase; font-weight: bold; line-height: 40px; width: 160px; height: 40px; border-radius: 20px; cursor: pointer; } </style> </head> <body> <div class="main-container"> <div class="card-container"> <div class="card"> <div class="card-header"> <div class="card-price"> <div class="card-amount"> <span class="dollar">$</span> <span class="amount">19</span> </div> <div class="card-time">per month</div> </div> <div class="card-name button">standard</div> </div> <div class="card-body"> <div class="card-feature">5 Projects</div> <div class="card-feature">200 MB Storage</div> <div class="card-feature">Notification settings</div> <div class="card-feature">Password protection</div> <div class="button">buy now</div> </div> </div> <div class="card"> <div class="card-header"> <div class="card-price"> <div cl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0