図に示すように、2 つのサイド矢印画像があります。
JDカルーセル効果を実現するための純粋なHTMLとCSS
|
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 のアンチシェイクとスロットリングの違いと実装
推薦する
Vue はトークンを取得してトークン ログインのサンプル コードを実装します
ログイン認証にトークンを使用する考え方は次のとおりです。 1. 初めてログインする場合、フロントエン...
Mac に MySQL データベースをインストールし、環境変数を設定するためのグラフィック チュートリアル
目次MySQLをインストールする環境変数の設定MySQLをインストールするmysqlをダウンロードし...
vue+element で動的スキニングを実装するためのサンプルコード
プロジェクトのテーマがすべての人の美的感覚を満足できないこともあります。このとき、スキン変更機能は非...
コーディングスキルを向上させるためのJavaScriptのヒント
目次1. 一意の値をフィルタリングする2. 短絡評価2.1 シナリオ例3. ブール変換4. 文字列を...
国内SNSのホームページを比較・分析して得た経験をみんなで共有（写真）
この記事では、ソーシャル ウェブサイトのホームページを比較分析することで洞察を得て、ソーシャル ウェ...
Linux システム (CentOS7 インストール) に JDK8 をインストールするための詳細なチュートリアル
JDKのインストールシステムのインストールについてはあまり詳しく説明しません。インストール手順はオン...
MySQL エラー コード 1064 の解決策
SQL ステートメント内の単語が mysql のキーワードと競合する場合は、`` (タブ キーの上)...
MySQLの基礎知識学習ノート
データベースを表示show databases;データベースを作成するDATABASE データベース...
MYSQL ログとバックアップおよび復元の問題の詳細な説明
この記事では、参考までにMYSQLログとバックアップとリストアについて紹介します。具体的な内容は以下...
Vue 3 での watch と watchEffect の新しい使い方
目次1. 時計の新しい使い方1.1. ウォッチの使用構文1.2. 複数の属性値を監視する1.3. 参...
JavaでTomcatサーバーを起動/停止する方法
1. プロジェクト構造 2.Tomcat.javaを呼び出す パッケージ com.calltomca...
MySQLのファジークエリの要約
1. 一般的な使用法: （１）％で使用する% は 1 つ以上の文字のワイルドカードを表します。たとえ...
MySQLフィールドのデフォルト値を設定する方法
目次序文： 1. デフォルト値に関する操作2. 使用上の提案要約:序文： MySQL では、テーブル...
Linux ファイル/ディレクトリの権限と所有権の管理
1. ファイルの権限と所有権の概要1. アクセス権Read r: ファイルの内容を表示し、ディレクト...
モバイル端末におけるビューポートの具体的な使用法についての簡単な説明
目次1. 基本概念1.1 2種類のピクセル1.2 3つのビューポート2. ビューポート設定3. 1回...