JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CSS を使用して実装されました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ルンボ</title> <スタイル> *{ パディング: 0; マージン: 0; } li{ リストスタイル: なし; } .lunbo{ マージン: 40px 自動; 高さ: 470ピクセル; 幅: 590ピクセル; 位置: 相対的; } .左、.右{ 位置: 絶対; 上位: 50%; 上マージン: -18px; 幅: 24px; 高さ: 36px; } 。左{ 左: 0; } 。右{ 右: 0; } .lunbo ul{ 高さ: 18px; 幅: 151ピクセル; 背景: rgba(255,255,255,.3); 位置: 絶対; 下: 10px; 左: 50%; 左マージン: -76px; 境界線の半径: 10px; } .ルンボ・リ{ 高さ: 14px; 幅: 14px; 境界線の半径: 50%; 背景色: #fff; フロート: 左; マージン: 2px; } .lunbo .current{ 背景色: #f40; } </スタイル> </head> <本文> <div class="lunbo"> <img src="images/lunbo.jpg" alt=""> <div class="left"><img src="images/left.png" alt=""></div> <!-- リンクを使用してから背景を使用することもできます --> <div class="right"><img src="images/right.png" alt=""></div> <ul> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </本文> </html> 以下の効果が得られました 要約する 上記は、エディターが導入した JD カルーセル効果を実現するための純粋な HTML と CSS です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: JavaScript のアンチシェイクとスロットリングの違いと実装
序文公式アカウントのQRコードは長押しで認識できることは皆さんご存じですが、ミニプログラムに対する制...
この記事では、ドラッグ可能なモーダルボックスを実装するためのJavaScriptの具体的なコードを参...
では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...
写真といえば、まず背景画像が思い浮かびます。私たちの装飾の多くは背景画像を使用して実現されているから...
LinuxにMySQL 5.7.18をインストールする方法1. MySQLをダウンロードします。公...
目次サーバーはjupyterノートブックを実行します仮想環境次にファイアウォールをオフにしますJup...
今日会社から課題をもらったのですが、効果図は以下のとおりです。 どのような効果を実現したいかは特に決...
ダウンロードアドレス: https://dev.mysql.com/downloads/mysql/...
目次導入建築ESXIの利点vSphere とは何ですか? 2. 仮想マシンの利点3. 仮想マシンを使...
CSS には、一般的には使用されない 2 つの疑似クラス、before と :after があります...
目次【機能背景】 [生のSQL] 【独自SQL解析】 【分析手順】 [最適化されたSQL] 【最適化...
最近、IIS をサーバーとして使用すると、apk ファイルがサーバーにアップロードされましたが、ダウ...
docker アタッチコマンドdocker attach [options] 容器実行中のコンテナに...
MySQL を使用して中国語の文字を挿入すると、多くの友人から次のエラーが報告されます。 これは、文...
目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...