产品服务多品种报价显示效果
代码语言:html
所属分类:布局界面
代码描述:产品服务多品种报价显示效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap"); body { background-color: #f4f4f4; font-family: "Play", sans-serif; } .container { width: 100%; } .packages { margin: 20px; width: 300px; padding-bottom: 1.5em; height: 100%; background-color: #1e2321; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 20px; box-shadow: 0 19px 38px rgba(30, 35, 33, 1), 0 15px 12px rgba(30, 35, 33, 0.2); flex-wrap: wrap; color: #f4f4f4; } h1, h2 { font-size: 2.2em; } .list li { font-size: 20px; list-style: none; border-bottom: 1px solid #f4f4f4; padding-inline-start: 0; border-width: 1px; padding: 10px; } .first { margin-top: 40px; border-top: 1px solid #f4f4f4; } .list { width: 80%; } ol, ul { padding: 0; } .top { display: flex; flex-direction: column; align-items: center; } input, label { display: inline-block; vertical-align: middle; margin: 10px 0; } .button { padding: 10px 30px; text-decoration: none; font-size: 1.4em; margin: 15px 15px; border-radius: 50px; color: #f4f4f4; transition: all 0.3s ease 0s; } .button:hover { transform: scale(1.2); } .button1 { background-color: #00cc99; box-shadow: 0 0 10px 0 #00cc99 inset, 0 0 20px 2px #00cc99; } .button2 { background-color: #ff007c; box-shadow: 0 0 10px 0 #ff007c inset, 0 0 20px 2px #ff007c; } .button3 { background-color: #ffae42; box-shadow: 0 0 10px 0 #ffae42 inset, 0 0 20px 2px #ffae42; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #1e2321; -webkit-transition: 0.4s; box-shadow: 2px 6px 25px #1e2321; transform: translate(0px, 0px); transition: 0.6s ease transform, 0.6s box-shadow; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: 0.4s; transition: 0.4s; } input:checked + .slider { background-color: #50bfe6; } input:focus + .slider { box-shadow: 0 0 1px #50bfe6; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .package-container { display: flex; align-items: center; justi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0