仓酷云
标题:
来讲讲:CSS完成导航条图片的翻转菜单
[打印本页]
作者:
分手快乐
时间:
2015-1-16 00:26
标题:
来讲讲:CSS完成导航条图片的翻转菜单
每个声明内只能有一个属性,如果属性值中含有空格用双引号括起来例,在一个声明块内可以有多个声明,每个声明用分号隔开。
假如用传统的办法制造这个翻转菜单,最少必要把图片切成10块,还要加上JS代码,在图片按钮上再加举动,如今完整用CSS来完成,图片只需一张,见下图:
登录/注册后可看大图
2007122623920239.gif
(6.07 KB, 下载次数: 12)
下载附件
保存到相册
来讲讲:CSS完成导航条图片的翻转菜单
2015-1-16 00:26 上传
CSS代码:
<p/> 计划的更体恤,照应纯文本扫瞄的伴侣:
能够在LI内套进SPAN元素,到场文本链接,在作风中设SPAN不成见。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"><head><title></title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><scriptsrc="http://www.google-analytics.com/urchin.js"type="text/javascript"></script><scripttype="text/javascript">_uacct="UA-152060-1";urchinTracker();</script><styletype="text/css"><!--body{background:#666666;margin:20px;}a{color:#EEEEEE;font-family:Arial,Helvetica,sans-serif;font-size:12px;}a:hover{color:#FFCC00;}#imgmenu{width:450px;height:25px;background:url(http://www.poluoluo.com/jzxy/UploadFiles_333/200712/2007122623920239.gif);list-style-type:none;padding:0px;margin:0px;}#imgmenuli{float:left;}#imgmenulia{display:block;width:90px;height:25px;}#imgmenuli#homea:hover,#activeh{background:url(http://www.poluoluo.com/jzxy/UploadFiles_333/200712/2007122623920239.gif)0-25px;}#imgmenuli#abouta:hover,#activea{background:url(http://www.poluoluo.com/jzxy/UploadFiles_333/200712/2007122623920239.gif)-90px-25px;}#imgmenuli#proa:hover,#activep{background:url(http://www.poluoluo.com/jzxy/UploadFiles_333/200712/2007122623920239.gif)-180px-25px;}#imgmenuli#faqa:hover,#activef{background:url(http://www.poluoluo.com/jzxy/UploadFiles_333/200712/2007122623920239.gif)-270px-25px;}#imgmenuli#contacta:hover,#activec{background:url(http://www.poluoluo.com/jzxy/UploadFiles_333/200712/2007122623920239.gif)-360px-25px;}--></style></head><body><ulid="imgmenu"><liid="activeh"><ahref="#"></a></li><liid="about"><ahref="#"></a></li><liid="pro"><ahref="#"></a></li><liid="faq"><ahref="#"></a></li><liid="contact"><ahref="#"></a></li></ul><p>Backto<ahref="http://www.jztop.com">www.jztop.com</a></p></body></html>
运转代码复制代码另存代码保藏本页
Table布局灵活性不大,你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
作者:
小魔女
时间:
2015-1-18 06:41
由CS4版本开始,则转用WebKit排版引擎(亦即GoogleChrome和AppleSafari浏览器所用的排版引擎)作为网页预览。
作者:
分手快乐
时间:
2015-1-25 17:00
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
作者:
冷月葬花魂
时间:
2015-2-3 11:56
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
作者:
金色的骷髅
时间:
2015-2-8 22:40
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
作者:
活着的死人
时间:
2015-2-26 13:04
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
作者:
乐观
时间:
2015-3-8 15:23
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
作者:
蒙在股里
时间:
2015-3-16 04:51
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
作者:
兰色精灵
时间:
2015-3-22 20:11
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
欢迎光临 仓酷云 (http://ckuyun.com/)
Powered by Discuz! X3.2