第四十四章 定位实例(五)

然后就是给这个按钮加装一个菜单用来弹出。这很像我们前边写二级菜单的操作,其实也没什么本质上的区别,管他几级呢,反正都是弹出菜单罢了。

所以也不过是加一个列表而已,懒惰如我,直接把上边的二级菜单复制过来了。

<div id=“show-nav”>

<div class=“button”><br><br><br></div>

<ul>

<li>小分类一</li>

<li>小分类二</li>

<li>小分类三</li>

<li>小分类四</li>

</ul>

</div>

这并不复杂,那么他的 CSS 跟上边二级导航的也差不多:

#show-nav ul {

display: none;

margin: 0;

padding: 0;

background:rgba(54,54,54,0.6);

position: absolute;

left: 20px;

bottom: 20px;

z-index: 50;

}

#show-nav:hover ul {

display: block;

}

#show-nav ul>li {

width: 80px;

margin: 0;

padding: 0 35px;

list-style: none;

float: left;

color: #FCFCFC;

line-height: 36px;

border-bottom: 1px solid #666;

}

除了定位值发生了一些变化,其他几乎没有改变,所以就不多说了。只说一个小区别:

background:rgba(54,54,54,0.6);,一般我们用的如 #FFFFFF 形式的颜色值,是 RGB 颜色值,第一二位表示红色的浓度,三四位是绿色,五六位是蓝色。现在我们换了一个 rgba 格式,其实就是多了一个透明度的数值,当然其他区别也是有的,#FFFFFF 用的是十六进制,而我们现在写的 rgba 后面用的是十进制,前三个数值分别表示红绿蓝三种颜色的浓度,数值为 0——255 之间的整数。而最后一位是透明度,可以是 0 到 1 之间的小数。这个办法就可以简单的设置一个透明背景。

然后注意这次设置的 z-index:50; 而上节课我们给 #show-nav .button 设置的是 99。他们数字的值并不重要,重要的是他们之间的大小关系。这样是为了让弹出的菜单显示在按钮后面,也就是按钮遮住弹出菜单的左下角,显得更美观一些。

然后来看看效果:

图片[1]-第四十四章 定位实例(五)-易看设计 - 专业设计师平台

这几节课的案例都是很常见的一些情境,定位的用法也并不复杂,稍微认真思考一下都可以理解,然而重要的不是技术本身,而是利用技术的思路。嗯哼,多思考哦~

本章代码下载:本章代码

© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容