产品服务套餐对比卡片排列效果代码
代码语言:html
所属分类:布局界面
代码描述:产品服务套餐对比卡片排列效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .d-selling-card .d-selling-card-param-item { position: relative; padding-left: 16px; line-height: 24px; font-size: 14px; color: #666; box-sizing: border-box; } .d-selling-card-list { font-size: 0; margin-bottom: -20px } .d-selling-card-list .d-selling-card { margin-bottom: 20px } .d-selling-card { background-color: #FFF; border: 1px solid #E5E5E5; box-sizing: border-box } .d-selling-card .d-selling-card-tit { margin: 0; padding: 0; line-height: 25px; font-size: 18px; color: #333; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .d-selling-card .d-selling-card-hd .d-selling-card-desc { margin: 4px 0 0 } .d-selling-card .d-selling-card-hd .d-selling-card-desc p { line-height: 24px; font-size: 14px; color: #666; overflow: hidden; text-overflow: ellipsis; max-height: 48px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .d-selling-card .d-selling-card-param-item { position: relative; padding-left: 16px; line-height: 24px; font-size: 14px; color: #666; box-sizing: border-box } .d-selling-card .d-selling-card-param-item+.d-selling-card-param-item { margin-top: 8px } .d-selling-card-vertical .d-selling-card-buy { position: relative; padding: 15px 20px 30px; } .d-selling-card-vertical .d-selling-card-button-wrap .c-btn { max-width: 240px; } .d-selling-card .d-selling-card-button-wrap .c-btn-hole { height: 36px; line-height: 34px; color: #00a4ff; } .d-selling-card .d-selling-card-button-wrap .c-btn { min-width: none; width: 100%; } .c-btn { color: #fff; } .c-btn-hole { border: 1px solid #00a4ff; background-color: #fff; color: #00a4ff; line-height: 33px; } .c-btn { height: 35px; min-width: 140px; padding: 0 20px; text-decoration: none; color: #fff; font-size: 14px; line-height: 35px; text-align: center; display: inline-block; cursor: pointer; outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .d-selling-card-vertical .d-selling-card-price-now, .d-selling-card-vertical .d-selling-card-price-origin { display: inline-block; vertical-align: bottom; } .d-selling-card .d-selling-card-price-origin { line-height: 25px; color: #999; } .d-selling-card-vertical .d-selling-card-button-wrap { margin-top: 18px; text-align: center; } .d-selling-card-vertical .d-selling-card-button-wrap { margin-top: 18px; text-align: center; } .d-selling-card-vertical .d-selling-card-buy:before { content: ""; display: block; position: absolute; left: 20px; right: 20px; top: 0; height: 0; border-top: 1px dashed #DDD; } .d-selling-card .d-selling-card-param-item em { padding: 0 4px; font-size: 16px; color: #333; font-weight: 700 } .d-selling-card .d-selling-card-price-num,.d-selling-card .d-selling-card-price-unit { font-size: 14px; vertical-align: bottom } .d-selling-card .d-selling-card-price-now { line-height: 25px; font-size: 0; color: #F06C00 } .d-selling-card .d-selling-card-price-now .d-selling-card-price-num { margin-right: 8px; font-size: 18px; font-weight: 700 } .d-selling-card .d-selling-card-price-origin { line-height: 25px; color: #999 } .d-selling-card .d-selling-card-button-wrap .c-btn { min-width: none; width: 100% } .d-selling-card .d-selling-card-button-wrap .c-btn-hole { height: 36px; line-height: 34px; color: #00a4ff } .d-selling-card .d-selling-card-button-wrap .c-btn-hole:hover { background-color: #00a4ff; color: #fff } .d-selling-card-more { margin-top: 40px; text-align: center } .d-selling-card-more-link { line-height: 20px; font-size: 14px; color: #00a4ff } .d-selling-card-more-link:hover { text-decoration: underline } .d-selling-card-horizontal { position: relative } .d-selling-card-horizontal:after { content: ""; display: block; position: absolute; right: 230px; top: 30px; bottom: 30px; width: 0; border-left: 1px dashed #DDD } .d-selling-card-horizontal .d-selling-card-inner { display: table; table-layout: fixed; width: 100%; box-sizing: border-box } .d-selling-card-horizontal .d-selling-card-main { padding: 30px; display: table-cell; vertical-align: middle } .d-selling-card-horizontal .d-selling-card-bd { margin-top: 20px } .d-selling-card-horizontal .d-selling-card-buy { display: table-cell; vertical-align: middle; padding: 30px; width: 230px; box-sizing: border-box } .d-selling-card-horizontal .d-selling-card-button-wrap { margin-top: 10px } .d-selling-card-vertical .d-selling-card-hd { position: relative; padding: 30px 20px 20px; background-color: #F1F2F5 } .d-selling-card-vertical .d-selling-card-hd:before { content: ""; display: block; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px; background-color: #334966 } .d-selling-card-vertical .d-selling-card-bd { padding: 30px 20px } .d-selling-card-vertical .d-selling-card-buy { position: relative; padding: 15px 20px 30px } .d-selling-card-vertical .d-selling-card-buy:before { content: ""; display: block; position: absolute; left: 20px; right: 20px; top: 0; height: 0; border-top: 1px dashed #DDD } .d-selling-card-vertical .d-selling-card-price { font-size: 0; text-align: center } .d-selling-card-vertical .d-selling-card-price-now,.d-selling-card-vertical .d-selling-card-price-origin { display: inline-block; vertical-align: bottom } .d-selling-card-vertical .d-selling-card-price-now { margin-right: 10px } .d-selling-card-vertical .d-selling-card-button-wrap { margin-top: 18px; text-align: center } .d-selling-card-vertical .d-selling-card-button-wrap .c-btn { max-width: 240px } .d-selling-card-list.item-1 .d-selling-card-horizontal .d-selling-card-param { overflow: hidden } .d-selling-card-list.item-1 .d-selling-card-horizontal .d-selling-card-param-list { margin-right: -82px; margin-bottom: -8px; font-size: 0 } .d-selling-card-list.item-1 .d-selling-card-horizontal .d-selling-card-param-item { margin-bottom: 8px; margin-right: 82px; display: inline-block; vertical-align: top; max-width: calc(100% - 82px) } .d-selling-card-list.item-1 .d-selling-card-horizontal .d-selling-card-param-item+.d-selling-card-param-item { margin-top: 0 } .d-selling-card-list.item-2 .d-selling-card { display: inline-block; vertical-align: top; margin-right: 20px; width: calc((100% - 20px)/ 2) } .d-selling-card-list.item-2 .d-selling-card:last-child { margin-right: 0 } .d-selling-card-list.item-3 .d-selling-card { display: inline-block; vertical-align: top; margin-right: 20px; width: calc((100% - 40px)/ 3) } .d-selling-card-list.item-3 .d-selling-card:nth-child(3n) { margin-right: 0 } .d-selling-card-list.item-4 .d-selling-card { display: inline-block; vertical-align: top; margin-right: 20px; width: calc((100% - 60px)/ 4) } .d-selling-card-list.item-4 .d-selling-card:nth-child(4n) { margin-right: 0 } </style> </head> <body> <div class="d-selling-card-list item-4"> <div class="d-selling-card d-selling-card-vertical"> <div class="d-selling-card-inner"> <div class="d-selling-card-main"> <div class="d-selling-card-hd"> <h3 class="d-selling-card-tit">基础型</h3> </div> <div class="d-selling-card-bd"> <div class="d-selling-card-param" style="height: auto;"> <ul class="d-selling-card-param-list J-pdBuyCardList" style="height: 152px;"> <li class="d-selling-card-param-item"> 1核 CPU(100% CPU 性能) </li> <li class="d-selling-card-param-item"> 1GB 内存 .........完整代码请登录后点击上方下载按钮下载查看
网友评论0