HTML开发——项目心得(CSS实现导航栏选项卡炫酷渐变效果以及图片替换文本显示)
2017-10-25 12:52
1046 查看
1.首先来谈谈实现某个元素渐变的基本代码格式——[E]:hover
通过在元素后加:hover我们可以实现元素[E]在鼠标经过时所要表现的效果;比如我们对元素a进行设置:
在鼠标经过以前,元素a的内容表现为字体颜色为黑色,大小为13px ,当鼠标经过元素a上方时,元素a的内容变为字体颜色为红色,大小为15px ;
2.然后明白了hover的基本用法后我们来谈谈具体的例子:
首先来看看我们要实现的效果:
鼠标经过前:
鼠标经过About Us后:
还挺炫酷的吧,但这要怎么实现的呢?
接下来我们来看看实现这个效果的代码段:
其实就是利用hover把背景图置换了一下(这里得感谢我们的设计师了),现在来看看这两张图片长啥样的吧:
到这里相信你已经知道了些什么,网页设计师都是些机灵鬼,最爱使用这种障眼法“瞒天过海”了,哈哈。
3.我们再来谈谈用图片或背景图替换文字的一些技巧
首先思考一下为什么需要用图片去替换文字呢?相信你也曾浏览过一些令人耳目一新的网页,页面非常漂亮,字体非常优美。。。他们是怎样做的呢?其实就是使用了我们接下来要说的方法。对于有些字体可能网页设计师电脑里装了,但用户电脑里没装,那这个字体的效果就没法显示了。再想想,每台电脑都可以显示图片的啊,为了让所有用户都能享受视觉盛宴,我们只要把这一区域替换成图片背景来显示不就好了!好,说做就做,具体的实现方法如下:
在这里我们要利用一个css属性 display:none; 就是不让文本显示。通常的做法是用一个<span></span>标签来包含所要隐藏的字体然后在<span></span>标签的外面再包含一个标签比如h标签 ,div...在css中我们设置span为隐藏,再设置h或div...的宽高,以及背景图片。看如下代码段:
通过css设置后 文字就会被隐藏起来,而看到的就只是背景图片了。
还有一种也是比较常用的做法,那就是把文字缩进到用户看不到的地方。使用text-indent:-9999px;把文字弄到一个看不见的地方,这样的做法比上面可能还要简单些,使用这种方法我我就不用再刻意地去加一个<span></<span>标签来实现隐藏的效果的,因为文字实际上还存在啊。如果明确用display:none去标明了这个文字不显示,那么这块区域的大小也就为0了,那么背景图片插了也白查了,大小为0,没法显示出来欸。但后面这就不一样啦,文字还在呢,只是被缩进到一个你看不到的地方去了,这不就正好的么,又有机会可乘了!
上面的那个渐变效果的实例就运用了这种方法,代码如下:
通过在元素后加:hover我们可以实现元素[E]在鼠标经过时所要表现的效果;比如我们对元素a进行设置:
a{ color:black; font-size:13px; } a:hover{ color:red; font-size:15px; }
在鼠标经过以前,元素a的内容表现为字体颜色为黑色,大小为13px ,当鼠标经过元素a上方时,元素a的内容变为字体颜色为红色,大小为15px ;
2.然后明白了hover的基本用法后我们来谈谈具体的例子:
首先来看看我们要实现的效果:
鼠标经过前:
鼠标经过About Us后:
还挺炫酷的吧,但这要怎么实现的呢?
接下来我们来看看实现这个效果的代码段:
#nav ul li a.aboutus{ height: 45px; width: 144px; background: url(../images/index_9.gif) no-repeat; /*鼠标经过以前的背景图*/ display: block; text-indent: -9999px; /* 使该文字缩进到看不见 */ } /* 实现变色的效果 */ #nav ul li a.aboutus:hover{ background: url(../images/index_9_1.gif) no-repeat; /*鼠标经过以后的背景图*/ }
其实就是利用hover把背景图置换了一下(这里得感谢我们的设计师了),现在来看看这两张图片长啥样的吧:
到这里相信你已经知道了些什么,网页设计师都是些机灵鬼,最爱使用这种障眼法“瞒天过海”了,哈哈。
3.我们再来谈谈用图片或背景图替换文字的一些技巧
首先思考一下为什么需要用图片去替换文字呢?相信你也曾浏览过一些令人耳目一新的网页,页面非常漂亮,字体非常优美。。。他们是怎样做的呢?其实就是使用了我们接下来要说的方法。对于有些字体可能网页设计师电脑里装了,但用户电脑里没装,那这个字体的效果就没法显示了。再想想,每台电脑都可以显示图片的啊,为了让所有用户都能享受视觉盛宴,我们只要把这一区域替换成图片背景来显示不就好了!好,说做就做,具体的实现方法如下:
在这里我们要利用一个css属性 display:none; 就是不让文本显示。通常的做法是用一个<span></span>标签来包含所要隐藏的字体然后在<span></span>标签的外面再包含一个标签比如h标签 ,div...在css中我们设置span为隐藏,再设置h或div...的宽高,以及背景图片。看如下代码段:
html代码: <h1><span>我的心情</span></h> css样式: span{ display:none: } h1{ height:30px; width:50px; background:url(images/moon.jpg) no-repeat; /*这张图片的宽高为50px ,30px*/ }
通过css设置后 文字就会被隐藏起来,而看到的就只是背景图片了。
还有一种也是比较常用的做法,那就是把文字缩进到用户看不到的地方。使用text-indent:-9999px;把文字弄到一个看不见的地方,这样的做法比上面可能还要简单些,使用这种方法我我就不用再刻意地去加一个<span></<span>标签来实现隐藏的效果的,因为文字实际上还存在啊。如果明确用display:none去标明了这个文字不显示,那么这块区域的大小也就为0了,那么背景图片插了也白查了,大小为0,没法显示出来欸。但后面这就不一样啦,文字还在呢,只是被缩进到一个你看不到的地方去了,这不就正好的么,又有机会可乘了!
上面的那个渐变效果的实例就运用了这种方法,代码如下:
html代码: <li > <a href="###" class="aboutus">aboutus</a> </li> css代码: #nav ul li a.aboutus{ height: 45px; width: 144px; background: url(../images/index_9.gif) no-repeat; display: block; text-indent: -9999px; /* 使该文字缩进到看不见 */ }
相关文章推荐
- HTML+CSS实现合并图片的切割显示以及背景渲染
- textview 显示图文信息,html文本,实现activity的跳转、跑马灯效果。
- 使用纯 CSS 实现响应式的图片显示效果
- html+css实现图片滑移效果
- Android 百度地图开发(一)如何调用百度地图接口和在项目中显示百度地图以及实现定位
- CSS Filter 代替 图片 实现 渐变背景效果。
- css3实现渐变、阴影、超出指定文本省略号显示等一些效果
- 用html+css+js实现选项卡切换效果
- 初识网站前端--用简单的HTML+CSS+js实现的选项卡切换效果
- CSS学习笔记-附加篇( CSS+JS实现的选项卡效果(html组件))
- CSS实现文本渐变效果
- CSS实现文本渐变效果
- CSS+Canvas+jQury实现图片灰度渐变效果
- [前端] html+css+javascript 实现选项卡切换效果
- 完整的html+css+javascript实现跟随鼠标移动显示选中效果
- 如何用CSS实现图像替换链接文本显示并保证链接可点击
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
- JQuery实现开关灯效果以及图片的显示背景变暗
- 替换textarea的文本编辑框的实现,可现实文字输入与显示图片、表情
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效