独书先生 Menu

CSS:li标签实现对称效果

布局:ul中4个li标签,以中间为轴对称

分析:浮动,50%,box-sizing,padding

注意:要实现分块区域对称,li不能加margin,会被挤下来,应加上padding后设置a元素背景白色,即与大背景分离

css 对称分布效果 css 对称分布效果

 
CSS:

 .nav_two li{float:left;
    width:50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    --box-sizing: border-box;
    box-sizing: border-box;opadding:8px;}

.nav_two li a{display:block;
    background:#fff;
    height:65px;
    width:100%;
    -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.3);}