定制foundation顶部工具栏-Web前端之家

Zurb开垦的第5版本Foundation使得最上端工具栏表现为特别杰出,特出的最上部工具栏大约成为多少个由Foundation搭建起来网址的代表成分。几日前我们将学习怎样通过分裂方法去达成它,把它放置在页面的此外地点,让您全部自定义样式和响应式的水平导航菜单。

归纳的单级下拉菜单达成,级下拉菜单

CSS3是CSS2的进级版本,3只是本子号,它在CSS2.1的根底上增添了成都百货上千有力的新效率。
近期主流浏览器chrome、safari、firefox、opera、以至360都曾经支撑了CSS3许多效果与利益了,IE10随后也早先康健帮助CSS3了。在编排CSS3样式时,区别的浏览器也许要求不一样的前缀。它象征该CSS属性或法则还没成为W3C规范的一部分,是浏览器的个体属性,即使眼下较新本子的浏览器都以无需前缀的,但为了越来越好的前行包容前缀依然必需的。

奥门金沙手机娱乐网址,先是大家将急需最新版本的Foundation。解压源码包何况把全部的文书放置在您的工程也许测量检验目录下。大家将直接动用index.html文件,创制一个style.css样式文件将用来重写顶上部分工具栏的体裁来达到自定义导航栏效果。

作用预览

这里用纯CSS完结八个不难的单级下拉菜单,鼠标划过菜单题目时显得下拉菜单。

前缀

浏览器

-webkit

chrome和safari

-moz

firefox

-ms

IE

-o

opera

 

搭起HTML结构

基本思路

在菜单处于光标之下时呈现菜单,其他时候隐蔽。这么些进度首先得想到 :hover
伪类来达成,不过平昔的运用伪类还特别,因为平日状态下菜单掩瞒了,不可能触发
:hover
,但是下拉菜单隐敝了不是还会有菜单标题么,菜单标题处于光标之下时展现菜单就能够显得出来了,不过鼠标移到菜单上的时候下拉菜单又会消退,此时想到给下拉菜单也助长
:hover
显示自个儿,可是万一脑洞大开,要做分体菜单如何做,那个时候把它放进多少个容器呗,利用标签的嵌套关系,去给容器的
:hover 伪类的派生成分写样式就整个化解啦。

CSS3给大家带给了哪些受益呢?总体上看,CSS3把无数在先供给接收图片和脚本来完毕的效果、甚至动漫效果,只需求短短几行代码就能够解决。比方圆角,图片边框,文字阴影和盒阴影,过渡、动漫等。

先是步:常用的模板

上HTML结构

 1 <ul id="dropdown-wrapper">
 2 <li>
 3     Rewrite
 4     <ul class="dropdown-sublist">
 5         <li>Kotarou</li>
 6         <li>Kotori</li>
 7         <li>Akane</li>
 8         <li>Kagari</li>
 9         <li>Lucia</li>
10         <li>Shizuru</li>
11         <li>Chihaya</li>
12     </ul>
13 </li>
14 <li>
15     Clannad
16     <ul class="dropdown-sublist">
17         <li>Tomoya</li>
18         <li>Nagisa</li>
19         <li>Ushio</li>
20         <li>Ryou</li>
21         <li>Kyou</li>
22         <li>Yukine</li>
23         <li>Fuko</li>
24         <li>Tomoyo</li>
25         <li>Kotomi</li>
26     </ul>
27 </li>
28 <li>
29     Air
30     <ul class="dropdown-sublist">
31         <li>Yukito</li>
32         <li>Misuzu</li>
33         <li>Kano</li>
34         <li>Minagi</li>
35     </ul>
36 </li>
37 </ul>

定制foundation顶部工具栏-Web前端之家。