CSS3 カテゴリメニュー効果
|
CSS3 カテゴリ メニューの効果は次のとおりです。
html
<html>
<ヘッド>
<タイトル></タイトル>
<スタイル タイプ="text/css">
#bg { 幅: 1270px; 高さ: 751px; マージン: 0 auto; 背景: url("images/bg.jpg") no-repeat; }
.sblock { 幅: 800px; 高さ: 250px; マージン: 0 auto;}
/*.sblock { transform:translateY(65%); }*/
.sblock > div { 幅: 200px; 高さ: 250px; マージン: 0 auto; }
.sb1 { パディングトップ: 170px; }
.sb2 { パディングトップ: 30px; }
.sblock div:hover { transform: translateY(-10px); }
.sblock div { transition:all 0.5s; }
.sb1 > div:nth-of-type(1) { float: left; background: url("images/1.jpg") no-repeat; }
.sb1 > div:nth-of-type(2) { float: left; background: url("images/2.jpg") no-repeat; }
.sb1 > div:nth-of-type(3) { float: left; background: url("images/3.jpg") no-repeat; }
.sb1 > div:nth-of-type(4) { float: left; background: url("images/4.jpg") no-repeat; }
.sb2 > div:nth-of-type(1) { float: left; background: url("images/5.jpg") no-repeat; }
.sb2 > div:nth-of-type(2) { float: left; background: url("images/6.jpg") no-repeat; }
.sb2 > div:nth-of-type(3) { float: left; background: url("images/7.jpg") no-repeat; }
.sb2 > div:nth-of-type(4) { float: left; background: url("images/8.jpg") no-repeat; }
</スタイル>
</head>
<本文>
<div id="bg">
<セクションクラス="sblock sb1">
<div></div>
<div></div>
<div></div>
<div></div>
</セクション>
<セクションクラス="sblock sb2">
<div></div>
<div></div>
<div></div>
<div></div>
</セクション>
</div>
</本文>
</html>要約する 上記はエディターが紹介したCSS3分類メニュー効果です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残してください。エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: VMwareのCentosシステムでNavicatがMySQLサーバーに接続できない問題を解決します
推薦する
CentOSはexpectを使用してスクリプトやコマンドをバッチでリモート実行します
サーバーへのファイルのアップロード、ソフトウェアのインストール、コマンドやスクリプトの実行、サービス...
nginx を使用して同じドメイン名で複数の Vue プロジェクトをデプロイし、リバース プロキシを使用する方法
効果現在、プロジェクトは2つ（project1、project2）あり、nginxに付属するinde...
Tomcat 初回展開 Web プロジェクト プロセス図
独自のWebプロジェクトをtomcatディレクトリの下のwebappsディレクトリに配置します。 R...
Linux で Hadoop クラスターをインストールするための詳細な手順
目次1. usrディレクトリにHadoopディレクトリを作成し、インストールパッケージをそのディレク...
MySQL の undo、redo、binlog の違いを簡単に分析します
目次序文【ログ取り消し】 【REDOログ】 【バイナリログ】要約する序文MySQL には、REDO ...
MySQL 8.0.18 のインストールと設定方法のグラフィックチュートリアル
この記事は、参考のためにMySQL 8.0.18のインストールと設定のグラフィックチュートリアルを記...
jsでシンプルなパズルゲームを実現する
この記事では、簡単なパズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な...
MySQLとOracleのメタデータ抽出例分析
目次序文メタデータとは参照文書アドレスまずはMySQLについてお話しましょうOracleについて話し...
Vue で動的に読み込まれたローカル画像を処理する方法
問題を見つける今日は、vue ファイルにローカル画像を導入する際に問題が発生したので、この記事を書き...
MySQL 8.0.12 簡単インストールチュートリアル
この記事では、MySQL 8.0.12のインストールチュートリアルを参考までに紹介します。具体的な内...
MySQL クエリの最適化: クエリが遅い原因と解決策
開発に携わっている友人、特に MySQL に関係のある友人は、非常に遅い MySQL クエリに遭遇す...
Dockerコンテナのネットワーク管理とネットワーク分離の実装
1. Dockerネットワーク管理1. Dockerコンテナ方式1) Dockerが外部ネットワーク...
WeChatアプレットは水平および垂直スクロールを実現
この記事の例では、WeChatアプレットの水平スクロールと垂直スクロールを実現するための具体的なコー...
Docker を使用した Alibaba Cloud Server のインストールと、仮想マシンへのインストールで遭遇する落とし穴 (問題のまとめ)
Docker インストール (Alibaba Cloud Server) Docker 公式 Ce...
HTML と CSS の基礎 (必読)
(1) HTML: ハイパーテキストマークアップ言語。主に「ヘッダー」と「ボディ」の2つの部分で構...