web one item === 100vh

1. Make a fun code

在线体验:https://codepen.io/zhu-hongwei/pen/ExOyKLx


2. Show me the code

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <body>
    <div class="menu-container">
      <div class="title">Titlediv>
      <ul class="menu">
        <li class="menu-item">1li>
        <li class="menu-item">2li>
        <li class="menu-item">3li>
        <li class="menu-item">4li>
      ul>
    div>

    <style>
      body,
      ul,
      li {
        margin: 0;
        padding: 0;
      }

      li:nth-of-type(odd) {
        background-color: #f5f6f7;
      }
      
     .title {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;

        height: 45px;
        line-height: 45px;

        /* color: #fff; */
        background-color: #000;
        text-align: center;
        font-weight: bold;
        font-size: 30px;
      }

      .menu-container {
        height: 100vh;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        /* scroll-behavior: smooth */
      }

      .menu-item {
        display: flex;
        justify-content: center;
        align-items: center;
        
        height: 100vh;
        font-size: 50px;
        scroll-snap-align: center;
      }
    style>
  body>
html>


3. 过些日子,把个人网站首页改成这个效果试试


喜欢或对你有帮助,请点个赞吧,自己先点个嘿嘿 。

有错误或者疑问还请评论指出。

我的个人网站 点击访问 hongweizhu.com 。


END


你可能感兴趣的:(提升体验,web,前端)