背景经典页面布局
代码语言:html
所属分类:布局界面
代码描述:背景经典页面布局
代码标签: 布局
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Montserrat:300&display=swap"); * { font-family: 'Montserrat', serif; box-sizing: border-box; } body { width: 100vw; height: 100vh; margin: 0; display: flex; flex-direction: column; justify-content: start; align-items: center; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .navbar { position: absolute; top: 0; left: 0; display: flex; width: 100vw; min-height: 4rem; padding: 0 200px; justify-content: space-between; align-items: center; overflow: auto; background: white; z-index: 1000; } @media (max-width: 920px) { .navbar { flex-direction: column; align-items: flex-start; padding: 0; width: 100%; box-shadow: 0 0 1px gray; } } .navbar .row { display: flex; justify-content: space-between; align-items: center; } @media (max-width: 920px) { .navbar .row { width: 100%; } } .navbar button { cursor: pointer; background: white; border: none; outline: none; font-size: 1rem; margin-right: 2rem; } @media (max-width: 920px) { .navbar button { height: 4rem; display: flex; flex-direction: center; justify-content: center; align-items: center; } } .navbar .brand { position: relative; transform-origin: center; height: 4rem; padding-right: 0.625rem; background: white; } .navbar .brand:hover::before { animation: 1s spin; } .navbar .brand::before { position: absolute; content: ""; top: 1.375rem; right: 0; width: 2px; height: 1.25rem; border-left: solid 2px #CF450B; } .navbar .menu-btn { margin-right: 0; padding-right: 0.625rem; } @media (min-width: 920px) { .navbar .menu-btn { display: none; } } .navbar .tab { color: gray; } .navbar .tab:nth-last-child(1) { margin-right: 0; } @media (max-width: 920px) { .navbar .tabs { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .navbar .tabs.hidden { display: none; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: .8; } } .container { width: 100%; padding: 3rem 200px 0 200px; display: flex; justify-content: space-between; margin-top: 5rem; } @media (max-width: 920px) { .container { padding-left: 0; padding-right: 0; } } .carousel-labels { position: relative; } .carousel-labels > .carousel-label { position: absolute; left: 0; top: 360px; transform: translateY(-100%); cursor: pointer; width: 325px; padding: 0.25rem 1.25rem; background: white; color: #222; border-left: solid 5px #CF450B; font-size: 2.75rem; z-index: 900; opacity: 0; } @media (max-width: 640px) { .carousel-labels > .carousel-label { top: 56.25vw; width: 100vw; font-size: 1.25rem; } } .carousel-labels > .carousel-label.active { opacity: .8; animation: 1s fade-in ease forwards; } .carousel-container { width: 640px; max-width: 100%; display: flex; flex-direction: column; justify-content: space-between; } @media (max-width: 640px) { .carousel-container { width: 100vw; } } .carousel-container > .carousel { position: relative; width: 640px; height: 360px; overflow: hidden; } @media (max-width: 640px) { .carousel-container > .carousel { height: 56.25vw; width: 100vw; } } .carousel-container > .carousel > .carousel-slider { display: flex; width: 5120px; height: 360px; transform: translateX(-640px); } @media (max-width: 640px) { .carousel-container > .carousel > .carousel-slider { height: 56.25vw; width: 800vw; transform: translateX(-100vw); } } .carousel-container > .carousel > .carousel-slider > .carousel-item { color: white; font-size: 2rem; width: 640px; height: 360px; max-width: 100vw; } @media (max-width: 640px) { .carousel-container > .carousel > .carousel-slider > .carousel-item { width: 100vw; height: 56.25vw; } } .carousel-container .carousel-description { margin-top: 1.25rem; height: 8rem; line-height: 1.5rem; overflow: hidden; color: gray; } .carousel-container .carousel-btns { width: 640px; max-width: 100%; text-align: right; margin-top: 1.25rem; padding: 0; } .carousel-container .carousel-btns > button { width: 5.5rem; height: 2.5rem; font-size: 1.25rem; background: white; border: none; outline: none; cursor: pointer; border: solid 1px #AAAAAA; } </style> </head> <body translate="no"> <div class="navbar"> <div class="row"> <button class="brand"> <b>BEIJING</b> </button> <button class="menu-btn"> <svg t="1583388234559" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2279" width="16" height="16"><path d="M128 213.34016l768 0q17.67424 0 30.16704 12.4928t12.4928 30.16704-12.4928 30.16704-30.16704 12.4928l-768 0q-17.67424 0-30.16704-12.4928t-12.4928-30.16704 12.4928-30.16704 30.16704-12.4928zM128 725.34016l768 0q17.67424 0 30.16704 12.4928t12.4928 30.16704-12.4928 30.16704-30.16704 12.4928l-768 0q-17.67424 0-30.16704-12.4928t-12.4928-30.16704 12.4928-30.16704 30.16704-12.4928zM128 469.34016l768 0q17.67424 0 30.16704 12.4928t12.4928 30.16704-12.4928 30.16704-30.16704 12.4928l-768 0q-17.67424 0-30.16704-12.4928t-12.4928-30.16704 12.4928-30.16704 30.16704-12.4928z" p-id="2280" fill="#40403F"></path></svg> </button> </div> <div class="tabs"> <button class="tab" data-text="About"> ABOUT </button> <button class="tab" data-text="Reviews"> REVIEWS </button> <button class="tab" data-text="Book Your Trip"> BOOK YOUR TRIP </button> </div> </div> <div class="container"> <div class="carousel-labels"> <label class="carousel-label active" for="Forbidden City">Forbidden City</label> <label class="carousel-label" for="Jingshan Park">Jingshan Park</label> <label class="carousel-label" for="Temple of Heaven">Temple of Heaven&l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0