html5 css3网站菜单实现代码


Posted in HTML / CSS onDecember 23, 2013

实现的难点在于:first-child,last-child 两个选择器,以后margin-left:-1px;的应用,33%,34%宽度的技巧处理。

另外一个难点是:box-shadow:1px 0 0 #F1F1F1 inset; 的实现。

最后是:

复制代码
代码如下:

background:-webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#b6b4b4));background:-moz-linear-gradient(top, #f9f9f9, #b6b4b4);background:-o-linear-gradient(top, #f9f9f9, #b6b4b4);background:linear-gradient(top, #f9f9f9, #b6b4b4);

复制代码
代码如下:

<!doctype html>
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>html5,css3菜单</title>
<style type="text/css">
.jikey_demo{ width:80%; margin:0 auto; background:#f1f1f1;}
.news_info{margin-bottom:5px;border:1px solid #bbb;border-radius:5px;box-shadow:0 1px 0 #f1f1f1;}
.news_info a{display:inline-block;width:33%;height:26px;font-family:"微软雅黑";line-height:26px;text-align:center;color:#555;border-right:1px solid #ccc;box-shadow:1px 0 0 #F1F1F1 inset;}
.news_info a:first-child{width:33%;box-shadow:none;border-radius:4px 0 0 4px;}
.news_info a:last-child{width:34%;border-right:none;margin-left:-2px;border-radius:0 4px 4px 0;}
.news_info a:hover, .news_info a.current{color:#208edd;background:-webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#b6b4b4));background:-moz-linear-gradient(top, #f9f9f9, #b6b4b4);background:-o-linear-gradient(top, #f9f9f9, #b6b4b4);background:linear-gradient(top, #f9f9f9, #b6b4b4);}
</style>
</head>
<body>
<div class="jikey_demo">
<nav class="news_info"><a class="current" href="/news/">新闻1</a><a class="" href="/guide/">新闻2</a><a class="" href="/review/">新闻3</a></nav>
</div>
</body>
</html>

HTML / CSS 相关文章推荐
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
html5 自定义播放器核心代码
Dec 20 #HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 #HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 #HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 #HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 #HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 #HTML / CSS
html5教程画矩形代码分享
Dec 04 #HTML / CSS
You might like
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
php取出数组单个值的方法
2018/03/12 PHP
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
python字典的常用操作方法小结
2016/05/16 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
python调用百度语音REST API
2018/08/30 Python
Python2与Python3的区别实例分析
2019/04/11 Python
django 控制页面跳转的例子
2019/08/06 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
如何提高JDBC的性能
2013/04/30 面试题
酒店实习个人鉴定
2013/12/07 职场文书
师范毕业生自我鉴定
2014/01/15 职场文书
写自荐信的注意事项
2014/03/09 职场文书
大学生社会实践方案
2014/05/11 职场文书
个人综合鉴定材料
2014/05/23 职场文书
一文搞懂Redis中String数据类型
2022/04/03 Redis
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python