HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 CSS3教程 查看内容

不用图片和JS,照样创建绚丽的动态CSS3菜单

2013-7-18 13:34| 发布者: html5cn| 查看: 15575| 评论: 0|原作者: Laeeq|来自: csdn

摘要: 该教程,我们将讨论CSS3的一些新功能和新特性,并教你在不使用图片和JavaScript的情况下,如何制作酷炫的圆形导航菜单。该实例将用到CSS3的新特性: border-radius和animation。 ... ...

       该教程,我们将讨论CSS3的一些新功能和新特性,并教你在不使用图片和JavaScript的情况下,如何制作酷炫的圆形导航菜单。该实例将用到CSS3的新特性: border-radius和animation。

Demo演示  下载代码

第一步:编辑菜单的HTML代码

菜单包含三个列表项,分别取名为“Menu1”、“Menu2”、“Menu3”。

1
2
3
4
5
6
7
8
view plaincopy to clipboardprint?
<div class=“css3Menus”> 
<ul
    <li>Menu1</li
    <li>Menu2</li
    <li>Menu3</li
</ul
</div>

第二步:设置菜单的背景

在该步骤中,我们将把导航的背景设置为黑色。宽度、高度和内边距为可选项,可以不设置。

1
2
3
4
5
6
7
view plaincopy to clipboardprint?
.css3Menus { 
background#14080a
width:506px
height:260px
padding:20px
}

如下图:

第三步:利用border-radius,制作圆形导航。

该步中,我们会利用CSS3的一些酷的功能,尤其是border-radius ,将每个列表项的背景设置为黄色,形状为圆形。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
view plaincopy to clipboardprint?
ul { 
list-stylenone
   
li { 
float:left
font14px/10px ArialVerdanasans-serif
color:#FFF
background-color:#CCCC00
width80px
height80px
padding:20px
margin:0 30px 0 0
-webkit-border-radius: 60px
-moz-border-radius: 60px
border-radius: 60px
}

菜单看起来呈下面样子:

123下一页
更多
4

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (4 人)

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-20 20:00

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部