导航条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

</script>

</body>
</html>java

结果：android