css布局实现一张飞机票效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一张飞机票效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.min.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"); body, p, h1 { margin: 0; padding: 0; font-family: "Open Sans", sans-serif; } .container { background: #e0e2e8; position: relative; width: 100%; height: 100vh; } .container .ticket { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .container .basic { display: none; } .airline { display: block; height: 575px; width: 270px; box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3); border-radius: 25px; z-index: 3; } .airline .top { height: 220px; background: #ffcc05; border-top-right-radius: 25px; border-top-left-radius: 25px; } .airline .top h1 { text-transform: uppercase; font-size: 12px; letter-spacing: 2; text-align: center; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); } .airline .bottom { height: 355px; background: #fff; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px; } .top .big { position: absolute; top: 100px; font-size: 65px; font-weight: 700; line-height: 0.8; } .top .big .from { color: #ffcc05; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; } .top .big .to { position: absolute; left: 32px; font-size: 35px; display: flex; flex-direction: row; align-items: center; } .top .big .to i { margin-top: 5px; margin-right: 10px; font-size: 15px; } .top--side { position: absolute; right: 35px; top: 110px; text-align: right; } .top--side i { font-size: 25px; margin-bottom: 18px; } .top--side p { font-size: 10px; font-weight: 700; } .top--side p + p { margin-bottom: 8px; } .bottom p { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; } .bottom p span { font-weight: 400; font-size: 11px; color: #6c6c6c; } .bottom .column { margin: 0 auto; width: 80%; padding: 2rem 0; } .bottom .row { display: flex; justify-content: space-between; } .bottom .row--right { text-align: right; } .bottom .row--center { text-align: center; } .bottom .row-2 { margin: 30px 0 60px 0; position: relative; } .bottom .row-2::after { content: ""; position: absolute; width: 100%; bottom: -30px; left: 0; background: #000; height: 1px; } .bottom .bar--code { height: 50px; widt.........完整代码请登录后点击上方下载按钮下载查看
网友评论0