導航條div+css實現

時間 2019-11-21

標籤導航 div+css div css 實現欄目 HTML 简体版

原文原文鏈接

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
     <title> 多邊形導航特效 </title>
     <meta charset="utf-8">
    <meta name="keywords" content="關鍵詞1,關鍵詞2">
    <meta name="Dscription" content="描述">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<style >/* css樣式的我盒子*/
*{/*默認的瀏覽器都有邊距，但企業開發不需因會影響性能*/
  margin:0px;/*外邊距*/
  padding:0px;/*內邊距與外框的距離*/
}
body{
  /*background-image:url("/image/背景.jpg");/*添加背景圖片*/
        background:00CC33;
}
#box{/*每一個瀏覽器有間距默認8px*/
      width:980px;
   height:500px;
  /* background:red;*/
   margin:100px auto;/*上下爲100px 左右居中*/
}
ul li{
  list-style:none;/*去除無序列表的小圓點*/;
  width:180px;
  height:105px;
  background:rgba(0,0,0,0.8);/*紅:0px;綠:0px;藍:0px;半透明:0.5,0全透明並以一列顯示半透明長方體*/
  float:left;/*半透明:0。5並以一行顯示半透明長方體一行完了跑到第二行*/
  margin:30px 5px; /*外邊距*/
  relative;/*相對定位*/
}
li.curr{
  margin-left:100px;
}
li:after{
    content:"";
    width:180px;
    height:105px;
    display:block;
    background:rgba(0,0,0,0.8);/*紅:0px;綠:0px;藍:0px;半透明:0.5並以一列顯示*/
    position:absolute;/*絕對定位（須要一個參考物）找上一個realative*/
    transform:rotate(60deg);

     z-index:1;/*在absolute採用，定位屬性層級越高顯示誰*/

}
li:before{
    content:"";
    width:180px;
    height:105px;
    display:block;
    background:rgba(0,0,0,0.5);/*紅:0px;綠:0px;藍:0px;半透明:0.5並以一列顯示*/
    position:absolute;/*絕對定位（須要一個參考物）找上一個realative*/
    transform:rotate(-60deg);
       margin:0px 0px;/*也能夠不加一單圖片多刷新起來後面的很差順着顯示*/
    /*left:0px;top:0px;當前標籤會使跑到總體的外邊距0px*/
   }
img{
position:absolute;
  margin:12.5 50px;
  z-index:2;
}
</style>
</head>
<body>

   <div id="box">
        <ul>
           <li>
             
             <img src="image/android.png" width="80" height="80" alt="C++"></li>
           <li><img src="image/android.png" width="80" height="80" alt="C++"></li>
           <li><img src="image/android.png" width="80" height="80" alt="C++"></li>
           <li><img src="image/android.png" width="80" height="80" alt="C++"></li>
           <li><img src="image/android.png" width="80" height="80" alt="C++"></li>
           <li class="curr"><img src="image/android.png" width="80" height="80" alt="C++"></li>
           <li><img src="image/android.png" width="80" height="80" alt="C++"></li>
           <li><img src="image/android.png" width="80" height="80" alt="C++"></li>
           <li><img src="image/android.png" width="80" height="80" alt="C++"></li>
           <li><img src="image/android.png" width="80" height="80" alt="C++"></li>
           <li><img src="image/android.png" width="80" height="80" alt="C++"></li>
           <li><img src="image/android.png" width="80" height="80" alt="C++"></li>
           <li><img src="image/android.png" width="80" height="80" alt="C++"></li>
           <li><img src="image/android.png" width="80" height="80" alt="C++"></li>
        </ul>
    </div>
<p id="demo">點擊按鈕獲取您當前座標（可能須要比較長的時間獲取）：</p>
<button onclick="getLocation()">點我</button>
<script>
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 +
"<br>經度: " + position.coords.longitude;
}html