html制作中英文双语菜单,CSS实现的中英文双语菜单效果代码
本文实例讲述了CSS实现的中英文双语菜单效果代码。分享给大家供大家参考。具体如下:
这是一款你一定喜欢的CSS中英文双语菜单,支持鼠标 特效,先运行一下看效果,绝对会另你满意。用到了一个背景图片,请自行下载。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
复制代码代码如下:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
实用的中英文CSS菜单
body{
margin:0;
padding:0;
font-size:12px;
}
*
{
margin:0;
padding:0;
text-align:left;
color:#9196A0;
font-family:Verdana;
}
a{
color:#9196A0;
}
a:link {
text-decoration: none
}
a:visited{
text-decoration: none
}
a:hover{
text-decoration:underline;
color:#81BC06
}
#nav{
height:100%;
overflow: hidden;
list-style:none;
margin:0 auto;
width:798px
}
#nav li{
float:left;
font-weight:bold;
height:60px;
background:url(images/navbg.png) #fff repeat-x left bottom;
padding:0
}
#nav a{
text-align:center;
padding-top:20px;
display: block;
height:40px;
line-height:40px;
}
#nav li a.one{width:80px;}
#nav li a.two{width:80px;}
#nav li a.three{width:80px;}
#nav li a.four{width:80px;}
#nav li a.five{width:100px;}
#nav li a.six{width:106px;}
#nav li a.seven{width:100px;}
#nav li a.eight{width:80px;}
#nav li a.nine{width:92px;}
#nav li a:hover.one{background:url(images/navunbg.gif) no-repeat -8px 0}
#nav li a:hover.two{background:url(images/navunbg.gif) no-repeat -8px -60px}
#nav li a:hover.three{background:url(images/navunbg.gif) no-repeat -8px -120px}
#nav li a:hover.four{background:url(images/navunbg.gif) no-repeat -8px -180px}
#nav li a:hover.five{background:url(images/navunbg.gif) no-repeat 4px -240px}
#nav li a:hover.six{background:url(images/navunbg.gif) no-repeat 8px -300px}
#nav li a:hover.seven{background:url(images/navunbg.gif) no-repeat 4px -360px}
#nav li a:hover.eight{background:url(images/navunbg.gif) no-repeat -8px -420px}
#nav li a:hover.nine{background:url(images/navunbg.gif) no-repeat 0 -480px}
- 网站首页
- 关于我们
- 最新更新
- 更新排行
- 建站服务流程
- 客户案例
- 网站使用指南
- 网页特效
- 联系我们
希望本文所述对大家的css网页设计有所帮助。
html制作中英文双语菜单,CSS实现的中英文双语菜单效果代码相关推荐
- css3如何写下拉菜单,css如何实现下拉菜单 超详细
首页 >web前端>css教程>正文 css如何实现下拉菜单?css实现下拉菜单的方法(完整代码) 原创2019-04- 本篇文章给大家带来的内容是关于css如何实现下拉菜单?css ...
- html中图片亮度调节,HTML+CSS+JS 模仿 Win10 亮度调节效果
HTML+CSS+JS模仿win10亮度调节效果 代码 模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...
- html的window效果,HTML+CSS+JS模仿win10亮度调节效果
HTML+CSS+JS模仿win10亮度调节效果 代码 模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...
- html中亮度怎么写,HTML+CSS+JS模仿win10亮度调节效果的示例代码
HTML+CSS+JS模仿win10亮度调节效果 代码 模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...
- c语言实现小球抛物线动画,CSS实现小球抛物线运动的动画效果 (代码)
本篇文章给大家带来的内容是关于CSS实现小球抛物线运动的动画效果 (代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一个物体实现抛物线运动,物理上是将物体分为水平运动(匀速) ...
- CSS:实现动态流光线条效果/动态流光线条颜色渐变效果
需求描述: 需要实现类似下图中的动态流光线条效果: 思路: 提到这种动态绘制矢量图形的需求,一般会想到使用canvas:由于笔者不太熟悉canvas动画也可以考虑用CSS来实现,这里先记录使用CSS实 ...
- html图片自动循环,css实现图片循环的动画效果(代码)
本篇文章给大家带来的内容是关于css实现图片循环的动画效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. *{margin: 0;padding: 0;} .robot{ w ...
- HTML+CSS实战(一)——导航条菜单的制作
一.垂直导航菜单的制作 1.基本的样式清除: *{margin:0;padding:0} 2.无序列表圆点去除: ul{list-style:none} 3.下划线去除: a{text-decorat ...
- HTML+CSS 完成顶部导航栏菜单制作
导航栏针对一切网址都很重要,文中关键详细介绍了HTML+CSS 完成顶端导航栏菜单制作,具备一定的参考价值,感兴趣的小伙伴们能够参照一下 导航栏的制作: 技术要求: CSS HTML各类标签 实现目的 ...
- CSS设置无需表格的菜单
CSS设置无需表格的菜单 项目列表的符号可以设置list-style-type属性值为none,然后,制作各种各样的菜单和导航条,来显示项目的列表. 首先,建立一个HTML结构,将菜单的各个项用项目列 ...
最新文章
- ExtJs中column与form布局的再次领悟
- 2017-9-11-颜色空间
- python turtle画海绵宝宝_24.1. turtle — 海龟绘图 — Python 3.6.12 文档
- access开发精要(10)-筛选
- ubuntu 修改旋转屏幕显示方向 恢复正常模式
- c语言int a什么意思,问一下吧里大神 int a = a; 这么定义是什么意思?
- java(5)---Java基础知识大全
- 如何自己找数据分析项目来做?
- 我是真的傻,她被超市安保罚了100元,我居然给她50元
- 基于JavaEE电子商务交易系统
- codeup21158 循环比赛日程表
- 车载以太网交换机功能和应用案例汇总, 适用于AVB/TSN, 802.1AS(gPTP时钟同步)
- 使用正则表达式进行身份证号匹配
- 【HDU6608 Fansblog】求很大很大的数的阶乘
- 4 年 Java 程序员十面阿里终拿下 offer,评级 P6+ 年薪 30-40w 无股票
- 【SAP消息号KI344】
- 全球第二!食在爱尔兰,安全感满满!
- c# picturebox 刷新_c# – 更新PictureBox时可能导致ArgumentException的原因是什么?
- 黑科技|感官世界与人机交互的盛宴 --未来虚拟现实养成记
- 跨平台次世代游戏引擎Unity 3D
热门文章
- MacOS 系统安装超详细教程
- SPT20 协议_【推荐】协议离婚协议书范文7篇
- python中哈希是什么意思_利用Python如何生成hash值示例详解
- SEO页面优化以及如何对单页面应用进行SEO优化
- 多旋翼无人机ROSC++开发例程(四):基于Prometheus开源项目与Casadi开源优化求解器的模型预测控制简单应用例程
- 机器学习实战之信用卡诈骗(一)
- 【BDTC 2016】金融大数据论坛:区块链、智能投顾、快速信贷、投资优化背后技术揭秘...
- html背景图片怎么设置圆角,div+css实现圆角背景文字导航条
- JZOJ 3505. 【NOIP2013模拟11.4A组】积木(brick)
- KUKA机器人使用PLC外部自动运行配置使用方法