Enlace del código fuente: https://pan.baidu.com/s/1Zis5IzHOvFQAiJ-SGkvjrw
Código de extracción: qiec

Prefacio

Este artículo está escrito usando html, css, js

Sugerencia: El siguiente es el contenido de este artículo, los siguientes casos son para referencia

1. Proyecto de combate real

Pinyougo usa el mismo archivo base.css que JD. Debido a que el editor es perezoso, copio y pego directamente el
logotipo de Pinyougo en la esquina superior izquierda, por lo que la captura de pantalla no está en el medio.

Inserte la descripción de la imagen aquí

En segundo lugar, siga los pasos

1. Código html de la barra de navegación

el código se muestra a continuación:

<section class="shortcut">
    <div class="w">
        <div class="fl">
            <ul>
                <li>品邮购欢迎您！&nbsp;</li>
                <li>
                    <a href="#">请登录</a> &nbsp; <a href="register.html"class="style_red">免费注册</a>
                </li>
            </ul> 
        </div>
        <div class="fr"> 
            <ul>
                <li> <a href="dd.html" class="style_blue"> 我的订单（别点我）</a></li>
                <li></li>
                <li class="arrow-icon">我的品邮购</li>
                <li></li>
                <li>品邮购会员</li>
                <li></li>
                <li>企业采购</li>
                <li></li>
                <li class="arrow-icon">关注品邮购</li>
                <li></li>
                <li class="arrow-icon">客户服务</li>
                <li></li>
                <li class="asd"> 
                    网站导航
                    <div class="bh">
                        <ul class="nh">
                            <li style="float:right; width:100px;"><a href="index.html">返回首页</a></li>
                            <li style="float:right; width:100px;"><a href="register.html">前往登录界面</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!-- <div1 class="daohang">nihao</div1> -->
        </div>
    </div>
    </section>

El código css específico se puede descargar y ver libremente

2. Little Rocket y el código html y js ligero detrás

el código se muestra a continuación:

    <title>火箭升空</title>
    <link rel="stylesheet" href="css/hh.css">
    <link rel="shortcut icon" href="favicon.ico" /> 
    <!-- 引入 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共的样式文件 -->
    <script src="js/zuoye.js"></script>
</head>
<body>
    <div class="container">
        <div class="xxzp">
                <a href="index.html">
                    <img src="images/lbxxtx2.png" alt="">
                </a>
        </div>
        <div class="rocket">
          <a href="index.html"> <img src="images/hj.png" alt=""></a> 
        </div>
    </div>
    <script>
  function rand(m,n){
    
    
    return Math.ceil(Math.random()*(n-m+1)) + m-1;
}
// 光线总数
let num = 100;
// 循环
for(let i=0;i<num;i++){
    
    
    // 创建i元素
    const i = document.createElement('i');
    // 设置样式
    i.style.height = rand(30,100) + 'px';
    i.style.left = rand(1,99) + 'vw';
    // 随机动画周期
    i.style.animationDuration = rand(5,30) / 10 + 's';
    // 将i插入到container 元素中
    document.querySelector('.container').appendChild(i);
}
    </script>

Los datos del código pueden cambiar la velocidad del pequeño li detrás

para resumir

El editor es muy vago para hacer preguntas y responderá cuando las vea

Combate real del proyecto Pinyoubu + algunos códigos js y css3 agregados por usted mismo