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 のアンチシェイクとスロットリングの違いと実装

推薦する

JS の効率的なマジック演算子の概要

JavaScript は現在、毎年新しいバージョンがリリースされており、より便利で効率的な新しい演算...

Javascriptでシンプルなナビゲーションバーを実装

この記事では、参考までに、シンプルなナビゲーションバーを実装するためのJavascriptの具体的な...

Dockerで同じIDを持つ2つのイメージを削除する

今日 Docker コンテナを作成したとき、誤ってイメージの名前を間違って入力しました。その結果、コ...

Nginxのアクセス制限設定の詳細な説明

Nginxのアクセス制限設定とはNginx のアクセス制限は、IP ベースのアクセス制御とユーザーベ...

圧縮パッケージを使用して Linux 環境に JDK 13 をインストールする方法

JDK とは何ですか?まあ、この質問がわからないのであれば、なぜこれをインストールするのか本当にわか...

CentOS7.x のアンインストールとインストール MySQL5.7 の操作手順とエンコード形式の変更方法

1. MySQL 5.7 のアンインストール1.1查看yum是否安裝過mysql CD yum li...

Linux で PHP を 5.6 にアップグレードする実用的な方法

1: ターミナルに入ったらPHPのバージョンを確認する php -v出力は次のようになります。 PH...

CentOS はローカル yum ソースを使用して LAMP 環境を構築するグラフィック チュートリアル

この記事では、ローカル yum ソースを使用して CentOS 上に LAMP 環境を構築する方法に...

MySQL 5.7 で業務を停止せずに従来のレプリケーションを GTID レプリケーションに変更する例

GTID の利点により、従来のファイル POS ベースのレプリケーションを GTID ベースのレプリ...

axiosのシンプルなカプセル化と使用例コード

序文最近、プロジェクトを構築しているときに、リクエストのカプセル化について考え、どのようにカプセル化...

Amap を使用した React 実装例 (react-amap)

React の PC 版は Amap を使用するようにリファクタリングされました。情報を検索したと...

インデックスを使用して数千万のデータを持つ MySQL のクエリ速度を最適化する

1. インデックスの役割一般的に言えば、インデックスは本の目次に相当します。条件に基づいてクエリを実...

Centos ベースイメージの作成方法

序文現在、私の会社で使用しているオペレーティングシステムはすべて CentOS7.4 で、アプリケー...

CSS3 疑似クラスセレクターの簡単なレビュー

序文CSS がフロントエンド開発の基本的なスキルであるならば、「セレクター」は基礎中の基礎です。これ...