导航及悬浮层制作模板与技巧

来源：互联网发布：南昌金域名都编辑：程序博客网时间：2024/06/05 23:54

技巧一：如图

即：悬浮层类似于从侧栏伸展出来的效果

<li>

</li>

.menu li:hover .submenu{display: block;}.submenu{display: none;padding-left: 20px;width: 500px;border:1px solid #999;position: absolute;top:35px;left:198px;z-index:2;background-color: white;}

.menu li:hover span{/*vertical-align: middle;*/position:relative;background-color: white;height: 28px;width:10px;/*right:0;left: auto;这样不行...why？*/float:right;z-index: 3;display: inline-block;}

通过设置一个有背景颜色的内联元素，去遮盖边框

注意：

1、导航层display:relative,悬浮层display:block,并且left的距离稍稍小于导航的宽度

2、span的position:relative并且需要float:right

3、span的层级要高于悬浮层的层级

技巧二：如图

即：dt dd垂直对齐问题

<dl class="subitem"><dt ><a href="#">智能数码</a></dt><dd><a href="#">智能设备</a><a href="#">智能手表</a><a href="#">智能手环</a><a href="#">智能健康</a><a href="#">智能机器人</a><a href="#">智能设备</a><a href="#">智能设备</a><a href="#">智能设备</a></dd></dl>

.submenu .subitem dt{font-size: 13pt;float: left;text-align: right;vertical-align: middle;padding-right:10px;height: 28px;line-height: 28px;}.submenu .subitem  dd a{font-size: 10pt;height: 18px;line-height: 17px;margin:5px 0;padding: 0 5px;border-left: 1px solid #ccc;vertical-align: middle;}

注意：

1、设置不同的高度（与行高），否则竖线阴影会和dt一样高

2、通过(dt的height减去a的height)/2 作为magin-top,和margin-bottom来调整高度，使二者对齐

（或者通过margin-top:负像素来调整）

技巧三：如图

即：使底边线不紧挨侧边

<div class="shopClass_list  hide"><div class="shopClass_cont"><dl class="shopList_item"><dt>电脑整机</dt><dd><a href="#">笔记本</a><a href="#">平板电脑</a><a href="#">台式机</a><a href="#">超极本</a><a href="#">上网本</a></dd></dl></div></dv>

注意：

就是通过再嵌套一层div，使内层的div有border-bottom,而外层的div有padding-left,padding-right即可

0 0