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实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 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
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
PHP微信分享开发详解
2017/01/14 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
jQuery学习笔记之Helloworld
2010/12/22 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
Python显示进度条的方法
2014/09/20 Python
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
python实现红包裂变算法
2016/02/16 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
Python初学者常见错误详解
2019/07/02 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
应届毕业生个人自我评价
2013/09/20 职场文书
模具专业推荐信
2013/10/30 职场文书
学生个人的自我评价分享
2013/11/05 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
怒海潜将观后感
2015/06/11 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js