div+css实现自适应响应式价格套餐列表选择代码
代码语言:html
所属分类:响应式
代码描述:div+css实现自适应响应式价格套餐列表选择代码
代码标签: div css 自适应 响应式 价格 套餐 列表 选择 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;800&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Noto Sans JP", sans-serif; min-height: 100vh; display: grid; place-items: center; } ul { list-style: none; padding: 0; margin: 0; } ul li + li { margin-top: 0.375rem; } a { text-decoration: none; } section { padding: 3rem 0; max-width: min(87.5rem, 90%); margin: 0 auto; text-align: center; width: 100%; } section h2 { font-size: 1.8rem; text-transform: capitalize; margin-bottom: 1.563rem; color: #1b1b1b; } section p { font-size: 1rem; max-width: 50rem; margin-inline: auto; color: #1b1b1b; } section .pricing-cards { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.8em; margin-top: 5em; } section .pricing-card { flex: 0 1 18.75rem; background: #fff; text-align: center; padding: 2.5em 2em; border-radius: 0.625rem; position: relative; cursor: pointer; } section .pricing-card li { text-transform: capitalize; font-size: 1rem; } section .pricing-card .ribbon { position: absolute; width: 2.5rem; height: 6.875rem; background: #b62828; top: -0.625rem; left: 1.563rem; transition: opacity 0.3s ease-in; visibility: hidden; opacity: 0; } section .pricing-card .ribbon > div { transform: rotate(-90deg); color: #fff; text-transform: uppercase; font-weight: bold; margin-top: 0.625rem; margin-bottom: 0.625rem; } section .pricing-card .ribbon svg { width: 0.625rem; color: #1b1b1b; } section .pricing-card .ribbon::before { content: ""; position: absolute; top: 0; right: -0.563rem; border-left: 0.313rem solid #b62828; border-right: 0.313rem solid transparent; border-top: 0.313rem solid transparent; border-bottom: 0.313rem solid #b62828; } section .pricing-card .ribbon::after { content: ""; position: absolute; bottom: -0.063rem; left: 0; border-left: 1.25rem solid transparent; border-right: 1.25rem solid transparent; border-top: 1.25rem solid transparent; border-bottom: 1.25rem solid #1b1b1b; } section .pricing-card hr { display: block; width: 35%; margin: 0 auto; margin-top: 1.875rem; margin-bottom: 1.563rem; visibility: visible; } section .pricing-card hr.first { background: #d6d4d3; height: 0.156rem; border: none; } section .pricing-card hr.second { background: #1b1b1b; height: 0.25rem; border: none; } section .pricing-card h3 { color: #1b1b1b; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.063rem; } section .pricing-card .card-price { display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: bold; color: #1b1b1b; margin: 1.563rem 0; } section .pricing-card .card-price span { color: #1b1b1b; font-size: 1.1rem; margin-right: 0.625rem; } section .pricing-card .card-btn { background: #d6d4d3; color: #1b1b1b; text-transform: uppercase; font-weight: bold; font-size: 0.9rem; padding: 0.5rem 1.875rem; display: inline-block; transition: opacity 0.3s ease-in; visibility: hidden; opacity: 0; } section .pricing-card.active { background: #1b1b1b; color: #a3a3a3; } section .pricing-card.active li { font-size: 1.063rem; } section .pricing-card.active .ribbon { opacity: 1; visibility: visible; } section .pricing-card.active:hover .card-btn { background: #fff; } section .pricing-card.active hr { opacity: 0; margin: 0; visibility: hidden; } section .pricing-card.active h3 { color: #d6d4d3; } section .pricing-card.active .card-price span { color: #d6d4d3; } section .pricing-card.active .card-price { color: #fff; } section .pricing-card.active .card-btn { background: #d6d4d3; color: #1b1b1b; opacity: 1; margin-top: 2.813rem; visibilit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0