css布局实现旅游分享社交平台首页UI效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现旅游分享社交平台首页UI效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700;800&display=swap');
    
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      font-size: 62.5%;
    }
    
    body {
      display: grid;
      place-content: center;
      color: hsl(270, 10%, 80%);
      font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(to top right, hsl(270, 50%, 50%), hsl(290, 60%, 70%));
      min-height: 100vh;
      padding: 3rem;
      overflow-x: hidden;
    }
    
    button {
      font-size: inherit;
      font-family: inherit;
    }
    
    button:hover,
    button:focus {
      outline: none;
    }
    
    a,
    a:hover,
    a:focus {
      outline: none;
      text-decoration: none;
    }
    
    .dash {
      background: hsl(270, 50%, 10%);
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      box-shadow: 4px 4px 30px hsla(270, 30%, 10%, .4);
      max-width: 1266px;
    }
    
    .dash * {
      transition: all .1s;
    }
    
    .header {
      height: 5rem;
      display: flex;
      align-items: center;
      z-index: 2;
      box-shadow: 0 4px 12px hsla(270, 30%, 3%, .2);
    }
    
    .header__heading {
      width: 6rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .header__heading>a {
      font-weight: bold;
      letter-spacing: 2px;
      color: hsl(270, 50%, 10%);
      background: hsl(220, 60%, 60%);
      padding: .2rem .7rem;
      font-size: 1.5rem;
      border-radius: 4px;
    }
    
    .header__heading>a:hover {
      background: hsl(220, 80%, 64%);
    }
    
    .header__search {
      flex-grow: 1;
      padding: 0 8.6rem;
    }
    
    .header__search-icon {
      width: 3.8rem;
      height: 3.8rem;
      border-radius: 3.8rem;
      background: hsl(270, 32%, 17%);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    
    .header__search-icon:hover {
      background: hsl(270, 32%, 20%);
    }
    
    .header__search-icon>svg {
      height: 1.6rem;
      opacity: .4;
    }
    
    .header__search-icon:hover>svg {
      opacity: .7;
    }
    
    .header__options {
      padding-right: 2.8rem;
    }
    
    .header__pro {
      color: #eef0ff;
      background: linear-gradient(to top right, #546FFF, #8A9CFF);
      border: 0;
      margin-right: 5rem;
      font-size: 1.2rem;
      padding: .7rem 1.8rem;
      border-radius: 6px;
      font-weight: 700;
      cursor: pointer;
    }
    
    .header__link {
      font-size: 1.4rem;
      opacity: .8;
      color: inherit;
    }
    
    .header__link:first-of-type:hover {
      opacity: 1;
    }
    
    .header__link:not(:first-of-type) {
      margin-left: 2rem;
      opacity: 1;
    }
    
    .body {
      flex-grow: 2;
      display: flex;
    }
    
    .sidebar {
      width: 8rem;
      box-shadow: 2px 0 12px hsla(270, 30%, 10%, .2);
    }
    
    .sidebar__icon {
      display: flex;
      flex-direction: column;
      align-items: center;
    
      margin-top: 4rem;
      cursor: pointer;
    }
    
    .sidebar__icon:first-of-type {
      margin-top: 5rem;
    }
    
    .sidebar__icon:not(:first-of-type) {
      opacity: .3;
    }
    
    .sidebar__icon:not(:first-of-type):hover {
      opacity: 1;
    }
    
    .sidebar__icon:last-child {
      margin-top: 10rem;
    }
    
    .sidebar__icon>svg {
      height: 2.2rem;
    }
    
    .ss-heading {
      font-weight: 400;
      text-transform: uppercase;
      font-size: 1.4rem;
      letter-spacing: 3px;
      color: hsl(235, 5%, 70%);
    }
    
    .ss-show {
      color: hsl(210, 60%, 60%);
      font-size: 1.2rem;
    }
    
    .ss-show:hover {
      color: hsl(210, 70%, 70%);
    }
    
    .ss-dots {
      display: flex;
    }
    
    .ss-dots>span {
      width: 6px;
      height: 6px;
      border: 1px solid currentColor;
      border-radius: 6px;
      margin-right: 2px;
      opacity: .6;
      cursor: pointer;
    }
    
    .ss-dots>span:hover {
      opacity: 1;
    }
    
    .main {
      flex-grow: 2;
      background: linear-gradient(to right top, hsla(270, 50%, 8%, .5), hsla(270, 50%, 8%, .6) 20%, hsla(270, 50%, 8%, .1)), linear-gradient(to right bottom, hsl(270, 50%, 8%), transparent 66%), linear-gradient(to bottom, transparent, hsl(270, 50%, 8%) 56%), url("//repo.bfw.wiki/bfwrepo/image/6284273e2b668.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_1215,h_260,/quality,q_90") no-repeat;
      background-size: auto 500px;
      padding: 4rem 0 0 8rem;
      display: flex;
      border-bottom-right-radius: 8px;
    }
    
    .main__col-1 {
      width: 30%;
    }
    
    .main__heading {
      font-size: 3rem;
      font-weight: 300;
      display: flex;
      align-items: center;
    }
    
    .main__heading>span {
      width: 4rem;
      height: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px;
      margin-right: 1.6rem;
      margin-bottom: -2px;
    }
    
    .main__heading svg {
      height: .7em;
    }
    
    .main__desc {
      margin: 1.5rem 0 1rem;
      font-size: 1.4rem;
      opacity: .6
    }
    
    .main__sub {
      font-size: 1.2rem;
    }
    
    .main__sub span:first-of-type {
      opacity: .4;
    }
    
    .main__list-heading-wrap {
      display: flex;
      align-items: center;
      font-size: 1rem;
      margin: 8rem 0 5rem;
    }
    
    .main__list-heading {
      flex-grow: 2;
    }
    
    .main__list {
      list-style: none;
      position: relative;
    }
    
    .main__list::before {
      content: "Wadi";
      position: absolute;
      bottom: 17%;
      left: -18%;
      opacity: .03;
      font-size: 18rem;
      font-weight: bold;
    }
    
    .main__list-item {
      padding: 0 0 5.7rem 2rem;
      border-left: 2px solid hsla(0, 0%, 50%, .2);
      position: relative;
      display: flex;
      color: #9D9DAC;
    }
    
    .main__list-item:first-of-type .main__list-content {
      color: hsl(240, 8%, 90%);
    }
    
    .main__list-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 8px;
      width: 4px;
      height: 4px;
      border-radius: 4px;
      background: hsl(210, 70%, 70%);
      transform: translateX(-3px);
    }
    
    .main__list-item:first-of-type::before {
      top: 0;
    }
    
    .main__list-item:first-of-type .main__list-content {
      line-height: .3;
    }
    
    .main__list-item:last-of-type {
.........完整代码请登录后点击上方下载按钮下载查看