フリップメニュー演習
<！DOCTYPE HTML> <HTML LANG = "EN"> <HEAD> <メタ文字コード= "UTF-8"> <タイトル> D174_OverturnMenu </ TITLE> <スタイル> * { マージン：0 ; パディング：0 ; } UL { 幅：400ピクセル。 高さ：40ピクセル ; マージン：0自動 ; マージントップ：100ピクセル ; 背景色：黄色 ; } .nav>リチウム { リストスタイル：なし。 フロート：左 ; 幅：120ピクセル ; 高さ：40ピクセル ; margin-left：10pxの ; 背景色：緑 ; 行の高さ：40ピクセル ; テキスト整列：センター ; } .SUB { / * 表示：なし; *代表不显示元素*！* / } .SUB>リチウム { リストスタイル：なし。 背景色：赤。 変換：回転Y（原稿180°） 。 トランジション：すべて。/ * 不透明度：0; *透明度、取值0-1 *！* / } .nav>のLi：ホバー.SUB李 { 変換：なし。 } .nav>のLi：ホバー.SUBリチウム：n番目の子（1） { 変換しない：何を。 遷移遅延 ：200msの ; } .nav>のLi：ホバー.SUBリチウム：n番目の子（2） { 変換しない：何を。 遷移遅延：400msの。 } .nav>のLi：ホバー.SUBリチウム：n番目の子（3） { 変換しない：何を。 遷移遅延：600msの。 } .nav>のLi .SUBのリチウム：n番目の子（3） { 変換しない：何を。 遷移遅延時間：200ミリ秒。 } .nav>のLi .SUBのリチウム：n番目の子（2） { 変換しない：何を。 遷移遅延：400msの。 } .nav>のLi .SUBのリチウム：n番目の子（1） { 変換しない：何を。 遷移遅延：600msの。 } </スタイル> </ head> <body> <ULクラス= "NAV"> <LI>一级菜单 <ULクラス= "サブ"> <LI>二级菜单</ LI> <LI>二级菜单</ LI> <LI>二级菜单ます。</ li> <LI>メニュー</ LI> <LI>メニュー</ LI> </ UL> </ BODY> </ HTML>
第二に、ソースコード：
D174_OverturnMenu.html
D173_ShadowOfBoxAndWord.html
住所：
https://github.com/ruigege66/HTML_learning/blob/master/D174_OverturnMenu.html
https://github.com/ruigege66/HTML_learning/blob/master/D173_ShadowOfBoxAndWord.html
2.CSDNます。https：//blog.csdn.net/weixin_44630050
3.パークブログます。https：//www.cnblogs.com/ruigege0000/
4.歓迎マイクロチャンネル公衆数に焦点を当て：フーリエだけ技術交流のために、個人アカウントを変換し、舞台裏の返信「贈り物」ビッグデータ集録Javaの学習ビデオのパッケージ
