【问题标题】:How to make both the top and side navigation bar fixed? HTML-CSS如何固定顶部和侧面导航栏? HTML-CSS
【发布时间】:2020-09-03 17:48:33
【问题描述】:

你好,这是我第一次学习 html-css,我想制作一个传统的网站,它既有用于搜索和登录的顶部栏,也有用于导航的侧栏。我找到了一个 youtube 视频,它可以帮助我处理侧边栏并且它已修复。但是顶部导航栏不是固定的,如果用户向下滚动就会留下来

普通网站:

网站向下滚动:

网站使用“位置:固定;”在菜单类

代码:

<html>
<head>
<title>SYPHYM</title>
</head>
<style>

body
{
    background: white;
    margin: 0;
}
.menu
{
    width: 100%;
    background: #4b4276;
    overflow: auto;

}

.menu ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 60px;
}
.menu li
{
    float: left;
    
}
.menu ul li a
{
    text-decoration: none;
    width: 130px;
    display: block;
    text-align: center;
    color: #f2f2f2;
    font-size: 18px;
    font-family: sans-serif;
    letter-spacing: 0.5px;
}
.menu li a:hover
{
    opacity: 0.5;
    font-size:19px;

}
.search-form
{
    margin-top: 15px;
    float: right;
    margin-right: 100px

}
input[type=text]
{
    width: 300px;
    padding: 7px;
    border: none;
}
button
{
    
    float: right;
    background: orange;
    color: white;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    position: absolute;
    padding: 7px;
    font-family: sans-serif;
    border: none;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
}

body{
   background-color: #f3f5f9;
}

.wrapper{
  display: flex;
  position: relative;
}

.wrapper .sidebar{
  width: 200px;
  height: 100%;
  background: #4b4254;
  padding: 30px 0px;
  position: fixed;
}

.wrapper .sidebar h2{
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
}

.wrapper .sidebar ul li{
  padding: 15px;
  border-bottom: 1px solid #bdb8d7;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  border-top: 1px solid rgba(255,255,255,0.05);
}    

.wrapper .sidebar ul li a{
  color: #bdb8d7;
  display: block;
}

.wrapper .sidebar ul li a .fas{
  width: 25px;
}

.wrapper .sidebar ul li:hover{
  background-color: #594f8d;
}
    
.wrapper .sidebar ul li:hover a{
  color: #fff;
}

.wrapper .main_content{
  width: 100%;
  margin-left: 200px;
}

.wrapper .main_content .header{
  padding: 20px;
  background: #fff;
  color: #717171;
  border-bottom: 1px solid #e0e4e8;
}

.wrapper .main_content .info{
  margin: 20px;
  color: #717171;
  line-height: 25px;
}

.wrapper .main_content .info div{
  margin-bottom: 20px;
}

@media (max-height: 500px){
  .social_media{
    display: none !important;
  }
}
</style>
<body>
<nav class = "menu">
    <ul>
        <li><a href = "#"> <b>SYPHYM</a> </li>
        <li><a href = "#"> Join </li>
        <li><a href = "#"> Sign In</a> </li>
    </ul>
<form class = "search-form">
    <input type = "text" placeholder = "Search">
    <button> Search </button>
</form>
</nav>

<div class="wrapper">
    <div class="sidebar">
        <h2>User</h2>
        <ul>
            <li><a href="#"></i>My Orders</a></li>
            <li><a href="#"></i>My Commisions</a></li>
        </ul> 
        <br>
        <h2>Categories</h2>
        <ul>
            <li><a href="#"></i>Music</a></li>
            <li><a href="#"></i>Art</a></li>
            <li><a href="#"></i>Writing</a></li>
            <li><a href="#"></i>Video</a></li>
        </ul> 
    </div>
    <div class="main_content">
        <div class="header">Welcome!! Have a nice day.</div>  
        <div class="info">
          <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
          <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
          <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
          <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
          <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
          <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
          <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
          <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
          <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
      </div>
      </div>
    </div>
</div>
</div>
</body>
</html>

对不起,我完全被难住了,我不知道该怎么办。

