ナビゲーション バー div+css 実装_html/css_WEB-ITnose

9cc7b1ceaeb489a5a320357ae3cfd05c4e4f6c4af085d41a9e9405ec0b03d450
1721bedc82ee74fd0d7d1175da9cffe1

f2f216197c980f48d6fa614d63dba7b0
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e72f834d73d8b16d27ac53d4a6428854b
c468804b1ce666a82dc7bf9d2d1d12df">
b2386ffb911b14667cb8f0f91ea547a7 ポリゴン ナビゲーション効果6e916e0f7d1e588d4f442bf645aedb2fa145ca826a0b611cd267b503c2846e76
09477266eebbc8a01f42387ae29e71dd !--文字エンコーディング: utf-8 国際エンコーディング gbk gb2312-->
735cb11df6eeeacaa33f4f1feefbd55a0933f2664004e0fa4c9ee322d2123053
< ;meta name="Dscription" content="Description">2e1123552126188a281422b550112ac3
1ffa46d740f7772671d2a12398d5f16f
2a9f113ce2db858336c4f4858b61bb07キーワード" content="キーワード 1,キーワード 2,キーワード 3">
5d9d8c1156fb726960e26ad20db393ff
26837abdf9617ea60e4461709a069704
-->
393189c136c5df44a20f4cb75e81d9fa/* CSS スタイルのマイ ボックス*/
*{/*デフォルトのブラウザにはマージンがありますが、エンタープライズ開発ではマージンが発生しますパフォーマンスへの影響を心配する必要はありません*/
margin:0px;/*outside margin*/
padding:0px;/*内側のマージンと外側のフレームの間の距離*/
}
body{
/*background -image:url("/image/Background.jpg");/*背景画像を追加します*/
background:00CC33;
#box{/* 各ブラウザのデフォルトの間隔は 8 ピクセルです :980 ピクセル
高さ: 500 ピクセル;
/* 背景: 赤; 小さなドットのリスト*/;
width:180px;
height:105px;
background:rgba(0,0,0,0.8);/*Red:0px;Green:0px;Blue :0px;Translucent:0.5 ,0 完全に透明で、半透明の直方体を 1 列で表示します*/
float:left;/*translucent:0.5 で、半透明の直方体を 1 行で表示し、1 行後に 2 行目まで実行します*/
margin:30px 5px; /* マージン*/
相対;/*相対位置*/
}
li.curr{
margin-left:100px;
}
li:after{
content:"";
width:180px ;
高さ:105px;
表示:ブロック;
背景:rgba(0,0,0,0.8);/*赤:0px;緑:0px;青:0px;半透明:0.5 で 1 列に表示されます*/
Position:absolute;/* 絶対位置決め (参照オブジェクトが必要) realative を検索*/
transform:rotate(60deg);

z-index:1;/* 絶対位置で使用すると、位置決め属性レベルが高くなります。表示される*/

}
li :before{
content:"";
width:180px;
height:105px;
display:block;
background:rgba(0,0,0,0.5);/*Red :0px;Green:0px;Blue: 0px; translucent: 0.5 で 1 列に表示*/
Position:absolute;/*絶対位置指定 (参照オブジェクトが必要) 現実的なものを検索*/
transfer:rotate(-60deg);
margin:0px 0px;/* 画像を 1 つも追加せずに複数回更新することもでき、途中で後続の画像が表示されます */
/*left:0px;top:0px;全体のマージンは 0px*/
}
img{
Position :absolute;
margin:12.5 50px;
z-index:2;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d7e1e5cd8fdebff5adfc46b6d62ac3d16
40d6379afe4e0af426e4ace0f9d12435
--img 画像 4 つの要素 src 幅 高さ alt (画像の説明) -->
             e16763c23de3d91632fcef69943684a8bed06894275b65c1ab86501b08a632eb
f187641c44911c26c49db8e1cb7e51d7bed06894275b65c1ab86501b08a632eb

e16763c23de3d91632fcef69943684a8bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6e16763c23de3d91632fcef69943684a8 25edfb22a4f469ecb59f1190150159c6e16763c23de3d91632fcef69943684a8bed06894275b65c1ab86501b08a632eb

25edfb22a4f469ecb59f1190150159c6edf0261b37b1df0a64aa2cde04aa5c97bed06894275b65c1ab86501b08a632eb
695d65b312376ec1ac1e14175e6346b6bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6e16763c23de3d91632fcef69943684a82867e861ba23559b572f230426ab14ea
25edfb22a4f469ecb59f1190150159c6e16763c23de3d91632fcef69943684a8bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c66a7d1f6953a0230406ed9b4c37cd9acbbed06894275b65c1ab86501b08a632eb
5dfd7fc8db4c7a453084418fb2965ad0bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c666d1e3f87a4db3789b486c0cd1e7fe68bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6e16763c23de3d91632fcef69943684a8bed06894275b65c1ab86501b08a632eb
c9216a139dfb7706b52f46f5ed1bdd67
16b28748ea4df4d9c2150843fecfba68
0bf414e67870ee96d072302d7866e0b1点击按钮获取您当前座標标（可能性必要比较长的時間间获取）：94b3e26ee717c64999d7867364b1b4a3
3c25f8410c81184fc00842a5eaadb155点我65281c5ac262bf6d81768915a4a77ac0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation. getCurrentPosition(showPosition);
}
else{x.innerHTML="この浏览器は地理的位置の取得をサポートしていません。";}
}
function showPosition(position)
{
x.innerHTML=" 精度: " +position.coords .latitude +
"089fbb86d9399ff72cfc220838bb151c
912549d268a2c21987011ca2ff905e39
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

结果：