导航条div+css实现_html/css_WEB-ITnose

string path = request.getcontextpath();
string basepath = request.getscheme()+”://”+request.getservername()+”:”+request.getserverport()+path+”/”;
%>

    <base href="”>
    
    
   
   
 
 
    
 
 
 <!–

–>
 /* 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;
}

 
 
    
       
          
             
              after:在元素的内容后面添加内容，相当于添加一个行内的元素
before:在元素的内容后面添加内容，相当于添加一个行内的元素
–>

结果：

立即学习“前端免费学习笔记（深入）”；

登录后复制