【问题讨论】:

    标签: html css


    【解决方案1】:

    使用position: fixed 并在菜单中设置正确的z-index 修复了问题:

      body {
          background: white;
          margin: 0;
        }
        .menu {
          width: calc(100% - 200px);
          background: #4b4276;
          overflow: auto;
          position: fixed;
          right: 0;
          z-index: 200;
        }
    
        .menu ul {
          margin: 0;
          padding: 0;
          list-style: none;
          line-height: 60px;
        }
        .menu li {
          float: left;
        }
        .menu ul li a {
          text-decoration: none;
          width: 130px;
          display: block;
          text-align: center;
          color: #f2f2f2;
          font-size: 18px;
          font-family: sans-serif;
          letter-spacing: 0.5px;
        }
        .menu li a:hover {
          opacity: 0.5;
          font-size: 19px;
        }
        .search-form {
          margin-top: 15px;
          float: right;
          margin-right: 100px;
        }
        input[type='text'] {
          width: 300px;
          padding: 7px;
          border: none;
        }
        button {
          float: right;
          background: orange;
          color: white;
          border-radius: 0 5px 5px 0;
          cursor: pointer;
          position: absolute;
          padding: 7px;
          font-family: sans-serif;
          border: none;
        }
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          list-style: none;
          text-decoration: none;
          font-family: 'Josefin Sans', sans-serif;
        }
    
        body {
          background-color: #f3f5f9;
        }
    
        .wrapper {
          display: flex;
          position: relative;
        }
    
        .wrapper .sidebar {
          width: 200px;
          height: 100%;
          background: #4b4254;
          padding: 30px 0px;
          position: fixed;
        }
    
        .wrapper .sidebar h2 {
          color: #fff;
          text-transform: uppercase;
          text-align: center;
          margin-bottom: 30px;
        }
    
        .wrapper .sidebar ul li {
          padding: 15px;
          border-bottom: 1px solid #bdb8d7;
          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
          border-top: 1px solid rgba(255, 255, 255, 0.05);
        }
    
        .wrapper .sidebar ul li a {
          color: #bdb8d7;
          display: block;
        }
    
        .wrapper .sidebar ul li a .fas {
          width: 25px;
        }
    
        .wrapper .sidebar ul li:hover {
          background-color: #594f8d;
        }
    
        .wrapper .sidebar ul li:hover a {
          color: #fff;
        }
    
        .wrapper .main_content {
          width: 100%;
          margin-left: 200px;
        }
    
        .wrapper .main_content .header {
          padding: 20px;
          background: #fff;
          color: #717171;
          border-bottom: 1px solid #e0e4e8;
        }
    
        .wrapper .main_content .info {
          margin: 20px;
          color: #717171;
          line-height: 25px;
        }
    
        .wrapper .main_content .info div {
          margin-bottom: 20px;
        }
    
        @media (max-height: 500px) {
          .social_media {
            display: none !important;
          }
        }
    <html>
      <head>
        <title>SYPHYM</title>
      </head>
      <body>
        <nav class="menu">
          <ul>
            <li><a href="#"> SYPHYM</a></li>
            <li><a href="#"> Join</a></li>
            <li><a href="#"> Sign In</a></li>
          </ul>
          <form class="search-form">
            <input type="text" placeholder="Search" />
            <button>Search</button>
          </form>
        </nav>
    
        <div class="wrapper">
          <div class="sidebar">
            <h2>User</h2>
            <ul>
              <li><a href="#">My Orders</a></li>
              <li><a href="#">My Commisions</a></li>
            </ul>
            <br />
            <h2>Categories</h2>
            <ul>
              <li><a href="#">Music</a></li>
              <li><a href="#">Art</a></li>
              <li><a href="#">Writing</a></li>
              <li><a href="#">Video</a></li>
            </ul>
          </div>
          <div class="main_content">
            <div class="header">Welcome!! Have a nice day.</div>
            <div class="info">
              <div>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
                nobis ut exercitationem atque accusamus sit natus officiis totam
                blanditiis at eum nemo, nulla et quae eius culpa eveniet
                voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
                perferendis itaque alias sint, beatae non maiores magnam ad, veniam
                tenetur atque ea exercitationem earum eveniet totam ipsam magni
                tempora aliquid ullam possimus? Tempora nobis facere porro,
                praesentium magnam provident accusamus temporibus! Repellendus harum
                veritatis itaque molestias repudiandae ea corporis maiores non
                obcaecati libero, unde ipsum consequuntur aut consectetur culpa
                magni omnis vero odio suscipit vitae dolor quod dignissimos
                perferendis eos? Consequuntur!
              </div>
              <div>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
                nobis ut exercitationem atque accusamus sit natus officiis totam
                blanditiis at eum nemo, nulla et quae eius culpa eveniet
                voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
                perferendis itaque alias sint, beatae non maiores magnam ad, veniam
                tenetur atque ea exercitationem earum eveniet totam ipsam magni
                tempora aliquid ullam possimus? Tempora nobis facere porro,
                praesentium magnam provident accusamus temporibus! Repellendus harum
                veritatis itaque molestias repudiandae ea corporis maiores non
                obcaecati libero, unde ipsum consequuntur aut consectetur culpa
                magni omnis vero odio suscipit vitae dolor quod dignissimos
                perferendis eos? Consequuntur!
              </div>
              <div>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
                nobis ut exercitationem atque accusamus sit natus officiis totam
                blanditiis at eum nemo, nulla et quae eius culpa eveniet
                voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
                perferendis itaque alias sint, beatae non maiores magnam ad, veniam
                tenetur atque ea exercitationem earum eveniet totam ipsam magni
                tempora aliquid ullam possimus? Tempora nobis facere porro,
                praesentium magnam provident accusamus temporibus! Repellendus harum
                veritatis itaque molestias repudiandae ea corporis maiores non
                obcaecati libero, unde ipsum consequuntur aut consectetur culpa
                magni omnis vero odio suscipit vitae dolor quod dignissimos
                perferendis eos? Consequuntur!
              </div>
              <div>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
                nobis ut exercitationem atque accusamus sit natus officiis totam
                blanditiis at eum nemo, nulla et quae eius culpa eveniet
                voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
                perferendis itaque alias sint, beatae non maiores magnam ad, veniam
                tenetur atque ea exercitationem earum eveniet totam ipsam magni
                tempora aliquid ullam possimus? Tempora nobis facere porro,
                praesentium magnam provident accusamus temporibus! Repellendus harum
                veritatis itaque molestias repudiandae ea corporis maiores non
                obcaecati libero, unde ipsum consequuntur aut consectetur culpa
                magni omnis vero odio suscipit vitae dolor quod dignissimos
                perferendis eos? Consequuntur!
              </div>
              <div>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
                nobis ut exercitationem atque accusamus sit natus officiis totam
                blanditiis at eum nemo, nulla et quae eius culpa eveniet
                voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
                perferendis itaque alias sint, beatae non maiores magnam ad, veniam
                tenetur atque ea exercitationem earum eveniet totam ipsam magni
                tempora aliquid ullam possimus? Tempora nobis facere porro,
                praesentium magnam provident accusamus temporibus! Repellendus harum
                veritatis itaque molestias repudiandae ea corporis maiores non
                obcaecati libero, unde ipsum consequuntur aut consectetur culpa
                magni omnis vero odio suscipit vitae dolor quod dignissimos
                perferendis eos? Consequuntur!
              </div>
              <div>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
                nobis ut exercitationem atque accusamus sit natus officiis totam
                blanditiis at eum nemo, nulla et quae eius culpa eveniet
                voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
                perferendis itaque alias sint, beatae non maiores magnam ad, veniam
                tenetur atque ea exercitationem earum eveniet totam ipsam magni
                tempora aliquid ullam possimus? Tempora nobis facere porro,
                praesentium magnam provident accusamus temporibus! Repellendus harum
                veritatis itaque molestias repudiandae ea corporis maiores non
                obcaecati libero, unde ipsum consequuntur aut consectetur culpa
                magni omnis vero odio suscipit vitae dolor quod dignissimos
                perferendis eos? Consequuntur!
              </div>
              <div>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
                nobis ut exercitationem atque accusamus sit natus officiis totam
                blanditiis at eum nemo, nulla et quae eius culpa eveniet
                voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
                perferendis itaque alias sint, beatae non maiores magnam ad, veniam
                tenetur atque ea exercitationem earum eveniet totam ipsam magni
                tempora aliquid ullam possimus? Tempora nobis facere porro,
                praesentium magnam provident accusamus temporibus! Repellendus harum
                veritatis itaque molestias repudiandae ea corporis maiores non
                obcaecati libero, unde ipsum consequuntur aut consectetur culpa
                magni omnis vero odio suscipit vitae dolor quod dignissimos
                perferendis eos? Consequuntur!
              </div>
              <div>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
                nobis ut exercitationem atque accusamus sit natus officiis totam
                blanditiis at eum nemo, nulla et quae eius culpa eveniet
                voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
                perferendis itaque alias sint, beatae non maiores magnam ad, veniam
                tenetur atque ea exercitationem earum eveniet totam ipsam magni
                tempora aliquid ullam possimus? Tempora nobis facere porro,
                praesentium magnam provident accusamus temporibus! Repellendus harum
                veritatis itaque molestias repudiandae ea corporis maiores non
                obcaecati libero, unde ipsum consequuntur aut consectetur culpa
                magni omnis vero odio suscipit vitae dolor quod dignissimos
                perferendis eos? Consequuntur!
              </div>
              <div>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed
                nobis ut exercitationem atque accusamus sit natus officiis totam
                blanditiis at eum nemo, nulla et quae eius culpa eveniet
                voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio
                perferendis itaque alias sint, beatae non maiores magnam ad, veniam
                tenetur atque ea exercitationem earum eveniet totam ipsam magni
                tempora aliquid ullam possimus? Tempora nobis facere porro,
                praesentium magnam provident accusamus temporibus! Repellendus harum
                veritatis itaque molestias repudiandae ea corporis maiores non
                obcaecati libero, unde ipsum consequuntur aut consectetur culpa
                magni omnis vero odio suscipit vitae dolor quod dignissimos
                perferendis eos? Consequuntur!
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>
    .menu {
        width: calc(100% - 200px);
        background: #4b4276;
        overflow: auto;
        position: fixed;
        right: 0;
        z-index: 200;
    }
    

    使用 CSS position: absolute | relative | fixed 时,您需要确保使用正确的 z-index 值。该值越高,HTML 元素的堆叠顺序就越高。因此,在您的情况下,如果没有 z-index,则文本内容位于菜单“上方”,这就是您在上图中显示的奇怪布局的原因。

    【讨论】:

    • 你修复了工作,但它吃掉了用户,祝你有美好的一天
    • 感谢您指出这一点。我没有注意到这一点。更新了答案
    【解决方案2】:

    有一个新的CSS位置属性称为sticky,这意味着选择的元素会随着滚动而保持粘性,因此您需要将标题的所有HTML元素放在容器div中..以类标题命名所以你的代码将是:

    .header {
    position:sticky;
    top:0;
    left:0;
    }
    
    
    

    【讨论】:

    【解决方案3】:

    有必要吗?

    <html>
    <head>
    <title>SYPHYM</title>
    </head>
    <style>
    
    body
    {
        background: white;
        margin: 0;
    }
    .menu
    {
        width: 100%;
        background: #4b4276;
        overflow: auto;
    
    }
    
    .menu ul
    {
        margin: 0;
        padding: 0;
        list-style: none;
        line-height: 60px;
    }
    .menu li
    {
        float: left;
        
    }
    .menu ul li a
    {
        text-decoration: none;
        width: 130px;
        display: block;
        text-align: center;
        color: #f2f2f2;
        font-size: 18px;
        font-family: sans-serif;
        letter-spacing: 0.5px;
    }
    .menu li a:hover
    {
        opacity: 0.5;
        font-size:19px;
    
    }
    .search-form
    {
        margin-top: 15px;
        float: right;
        margin-right: 100px
    
    }
    input[type=text]
    {
        width: 300px;
        padding: 7px;
        border: none;
    }
    button
    {
        
        float: right;
        background: orange;
        color: white;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
        position: absolute;
        padding: 7px;
        font-family: sans-serif;
        border: none;
    }
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      list-style: none;
      text-decoration: none;
      font-family: 'Josefin Sans', sans-serif;
    }
    
    body{
       background-color: #f3f5f9;
    }
    
    .wrapper{
      display: flex;
      position: relative;
    }
    
    .wrapper .sidebar{
      width: 300px;
      /*height: 100%;*/
      height: 100vh;
      background: #4b4254;
      padding: 30px 0px;
      /*position: fixed;*/
      position: sticky;
      top: 0;
    }
    
    .wrapper .sidebar h2{
      color: #fff;
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 30px;
    }
    
    .wrapper .sidebar ul li{
      padding: 15px;
      border-bottom: 1px solid #bdb8d7;
      border-bottom: 1px solid rgba(0,0,0,0.05);
      border-top: 1px solid rgba(255,255,255,0.05);
    }    
    
    .wrapper .sidebar ul li a{
      color: #bdb8d7;
      display: block;
    }
    
    .wrapper .sidebar ul li a .fas{
      width: 25px;
    }
    
    .wrapper .sidebar ul li:hover{
      background-color: #594f8d;
    }
        
    .wrapper .sidebar ul li:hover a{
      color: #fff;
    }
    
    .wrapper .main_content{
      width: 100%;
      /*margin-left: 200px;*/
    }
    
    .wrapper .main_content .header{
      padding: 20px;
      background: #fff;
      color: #717171;
      border-bottom: 1px solid #e0e4e8;
    }
    
    .wrapper .main_content .info{
      margin: 20px;
      color: #717171;
      line-height: 25px;
    }
    
    .wrapper .main_content .info div{
      margin-bottom: 20px;
    }
    
    @media (max-height: 500px){
      .social_media{
        display: none !important;
      }
    }
    </style>
    <body>
    <nav class = "menu">
        <ul>
            <li><a href = "#"> <b>SYPHYM</a> </li>
            <li><a href = "#"> Join </li>
            <li><a href = "#"> Sign In</a> </li>
        </ul>
    <form class = "search-form">
        <input type = "text" placeholder = "Search">
        <button> Search </button>
    </form>
    </nav>
    
    <div class="wrapper">
        <div class="sidebar">
            <h2>User</h2>
            <ul>
                <li><a href="#"></i>My Orders</a></li>
                <li><a href="#"></i>My Commisions</a></li>
            </ul> 
            <br>
            <h2>Categories</h2>
            <ul>
                <li><a href="#"></i>Music</a></li>
                <li><a href="#"></i>Art</a></li>
                <li><a href="#"></i>Writing</a></li>
                <li><a href="#"></i>Video</a></li>
            </ul> 
        </div>
        <div class="main_content">
            <div class="header">Welcome!! Have a nice day.</div>  
            <div class="info">
              <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
              <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
              <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
              <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
              <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
              <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
              <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
              <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
              <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A sed nobis ut exercitationem atque accusamus sit natus officiis totam blanditiis at eum nemo, nulla et quae eius culpa eveniet voluptatibus repellat illum tenetur, facilis porro. Quae fuga odio perferendis itaque alias sint, beatae non maiores magnam ad, veniam tenetur atque ea exercitationem earum eveniet totam ipsam magni tempora aliquid ullam possimus? Tempora nobis facere porro, praesentium magnam provident accusamus temporibus! Repellendus harum veritatis itaque molestias repudiandae ea corporis maiores non obcaecati libero, unde ipsum consequuntur aut consectetur culpa magni omnis vero odio suscipit vitae dolor quod dignissimos perferendis eos? Consequuntur!</div>
          </div>
          </div>
        </div>
    </div>
    </div>
    </body>
    </html>

    【讨论】:

      猜你喜欢
      • 2018-09-13
      • 2023-03-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-12-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多