ホームページ

JS特殊効果

CSS3特殊効果

css3模倣Xiaomi公式Webサイトのナビゲーションドロップダウンメニューコード

CSS3 模倣 Xiaomi 公式 Web サイトのナビゲーションドロップダウンメニューコード

ダウンロード中プレビュー

<title>css3仿小米官网导航下拉菜单代码</title>

<style type="text/css">
*{マージン: 0px;パディング:0px;}
.nav {位置: 相対;幅:994px;高さ:52px;背景: #404144;マージン:0 自動;}
.nav li{リストスタイル: なし;フロート: 左;行の高さ: 50ピクセル;}
.nav li a{表示: ブロック;テキスト装飾: なし;カラー: #FFFFFF;パディング: 0px 15px;font-family: "微软雅黑";}
.nav li a:hover .xs{表示: ブロック;}
.nav li a:hover {背景: #333333;}
.nav li a .xs{ボーダー:1px ソリッド #cccccc;ボーダートップ:なし;表示:なし;幅:992ピクセル;背景:#FFFFFF;位置:絶対;トップ:50ピクセル;左:0ピクセル;}
.nav li a .xs .xiao {position:absolute;top:-8px;border-left:8px ソリッド透明;border-right:8px ソリッド透明;border-bottom:8px ソリッド #FFFFFF;width:0px;height:0px ;z-インデックス: 999;}
.nav li:nth-child(1) .xiao {left:20px;}
.nav li:nth-child(2) .xiao {left:98px;}
.nav li:nth-child(3) .xiao {左:177px;}
.nav li:nth-child(4) .xiao {left:255px;}
.nav li:nth-child(5) .xiao {left:348px;}
.nav li:nth-child(6) .xiao {left:427px;}
.nav li:nth-child(7) .xiao {左:496px;}
.nav li:nth-child(8) .xiao {left:576px;}
.nav li:nth-child(9) .xiao {left:646px;}
.nav li:nth-child(10) .xiao {左:706px;}
</スタイル>
</頭>

<body><script src="/demos/googlegg.js"></script>

<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">小米手机
<div class="xs">
<div class="xiao"></div>
<img src="img/1.jpg" />
</div>
</a></li>
<li><a href="#">红米
<div class="xs">
<div class="xiao"></div>
<img src="img/2.jpg" />
</div>

一款色风格の台湾小米官方网站 css3 は航行下拉菜单コード、厳密に実用的 css3 问题航菜单网页特。

免責事項

このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロードサイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn

CSS3 ライクアニメーション特殊効果ソースコード download_html/css_WEB-ITnose

24 Jun 2016

CSS3ライクアニメーション特殊効果ソースコードダウンロード

Xiaomi 公式 Web サイトの CSS3 ナビゲーションメニュー code_html/css_WEB-ITnose

24 Jun 2016

Xiaomi 公式ウェブサイトの CSS3 ナビゲーションメニューコード

CSS3 特殊効果を上手に使って Web ページのユーザーエクスペリエンスを向上させる方法

09 Sep 2023

CSS3 特殊効果を上手に使って Web ページのユーザーエクスペリエンスを向上させる方法インターネットの発展に伴い、Web デザインとユーザーエクスペリエンスは Web サイト開発における重要なリンクとなっています。 CSS3 特殊効果を適用すると、Web ページにダイナミクスと視覚効果を追加し、ユーザーエクスペリエンスを向上させることができます。この記事では、開発者が CSS3 特殊効果の使用に習熟し、Web ページのユーザーエクスペリエンスを向上できるように、いくつかの一般的な CSS3 特殊効果とそのコード例を紹介します。トランジション効果（Transition）トランジション効果はCSS3における最も基本的な特殊効果の一つで、特定の属性を変更することで実現できます。