您的位置：首页 > Web前端 > > 正文

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

更多时间：2022-03-29 15:41:14 类别：Web前端浏览量：2645

网站页面导航怎么设置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>

标签：媒体查询网页导航 css

下一篇：thinkphp框架实例（ThinkPHP框架整合微信支付之JSAPI模式图文详解）

您可能感兴趣

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

网站页面导航怎么设置css

热门推荐

排行榜