ソースコードリンク：https
：//pan.baidu.com/s/1Zis5IzHOvFQAiJ-SGkvjrw抽出コード：qiec
序文
この記事はhtml、css、jsを使用して書かれています
ヒント：以下はこの記事の内容です。以下のケースは参照用です
1.実際の戦闘を計画する
PinyougoはJDと同じbase.cssファイルを使用します。エディターが怠惰なので、Pinyougoの
ロゴを左上隅に直接コピーして貼り付け、スクリーンショットが中央に表示されないようにします。
次に、手順を使用します
1.ナビゲーションバーのhtmlコード
コードは次のように表示されます。
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品邮购欢迎您！ </li>
<li>
<a href="#">请登录</a> <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>
特定のcssコードをダウンロードして自由に表示できます
2.リトルロケットとその背後にある軽いhtmlとjsコード
コードは次のように表示されます。
<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>
コードデータは、後ろの小さなliの速度を変える可能性があります
総括する
編集者は質問をするのがとても怠惰で、私がそれらを見ると答えます