CSS制作的背景动态变化的网页导航

2016-02-19 23:31 83 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享CSS制作的背景动态变化的网页导航,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

自己写的个导航,感觉还不错...惟一的不足就是hack比较多,如果有简洁的方式实现,请留言告诉我...呵呵...

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

样式部分:

#headerMenu {
    width:560px;
    margin:30px auto;
}
.menu {
    font-size:14px;
    line-height:18px;
    *line-height:32px;
}
.menu li {
    display:inline;
}
.menu a:link,
.menu a:visited{
    display:-moz-inline-stack;/*FF下有效*/
    *display:inline;/*此行及下行为IE定义*/
    zoom:1;
    width:80px;
    padding:8px 0px 6px 0px;
    *padding:0;
    float:left;
    color:#014A99;
    text-align:center;
    text-decoration:none;
    background:url(/files/081222/1_164717.gif);
}
.menu a:hover{
    color:#FFF;
    font-weight:bold;
    background:url(http://img.warting.com/allimg/2010/c0502/12HO042045410-39261.jpg);
}
.home{
    background:url(http://img.warting.com/allimg/2010/c0502/12HO042045410-39261.jpg)!important;
    color:#FFF !important;
    font-weight:bold;
}

运行查看效果:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

来源:http://www.tulaoshi.com/n/20160219/1630090.html

延伸阅读
标签: PS PS基础
效果图: 大家好,下面由我来开始教如何做上图效果的简单按钮: 1.首先打开photoshop软件,Ctrl+N新建一个10 x 10px的72dpi(分辨率)的文件: ①.我们先在图层面板新建一个新的图层,然后把背景图层删除(可按del键快捷键) ②.接着在导航器把界面放到最大 可按ctrl+"+" 快捷键,然后选择矩形选框工具,再选择上面的添加到选...
标签: Web开发
       从前没有网页设计师,最早的网页都只有文字,后来有Html,便开始有了网页设计师。 如今有很多人都片面的认为网页设计师从事的是平面设计的工作,但如果不懂得html,很难 算得上是一流的网页设计师。         Html让纯文本的网页变得丰富起来,图形图像、音频、视频...
标签: Web开发
我们在浏览很多网站的时候会看到有的网站当你的鼠标移动到导航栏的文字上的时候会感觉字在动,或则字体的颜色会变,或则 有上划线,看看我的博客上导航栏的效果你的明白了,今天三少就来告诉大家这是怎么样实现的。 其实这个很简单,它实际上是用CSS来实现的,请跟着我的步骤做,Let' Go! 1.进入你的个人门户管理,选...
    每一个网页制作的初学者,都想让自己的网页更漂亮,看起来更专业。要想制作 出声形兼俱的动态网页,您需要了解动态网页制作技术,它是建立在动态HTML语言(即DHTL语言)之上的一 种新技术,它包括CSS文字效果,层技术,框架结构,push技术,JavaScript、Java和ASP等。(听不懂, 太专业了!),听不懂没关系,您只要清...
标签: PS PS基础
首先声明,这个透明的导航不是我发明的,我是借鉴和学习,其次,我在做的过程中遇到很多问题,是前辈们没有讲出来的。是通过我一点点研究出来的成果,所以解决的问题是原创,最后,希望把东西分享给更多的人,让大家少走弯路,多进步。 先发一组模拟的效果图 那么接下来我们开始吧 1. 新建一个画布(我的是1000*1000px,新手可以效仿)...

经验教程

752

收藏

24
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部