自适应视频分享类网站布局效果
代码语言:html
所属分类:布局界面
代码描述:自适应视频分享类网站布局效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/normalize.css"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&display=swap"); :root { --body-font: "Manrope", sans-serif; --body-color: #b3b3b3; --body-bg-color: #f2f2f2; --theme-bg-color: #fafafa; --border-color: #efefef; --logo-color: #f13a2f; --main-color: #808080; --header-bg-color: #fff; } .dark-mode { --body-bg-color: #1e222b; --theme-bg-color: #212835; --border-color: #393f50; --header-bg-color: #323a4b; --main-color: #fefffd; --body-color: #dddee0; } * { outline: none; box-sizing: border-box; } img { max-width: 100%; } html { box-sizing: border-box; -webkit-font-smoothing: antialiased; } body { font-family: var(--body-font); font-size: 15px; color: var(--body-color); background-color: var(--body-bg-color); margin: 0; font-weight: 600; min-height: -webkit-fill-available; } .video-app { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; max-width: 1400px; height: 100vh; margin: 0 auto; overflow: hidden; } .header { height: 90px; width: 100%; border-bottom: 1px solid var(--border-color); display: -webkit-box; display: flex; background-color: var(--header-bg-color); -webkit-box-align: center; align-items: center; padding: 0 25px; color: var(--body-color); font-size: 15px; } .header-left { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } .header-left svg { width: 22px; margin-right: 25px; flex-shrink: 0; } .logo { width: 34px; height: 34px; border: 5px solid var(--logo-color); border-radius: 50%; flex-shrink: 0; } .header-menu { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; cursor: pointer; margin-left: auto; height: 100; padding: 0 15px; } .menu-item:hover { color: var(--logo-color); } .menu-item:not(:last-child) { margin-right: 20px; } .user-settings { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; margin-left: auto; flex-shrink: 0; } .user-settings > * + * { margin-left: 18px; } .user-settings svg { width: 22px; flex-shrink: 0; } .button { display: -webkit-box; display: flex; background-color: transparent; -webkit-box-align: center; align-items: center; border: 2px solid var(--border-color); border-radius: 25px; color: var(--body-color); padding: 8px 16px; font-family: var(--body-font); cursor: pointer; font-weight: 600; font-size: 14px; } .button svg { margin-right: 8px; width: 20px; fill: var(--body-color); } .search-bar { height: 90px; position: relative; } .search-bar input { height: 100%; width: 100%; display: block; background-color: transparent; border: none; padding: 0 10px 0 54px; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='18' height='18' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cpath d='M18.5 17h-.79l-.28-.27a6.5 6.5 0 10-.7.7l.27.28v.79l5 4.99L23.49 22l-4.99-5zm-6 0a4.5 4.5 0 11-.01-8.99A4.5 4.5 0 0112.5 17z' id='a'/%3e%3c/defs%3e%3cg transform='translate(-6 -6)' fill='none' fill-rule='evenodd'%3e%3cmask id='b' fill='%23fff'%3e%3cuse xlink:href='%23a'/%3e%3c/mask%3e%3cg mask='url(%23b)' fill='%23D8D8D8'%3e%3cpath d='M3 3h24v24H3z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: 16px; background-position: 25px 50%; color: #7c7c7c; } .search-bar input::-webkit-input-placeholder { color: var(--body-color); } .search-bar input::-moz-placeholder { color: var(--body-color); } .search-bar input:-ms-input-placeholder { color: var(--body-color); } .search-bar input::-ms-input-placeholder { color: var(--body-color); } .search-bar input::placeholder { color: var(--body-color); } .user-profile { width: 40px; height: 40px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; } .user-profile + svg { width: 14px; } .notify { position: relative; } .notify:before { content: ""; position: absolute; background-color: var(--logo-color); width: 5px; height: 5px; border-radius: 50%; right: -6px; bottom: 15px; } .menu-item.active { color: var(--logo-color); } .wrapper { width: 100%; display: -webkit-box; display: flex; -webkit-box-flex: 1; flex-grow: 1; overflow: auto; background-color: var(--theme-bg-color); } .side-wrapper:not(:last-child) { border-bottom: 1px solid var(--border-color); } .side-wrapper svg { width: 20px; fill: var(--body-color); margin-right: 25px; flex-shrink: 0; } .username { color: var(--main-color); font-size: 15px; } .side-menu a { text-decoration: none; font-weight: 500; color: var(--main-color); display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; font-size: 15px; white-space: nowrap; } .side-menu a:not(:last-child) { margin-bottom: 20px; } .side-menu { padding: 20px; } .side-title { padding: 0 0 20px; font-size: 15px; } .user { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } .user + .user { margin-top: 15px; } .user-img { border-radius: 50%; width: 30px; height: 30px; margin-right: 16px; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .show-more { margin-top: 20px; padding: 12px 16px; } .left-side { width: 270px; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; border-right: 1px solid var(--border-color); overflow: auto; flex-shrink: 0; } .main-container { padding: 25px; -webkit-box-flex: 1; flex-grow: 1; overflow: auto; } .profile { height: 45vh; max-height: 350px; min-height: 270px; position: relative; display: -webkit-box; display: flex; -webkit-box-pack: end; justify-content: flex-end; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } .profile-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; border-radius: 4px 4px 6px 6px; } .profile-menu { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; background-color: var(--header-bg-color); width: 100%; box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.1); border-radius: 0 0 4px 4px; padding: 0 25px; z-index: 2; } .profile-img { border-radius: 50%; width: 42px; height: 42px; -o-object-fit: cover; object-fit: cover; margin-right: 15px; } .profile-avatar { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; flex-shrink: 0; } .profile-name { white-space: nowrap; } .menu-items { display: -webkit-box; display: flex; cursor: pointer; } .profile-menu-link { padding: 20px; -webkit-transition: 0.2s; transition: 0.2s; } .profile-menu-link.active, .profile-menu-link:hover { border-bottom: 3px solid var(--logo-color); color: var(--logo-color); } .profile-info { -webkit-box-pack: center; justify-content: center; display: -webkit-box; display: flex; background-color: rgba(0, 0, 0, 0.3); width: 100%; z-index: 2; } .profile-name { color: var(--main-color); } .profile-item { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; color: #fff; padding: 26px 16px; white-space: nowrap; } .profile-item svg { width: 22px; margin-right: 10px; } .profile-contact-info { position: absolute; display: -webkit-box; display: flex; right: 10px; top: 20px; color: #fff; } .profile-contact-info svg { width: 18px; } .profile-contact { border: 1px solid rgba(239, 239, 239, 0.3); padding: 16px; margin-left: 10px; border-radius: 50%; cursor: pointer; } .follow-buttons { display: -webkit-box; display: flex; } .follow { border: 2px solid var(--border-color); border-radius: 25px 0 0 25px; color: var(--body-color); padding: 8px 16px; font-weight: 600; font-size: 14px; cursor: pointer; background-color: transparent; } .follow:hover { background-co.........完整代码请登录后点击上方下载按钮下载查看
网友评论0