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サーバーに接続できない問題を解決します
推薦する
mysqlはエクスポートされたデータのsqlファイルから指定されたテーブルのみをインポートすることを実装します
シナリオ昨日、システムは dbAll.sql.gz という名前の特定のデータベースのすべてのテーブル...
MySQLで時間を判定条件として使用する方法
背景: 開発プロセスでは、現在の月、現在の日、現在の時間、今後数日など、時間を判断条件としてデータを...
モバイルフロントエンド適応ソリューション（概要）
ネットで検索してみたところ、多くの面接でモバイル適応方法について質問されることが分かりました。最近い...
Pycharmとsshリモートアクセスサーバーdockerの詳細なチュートリアル
背景: 一部の実験はサーバー上で完了する必要があります。したがって、リモート サーバー上のコードをロ...
TypeScript での関数オーバーロード
目次1. 関数シグネチャ2. 関数のオーバーロード2.1 オーバーロードされたシグネチャは呼び出し可...
WeChatアプレットでグローバル変数を監視する方法
最近、仕事で問題に遭遇しました。グローバル変数 red_heart があります。これは多くの場所で使...
DockerでVueプロジェクトをデプロイする方法を教えます
1.前面に書きます:軽量仮想化テクノロジーとして、Docker には継続的インテグレーション、バージ...
Jsonフォーマットの詳細な説明
目次JSON は次の 2 つの構造に基づいて構築されます。 2. JSON形式1. オブジェクト2....
JDBC および MySQL 一時テーブルスペースの詳細な分析
背景一時テーブルスペースは、データベースのソート操作を管理し、一時テーブルや中間ソート結果などの一時...
React setStateデータ更新メカニズムの詳細な説明
目次setStateを使用する理由setStateの使用法非同期または同期更新要約するsetStat...
Linux システムの仮想ホストで Swoole Loader 拡張機能を有効にする方法
特記事項: Swoole 拡張機能のみがインストールされ、サーバーはホストにインストールされません。...
CSS プロパティ display:flow-root 宣言を 1 つの記事でマスターする
zhangxinxu より https://www.zhangxinxu.com/wordpress...
MySQL でのログインを取り消す
コンセプト紹介: MySQL の redo ログにはトランザクションの動作が記録されることはご存じの...
MySQL 5.6 の「暗黙的な変換」によりインデックスが失敗し、データが不正確になる
背景SQL クエリを実行するときに、where 条件の vachar 型フィールドの単一引用符を削除...