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 相关文章推荐
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
HTML5 层的叠加的实现
Jul 07 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
php中看实例学正则表达式
2006/12/25 PHP
php disk_free_space 返回目录可用空间
2010/05/10 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
JS中关于正则的巧妙操作
2017/08/31 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python中几种操作字符串的方法的介绍
2015/04/09 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
python实现网页自动签到功能
2019/01/21 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
学习全国两会精神心得体会范文
2014/03/17 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
仲裁协议书
2014/09/26 职场文书
西安事变观后感
2015/06/12 职场文书
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers