index.html文件之中早就预包含部分HTML代码,伪类来促成

你可以删掉其他内容代码,我们将采用一种全部宽度的设计,这不是很复杂的,只是需要想到更好的办法来处理它。

CSS

实现的关键就在那些打惊叹号的规则,写好显示与不显示时两个状态的下拉菜单的属性。同时添加了一些渐变以及平移让菜单显示更加自然。

 1 body{ margin:0; padding:0;
 2 
 3     font-size:18px;
 4 
 5     background-color:#aaa;
 6 }
 7 h1{margin:2em 0.4em 0 0.4em;color:#eee;font-size:3em;}
 8 #dropdown-wrapper{
 9     display:block;
10 
11     margin:4em 1em 0 1em;
12 }
13 #dropdown-wrapper li{
14     /*!!!!!!!!!!!!*/
15     display:inline-table;
16     padding:0;
17     margin:0;
18 
19     position:relative;
20 
21     width:10em;
22 
23     background:#fff;
24 
25      -webkit-transition:all ease-in-out 0.3s;
26     transition:all ease-in-out 0.3s;
27 }
28 #dropdown-wrapper span{
29     display:block;
30     padding:0.4em 1em;
31     width:10em;
32     color:#333;
33 }
34 #dropdown-wrapper span:after{
35     display:inline-block;
36     float:right;
37     content:">";
38 
39     -webkit-transform:rotate(0deg);
40     transform:rotate(0deg);/*为了渐变*/
41 
42      -webkit-transition:all ease-in-out 0.3s;
43     transition:all ease-in-out 0.3s;
44 }
45 #dropdown-wrapper li:hover span:after{
46     -webkit-transform:rotate(90deg);
47     transform:rotate(90deg);/*划过的时候那个右箭头旋转90度,变成朝下的啦*/
48 }
49 #dropdown-wrapper li ul{
50     /*!!!!!!!!!!!!*/
51     display:block;
52     position:absolute;
53 
54     padding:0;
55     margin:0;
56 
57     height:0;/*平时的时候隐藏下拉列表*/
58     line-height:0;/*0行高,这个的作用是用来制造一个文字展开的效果*/
59     overflow:hidden;
60 
61     color:#555;
62 
63     opacity:0;
64 
65     -webkit-transform:translateY(-1em);
66     transform: translateY(-1em);
67 
68      -webkit-transition:all ease-in-out 0.3s;
69     transition:all ease-in-out 0.3s;
70 }
71 #dropdown-wrapper li ul>li{
72     padding:0.7em 1em;
73 
74 }
75 #dropdown-wrapper li:hover ul{
76     /*!!!!!!!!!!!!*/
77     /*这是容器处于光标下时的下拉列表的状态,
78      *这个时候就是要做的就是显示下拉菜单咯
79     */
80     opacity:1;
81     height:auto;
82     line-height:1em;
83 
84     -webkit-transform: translaY(0);
85     transform: translateY(0);
86 }
87 #dropdown-wrapper li:hover span{
88     color:rgb(0,173,238);
89 }
90 #dropdown-wrapper li:hover ul>li:hover{
91     background:rgb(0,173,238);
92     color:#eee;
93 }

一、圆角(border-radius)是向元素添加圆角边框。

      border-radius: 5px 4px 3px 2px; /*
四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 

二、阴影 (box-shadow)

  box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径]
[阴影颜色] [投影方式];

  图片 1

  注意:inset
可以写在参数的第一个或最后一个,其它位置是无效的。

  .box_shadow
    {
  

             box-shadow:4px 2px 6px #333333 inset;   

         
 }

  添加多个阴影:

  以上的语法的介绍,就这么简单,如果添加多个阴影,只需用逗号隔开即可。如:

  .box_shadow{ box-shadow:3px 2px 5px #f00, -3px -2px 5px #000, 0px
0px 12px 5px #33CC00 inset; }

 

三、边框应用图片( border-image)

  border-image的语法:

  图片 2

代码:

  #border_image {
    margin:0 auto;
    height:100px;
    line-height:100px;
    text-align:center;
    font-size:30px;
    width:450px;
    border:15px solid #ccc;
    border-image:url(images/1.jpg) 70 repeat;
  }
  <div id=”border_image”>
     请为我镶嵌上漂亮的画框吧
  </div>

四、颜色

      background-color:rgba(100,120,60,0.5);

备注:更多关于网格系统如何运行的,可以回顾教程第二章:WEB前端框架-Foundation之网格系统

简单的单级下拉菜单实现,级下拉菜单

CSS3给我们带来了什么好处呢?简单的说,CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影,过渡、动画等。

好的,我们将编写header、导航、主内容和footer区域的内容,我们将给每个区域都添加class=”full-width”,然后再添加一个块元素

上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>

 

前缀

浏览器

-webkit

chrome和safari

-moz

firefox

-ms

IE

-o

opera

 

Foundation-4CustomTopBar

Loremipsumdolorsitamet,consecteturadipisicingelit.Harum,asperiores,voluptas,veniamcommodiimpeditteneturdolorescumquefacereexplicaboessequaeratveritatislaboriosameiusmodiametmaximenonofficianemo?Iste,quisquam,voluptatum,dolornamreiciendisundealiquamnumquamnecessitatibusodioetperspiciatisfacerenihilinventoreullamaspernaturcorporisveritatisquiadolorum?Sed,hic,eosquisquibusdameumautoptiorepudiandaeat!Eligendi,nequerationealiasenimquaemagnamdoloresessepariaturearumlaborumreiciendisnobissuntsequisapienteducimusiureipsam.Sapiente,minima,rerum,facerequossaepepariaturmagnidoloremcumametnemoquislaborumipsadignissimosducimusinventoremodiremcumquequibusdamquamasperiores!Optio,nobissuscipitmolestiasvoluptasveritatisaspernaturaccusamusexcepturiremquaeratimpeditanimivoluptateatfacilisaliquidcumfugitlaboreomnisprovidentrecusandaeautem.Doloribus,mollitiaquosofficiisquassapientenamdolorpraesentiummaximecupiditateillum?Rem,esse,nullavitaeadipiscisequidelenitiquasi!

©2014

第二步:顶部工具栏标记

在编写样式之前,我们需要编写出一些必须的HTML结构代码使得Foundation顶部工具栏能够正确地运行起来。因此需要5样基础元素使得引擎跑起来。

= 为了增强在手机布局上的菜单。

现在我们用这5样基础元素来搭建基础框架并且实现功能。

备注:在此教程例子中,我们将创建一个自定义的导航菜单,因此删除一些包括logo、文本和图片的标题。因此从下面代码例子可以看到在块元素

里的

里面是空的。

接着,我们来添加一些菜单元素和一个下拉菜单代码,在你想添加下拉菜单的li元素里添加class=”has-dropdown”,然后在里面包含下拉菜单代码

。如果想表示当前使用状态的li,则需要添加”active”。

Menu

Home

Aboutus

Ourproducts

Portfolio

Blog

Prices

Features

Modalboxes

Submenu’sandnavigation

Pricetables

Buttons

Buttongroups

Labels,KeystrokesandTooltips

Alertboxes

Columns

Contact

第三步:目前效果

现在可以在你的浏览器上看到目前的效果,基于Foundation框架使用顶部工具栏我们已经创建一个水平菜单。为了方便把菜单放置到其他地方,而不是固定在浏览器的顶部,我们需要在以上代码外层添加网格的

当你在调整浏览器窗口时,会发现菜单栏在预先设定的断点发生改变。

接下来着手编写自定义样式,将关注如何去编写顶部工具栏的样式和可以使用哪些class。

编写CSS

第一步:通用样式

如果你还没做好准备,可以创建一个css文件,命名为style.css并且放置到下载下来的Foundation工程下css文件夹下。但别忘记把此引用到index.html文件里。如下代码示例:

Foundation4

这里如果你不把style.css放置在foundation.css下面,将不会覆盖原来顶部工具栏的样式。

很好,接下来我们要为header、导航、内容和footer写一些基础样式,如导航块,我们将添加一张已经下载好的背景图。这些通用样式一般不是很难去实现的,见如下代码示例,我们添加一个class”full-width”到每个区域中,以致于每个区域的宽度都是占满浏览器宽度的。

background-color:#ccc;

/**Setthebackgroundsforthedifferentsections**/

.header-area{

background-color:#2d465c;

min-height:160px;

.navigation-area{

background-image:url(‘../img/navigation-container.jpg’);

background-repeat:repeat-x;

.content-area{

padding:50px070px0;

.footer-area{

background-color:#1f1f1f;

color:#fff;

min-height:50px;

padding:20px000;

.full-width{

min-width:100%;

position:relative;

color:#fff;

font-weight:normal;

margin-top:50px;

第二部:顶部工具栏样式

现在看一下效果,会发现菜单会往外偏移一点,原因就是使用默认的样式,接下来修复这个问题!

有一些样式类是需要修改以达到想要的效果。首先,我们将在.top-bar和.top-bar-section
li里移除黑背景,改变height和line-height为58px。如下代码,可看注释帮助理解。

/**Changesbackgroundcolor,heightandmarginoftheborder**/

background:none;

height:58px;

line-height:58px;

margin-bottom:0;

/**Removesblackbackgroundonmenubar**/

.top-bar-sectionul{

background:none;

text-transform:uppercase;

/**Removesblackbackgroundonmenuitem**/

.top-bar-sectionlia:not{

background:none;

line-height:58px;

padding:027px;

我们已经移除黑背景了,并且适应高度、行高和内边距,将文字转化为大写字母,这些都是为了适应我们自定义设计。

如果你进行刷新页面,可以看到出现雏形了,我们继续编写下拉菜单、菜单子项目、激活的状态的样式吧。继续往下看代码示例,并阅读注释:

/**Changestheactivemenuitemfromdefaultblacktoagradient**/

.top-bar-sectionulli.active>a{

background:rgb;

background:linear-gradient(tobottombottom,rgba0%,rgbarepeatscroll00transparent;

color:#fff;

/**Changesthehoverstateofnonactivemenuitems**/

.top-bar-sectionli:hovera{

background:linear-gradient(tobottombottom,rgba0%,rgbarepeatscroll00transparent;

color:#fff;

/**Changesnonactivemenuitemstextcolortoblack**/

.top-bar-sectionulli>a{

color:#2d2d2d;

/**Changesthehoverstateofdropdownmenuitems**/

.top-bar-sectionul.dropdownlia:hover:not{

background:nonerepeatscroll00rgba;

/**IMPORTANTfillfortheuldropdowncontainer**/

.top-bar-sectionul.dropdown{

background:#333;

color:#fff;

/**Thisfixesthepositionandthecolorofthedropdownarrow**/

.top-bar-section.has-dropdown>a:after{

border-color:rgbatransparenttransparent;

margin-top:2.5px;

我们已经改变菜单的好几个地方,如首先,我们就改变激活菜单默认的黑背景为“CSS渐变”,接着给不激活菜单添加hover状态,并改变里面的文字颜色为深灰色,目的是显示得更为清晰。然后.top-bar-section
li:hover
的样式将使得下拉菜单里的子项目被鼠标悬空时显示特定效果。为了完善样式,我们ul.dropdown添加一个背景颜色和重新设置下拉菜单箭头的位置,是因为我们内边距适应.top-bar-section。

第三步:效果

重新刷新页面,看一下现在的效果,我们还没完成样式的编写,只是想看看当调整浏览器的大小时,页面效果是否显示正常。接下来我们将添加“媒体查询”代码来实现这种效果。

编写媒体查询

第一步:媒体查询

我们需要做些操作来使得使用我们自定义样式的菜单栏能够适应不断缩小的屏幕。这里主要涉及到添加一些内边距、行高、文本颜色和背景颜色。如下CSS代码示例,查看每个section的注释。

@mediaonlyscreenand{

/*Makestheresponsivemenufitinthenavigationcontainerandchangeitsbackgroundtoblack*/

.top-barul{

background-color:rgba;

padding-bottom:13px;

/*Changenonactivemenuitemcolortoblack*/

.top-bar-sectionulli>a{

color:#fff;

/*Givesthedropdownulablackfill*/

.top-bar-sectionul{

background:#000;

/*GivetheBACKbuttonaftergoinginasubmenutheappropriatefilling*/

.top-bar-section.dropdownli.titleh5a{

line-height:57px;

/*Thisfixesthepositionandthecolorofthedropdownarrow*/

.top-bar-section.has-dropdown>a:after{

border-color:rgbatransparenttransparent;

margin-top:2.5px;

}/*endmediaquery*/

第二步:享受你的效果

保存文件,然后重新刷新页面,不断地调整浏览器窗口的大小,你就会看到菜单栏都能很好地展示出来。

总结

最后,总结一下此教程:我们如何利用Foundation5框架里的顶部工具栏来创建一个自定义菜单。需要记住的一点是,菜单栏不一定要被放置在页面的顶部的,可以使用网格系统来包含它,然后就可以放置任何你想放置的地方。

Foundation是一系列非常有用的工具可以快速地创建起响应式网站设计,当你不断地熟悉Foundation这个框架,就可以更高效地、创意地创建出更多好玩的东西出来,继续努力吧!

基本思路

在菜单处于光标之下时显示菜单,其余时候隐藏。这个过程首先得想到 :hover
伪类来实现,但是直接的利用伪类还不行,因为普通状态下菜单隐藏了,没办法触发
:hover
,不过下拉菜单隐藏了不是还有菜单标题么,菜单标题处于光标之下时显示菜单就能够显示出来了,但是鼠标移到菜单上的时候下拉菜单又会消失,这个时候想到给下拉菜单也加上
:hover
显示自身,但是万一脑洞大开,要做分体菜单怎么办,这个时候把它放进一个容器呗,利用标签的嵌套关系,去给容器的
:hover 伪类的派生元素写样式就一切搞定啦。

CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。
目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。

相关文章

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图