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

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

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

【 tulaoshi.com - Web开发 】

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

(本文来源于图老师网站,更多请访问https://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;
}

运行查看效果:

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


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

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

延伸阅读
    每一个网页制作的初学者,都想让自己的网页更漂亮,看起来更专业。要想制作 出声形兼俱的动态网页,您需要了解动态网页制作技术,它是建立在动态HTML语言(即DHTL语言)之上的一 种新技术,它包括CSS文字效果,层技术,框架结构,push技术,JavaScript、Java和ASP等。(听不懂, 太专业了!),听不懂没关系,您只要清...
标签: Web开发
       从前没有网页设计师,最早的网页都只有文字,后来有Html,便开始有了网页设计师。 如今有很多人都片面的认为网页设计师从事的是平面设计的工作,但如果不懂得html,很难 算得上是一流的网页设计师。         Html让纯文本的网页变得丰富起来,图形图像、音频、视频...
标签: PS PS基础
效果图: 大家好,下面由我来开始教如何做上图效果的简单按钮: 1.首先打开photoshop软件,Ctrl+N新建一个10 x 10px的72dpi(分辨率)的文件: ①.我们先在图层面板新建一个新的图层,然后把背景图层删除(可按del键快捷键) ②.接着在导航器把界面放到最大 可按ctrl+"+" 快捷键,然后选择矩形选框工具,再选择上面的添加到选...
标签: Web开发
网页背景渐变是经常用到的效果,下面用的滤镜,当然在非IE下是没效果的。 一、从上往下渐变 body{ FILTER: progid: DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000)"; } 二、从左上至右下渐变 body{ FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX= ...
·背景颜色 background-color 我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的。这个的默认值是transparent(透明色)。 例:body{background-color:yellow} H1{background-color:#000000} ·背景图片 background-image 背景图片和背景颜色在HTML里面的设置也是基本相同的,都可以在里加入...

经验教程

895

收藏

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