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教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 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
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
Python发送email的3种方法
2015/04/28 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
2014植树节活动总结
2014/03/11 职场文书
求职信内容怎么写
2014/05/26 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
个人专业技术总结
2015/03/05 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书