JDカルーセル効果を実現するための純粋なHTMLとCSS

JDカルーセル効果を実現するための純粋なHTMLとCSS

JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CSS を使用して実装されました。

図に示すように、2 つのサイド矢印画像があります。

<!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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  ウェブフォームデザインのための5つの実用的なヒント

>>:  JavaScript のアンチシェイクとスロットリングの違いと実装

推薦する

WeChatアプレットでQRコードを識別するために長押しする実装プロセス

序文公式アカウントのQRコードは長押しで認識できることは皆さんご存じですが、ミニプログラムに対する制...

JavaScript はドラッグ可能なモーダルボックスを実装します

この記事では、ドラッグ可能なモーダルボックスを実装するためのJavaScriptの具体的なコードを参...

MySQLデスクトップツールSQLyogのリソースとアクティベーション方法は、白黒のコマンドラインに別れを告げます

では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...

HTMLにおけるbackground-image属性の設定の詳細な説明

写真といえば、まず背景画像が思い浮かびます。私たちの装飾の多くは背景画像を使用して実現されているから...

MySQL 5.7.18 のインストールと設定方法のグラフィックチュートリアル (CentOS7)

LinuxにMySQL 5.7.18をインストールする方法1. MySQLをダウンロードします。公...

サーバー上でjupyterノートブックを実行する問題を解決する

目次サーバーはjupyterノートブックを実行します仮想環境次にファイアウォールをオフにしますJup...

CSS3 フリップカード番号サンプルコード

今日会社から課題をもらったのですが、効果図は以下のとおりです。 どのような効果を実現したいかは特に決...

Linux 環境に mysql5.7.36 データベースをインストールするチュートリアル

ダウンロードアドレス: https://dev.mysql.com/downloads/mysql/...

VMware esxi6.5 のインストールと使用の詳細な手順

目次導入建築ESXIの利点vSphere とは何ですか? 2. 仮想マシンの利点3. 仮想マシンを使...

CSS の ::before と ::after 疑似要素について知らないこと

CSS には、一般的には使用されない 2 つの疑似クラス、before と :after があります...

MYSQL 左結合の最適化 (10 秒から 20 ミリ秒)

目次【機能背景】 [生のSQL] 【独自SQL解析】 【分析手順】 [最適化されたSQL] 【最適化...

IIS サーバーから apk ファイルをダウンロードする際の 404 エラーの解決策

最近、IIS をサーバーとして使用すると、apk ファイルがサーバーにアップロードされましたが、ダウ...

Dockerコンテナアプリケーションログの表示方法

docker アタッチコマンドdocker attach [options] 容器実行中のコンテナに...

MySQL の不正な文字列値の解決方法

MySQL を使用して中国語の文字を挿入すると、多くの友人から次のエラーが報告されます。 これは、文...

SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策

目次ブラウザ同一生成元ポリシー1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決しま...