当前位置:Web前端 > > 正文

网站页面导航怎么设置css(纯CSS + 媒体查询实现网页导航效果)

时间:2022-03-29 15:41:14类别:Web前端

网站页面导航怎么设置css

纯CSS + 媒体查询实现网页导航效果

附上效果图,如果大家感觉不错,请参考实现代码:

网站页面导航怎么设置css(纯CSS + 媒体查询实现网页导航效果)

 代码如下,复制即可使用:

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body {
                background: #801638;
            }
            body,
            body > * {
                margin: 0;
                padding: 0;
                font-family: 'Roboto', sans-serif;
                font-weight: normal;
            }
            * {
                transition: all .3s ease 0s;
            }
            /* Background colours */
            li + li article:nth-child(1) {
                background: #c22326;
            }
            li + li article:nth-child(2) {
                background: #f37338;
            }
            li + li article:nth-child(3) {
                background: #fdb632;
            }
            li + li article:nth-child(4) {
                background: #027878;
            }
            li + li article:nth-child(5),
            li + li {
                background: #801638;
            }
            /* Main layout */
            html,
            body,
            li + li {
                width: 100vw;
                height: 100vh;
            }
            li + li {
                list-style: none;
                position: relative;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: stretch;
                overflow: hidden;
            }
            /* Articles */
            li + li article {
                flex: initial;
                width: 20%;
                height: 100%;
                text-align: center;
                color: #fff;
                text-decoration: none;
                vertical-align: bottom;
                box-sizing: border-box;
                padding: 2vh 1vw;
                position: relative;
            }
            /* Big Headings */
            body > li:first-child {
                position: fixed;
                bottom: 8vh;
                background: #fff;
                width: 100%;
                text-align: center;
                padding: .5rem;
                z-index: 2;
            }
            body > li:first-child h1,
            body > li:first-child h2 {
                margin: 0;
                padding: 0;
            }
            /* Hover interaction */
            li + li:hover article {
                flex: initial;
                width: 10%;
            }
            li + li article:hover {
                width: 60%;
            }
            article > li {
                opacity: 0;
                transition: opacity .2s ease 0;
            }
            li + li article:hover > li {
                opacity: 1;
                transition: opacity .3s ease .3s;
            }
            /* navigation */
            li + li article > h2 {
                bottom: 2vh;
                position: absolute;
                text-align: center;
                width: 100%;
                margin: 0;
                font-size: 3vh;
            }
            /* Article layouts */
            article li {
                text-align: left;
                width: 58vw;
            }
            article li p,
            article li li h2,
            article li h3 {
                margin: 0 0 1em 0;
            }
            article li p {
                width: 40vw;
            }
            @media (max-width: 900px) {
                li + li article {
                    padding: 2vh 3vw;
                }
                li + li article > h2 {
                    transform: rotate(90deg);
                    bottom: 23vh;
                    min-width: 12em;
                    text-align: left;
                    transform: rotate(-90deg);
                    transform-origin: 0 0 0;
                    opacity: 1;
                }
                li + li article:hover > h2 {
                    opacity: 0;
                }
                article li p {
                    width: 50vw;
                }
                article li {
                    max-height: calc(72%);
                    overflow-y: auto;
                }
            }
        </style>
    </head>
    <body>
        <li>
            <h1>我在这,谁敢动我。</h1>
            <h2>我是你们大哥的头</h2>
        </li>
        <li>
            <article>
                <h2>大哥的小弟一</h2>
                <li>
                    <h3>大哥的小弟一</h3>
                    <p>身高180</p>
                    <p>体重120</p>
                </li>
             </article>
             <article>
               <h2>大哥的小弟二</h2>
                <li>
                   <h3>大哥的小弟二</h3>
                   <p>身高160</p>
                   <p>体重100</p>
                </li>
              </article>
              <article>
                 <h2>大哥的小弟三</h2>
                 <li>
                   <h3>大哥的小弟三</h3>
                   <p>身高175</p>
                   <p>体重180</p>
                 </li>
              </article>
              <article>
                 <h2>大哥的小弟四</h2>
                 <li>
                   <h3>大哥的小弟四</h3>
                     <p>身高180</p>
                     <p>体重110</p>
                 </li>
              </article>
              <article>
                 <h2>大哥的小弟五</h2>
                 <li>
                   <h3>大哥的小弟五</h3>
                   <p>身高180</p>
                   <p>体重150</p>
                 </li>
              </article>
         </li>
      </body>
    </html>
    
  • 上一篇下一篇

    猜您喜欢

    热门推荐