html左右阴影效果图,css实现横向菜单带阴影效果(不用滤镜实现)
这里用css实现不用滤镜实现阴影效果。代吗及详解如下:
xhtml代码:
例如:
href="http://www.goodjob.cn/">中国俊才网中国俊才网
href="http://www.goodjob.cn/">中国俊才网中国俊才网
href="http://www.goodjob.cn/">中国俊才网中国俊才网
href="http://www.goodjob.cn/">中国俊才网中国俊才网
href="http://www.goodjob.cn/">中国俊才网中国俊才网
这里定义了一个id为menu的无序列表作为菜单的容器,里面的列表项li就是菜单栏了。这里在列表项li中的链接a标签内,放置了一个内联对象span,它就是阴影效果载体,我们通过CSS定义,实现阴影效果。
CSS代码:例如:
#menu {
padding:0;
margin:0;
height:2em;
list-style-type:none;
border-left:1px solid #bbb;
}
#menu li {
float:left;
width:8em;
height:2em;
line-height:2em;
border-right:1px solid #bbb;
position:relative;
text-align:center;
}
这里定义menu这个无序列表的填充与边距均为零。高度为2em。清除默认列表项预设标记。定义菜单中的列表项为向左浮动,宽度与高度分别是2em。行高为2em,实现了文字的垂直居中。设置相对定位,并设置文字水平居中对齐。
请注重:我们给ul设置了左边框为1px的实线,颜色是灰色。border-left:1px
solid #bbb; 我们给li设置了右边框为1px的实绩,颜色是灰色。border-right:1px solid #bbb;
这样就实现了左右都存在分割的线条了。
例如:
#menu li a, #menu li a:visited { display:block;
text-decoration:none; color:#000;}
#menu li a span, #menu li a:visited span { display:none; }
我们定义链接的link与visited状态的样式,设置块元素,没有装饰线,颜色为#000;并且在link与visited状态下链接元素内的span元素为不可见:display:none。例如:
#menu li a:hover { border:0; color:#bbb;}
#menu li a:hover span { display:block; width:8em; height:2em;
text-align:center; position:absolute; left:-1px; top:-2px;
color:#000; cursor:pointer; }
在hover鼠标悬停时,链接的文字颜色为#bbb。即阴影文字的颜色。而此时span内联元素中的文字的设置发生了巨大的变化,我们来看代码。设置成块元素,宽度与高度分别是8em、2em。文字水平居中对齐,采用绝对定位,距左与距顶分别是-1px、-2px。文字颜色为黑色,鼠标指点为:pointer。
实现的原理与思路小结:在正常状态下,链接内的文字是黑色的,而链接span元素内的文字是不可见的。当鼠标悬停时。将链接文字设置为淡灰色的阴影,链接span元素内的文字设置成黑色,并且其位置向左及向上略移一点点。这样就实现了这款菜单的效果。
我们看完整的CSS代码:
/p>
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
css实现阴影效果(不用滤镜实现)
#menu {
padding:0;
margin:0;
height:2em;
list-style-type:none;
border-left:1px solid #bbb;
}
#menu li {
float:left;
width:8em;
height:2em;
line-height:2em;
border-right:1px solid #bbb;
position:relative;
text-align:center;
}
#menu li a, #menu li a:visited {
display:block;
text-decoration:none;
color:#000;
}
#menu li a span, #menu li a:visited span {
display:none;
}
#menu li a:hover {
border:0;
color:#bbb;
}
#menu li a:hover span {
display:block;
width:8em;
height:2em;
text-align:center;
position:absolute;
left:-1px;
top:-2px;
color:#000;
cursor:pointer;
}
id="menu">
href="http://www.goodjob.cn/">中国俊才网中国俊才网
href="http://www.goodjob.cn/">中国俊才网中国俊才网
href="http://www.goodjob.cn/">中国俊才网中国俊才网
href="http://www.goodjob.cn/">中国俊才网中国俊才网
href="http://www.goodjob.cn/">中国俊才网中国俊才网
html左右阴影效果图,css实现横向菜单带阴影效果(不用滤镜实现)相关推荐
- 如何用CSS制作横向菜单?
管在我的网站和文章里都有提到CSS制作菜单的方法,但很多初学者还是不太清楚如何实现,以及实现原理,我想专门写一篇详细教程会对大家比较有帮助. 我们先来看一个菜单的例子,最终效果是: 首页 产品介绍 服 ...
- 微信小程序css卡片样式(带阴影效果)
微信小程序css卡片样式(带阴影) 效果图 wxml代码 <view class="card"></view> css样式 .card{width: 90% ...
- html如何把纵向垂直菜单变成横向,css横向菜单
第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是: 首页 产品介绍 服务介绍 技术支持 立刻购买 联系我们 第二步:隐藏li的默认样式 因为看起来不是很好看,菜单通常都不需要 ...
- CSS制作简单的横向菜单
1.先写一个列表,建立菜单的结构 <span style="font-size:14px;"><span style="font-size:14px;& ...
- 很棒带阴影的JS+CSS滑动门菜单代码
代码简介: 绝对值得一看的CSS滑动门,因为它在鼠标放上后自动弹出一个带阴影的层,无操作的情况下层会自动隐藏,这样更节省网页布局,而且它的风格也很清新,淘宝网有这种效果,没有用到任何修饰图片,绝对不容 ...
- html中菜单触碰变色,利用css filter实现菜单图片变色效果
需求场景 在制作菜单时,未增加响应效果,往往会加入鼠标移入移出时字体和图标进行变色的效果,字体的颜色变化比较好控制,通过color便可以设置,但如果图标是使用的图片,往往要一个图标制作两份不同颜色的图 ...
- 序列表转换成横向菜单
如何把一个无序列表转换成横向菜单 首先建立一个无序列表 <html> <body> <div id='item'> <ul> <li>星期 ...
- ios 横向滚轮效果_ios横向菜单+页面滑动
ios横向菜单+页面滑动 查看次数:9122 下载次数:992 上传时间:2016-06-28 大小:11 B Demo: https://github.com/Super-lying/LyScrol ...
- html字体阴影设置,css怎么给字体加阴影?
阴影效果是一个常见也很实用的效果,相信有些朋友在使用阴影效果来美观网页页面时,有时会有一些疑问,比如:字体文字阴影是怎样设置的?下面本篇文章就来给大家介绍一下使用CSS给字体加阴影的方法,希望对大家有 ...
最新文章
- linux查看log4c版本号,linux下安装log4cplus
- java面向对象第一章
- Wowza® Media Systems 使用配置手册。
- STL的deque容器
- Pycharm中运行Python代码的几种方式
- JAVA入门级教学之(break跳出)
- [转]ASP.NET 状态服务 及 session丢失问题解决方案总结
- 路由器获取路由后加表原则
- 14.高性能MySQL --- 应用层优化
- Ansible - 自动化运维工具
- 什么是tftp服务器? 如何搭建tftp服务器?
- 美国节日(求某天是星期几)
- 分享接手的Android项目如何打包
- python爬虫之图片的懒加载
- HP iLO There are pending changes that may not take effect until ILO is reset
- 关于 IBM Tivoli Storage Manager在Oracle中的应用
- 使用性能利器 Redis实现网站的加速
- 数论作业 —— 同余理论
- InfoJet Service,一个InfoPath Web表单产品
- css3贝塞尔曲线_CSS3动画–使用贝塞尔曲线创建具有弹跳效果的扇出
热门文章
- 【原】为DevExpress的ChartControl添加Y轴控制 和 GridControl中指定列添加超级链接
- Tries and Ternary Search Trees in Python and Javascript
- 题临安邸 【南宋】 林升
- docker build 没有网络 执行dockerfile中yum报错 curl#6 - “Could not resolve host: mirrorlist.centos.org 解决方法
- linux jemalloc 内存分配器 安装与使用
- apache solr velocity 注入远程命令执行漏洞 (cve-2019-17558)
- linux xargs与管道的区别
- python3 自动化交互模块 pexpect 简介
- linux 内核编译错误 Makefile:416: *** mixed implicit and normal rules: deprecated syntax
- linux c chmod 更改权限函数