您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

当前位置：首页 > 网页特效 > css样式 >

html5实现的水平圆角菜单

时间：2013-05-30 22:02 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
@CHARSET "UTF-8";
body{margin:0;width:100%;height:100%;background-color:#f0f0f0;font-size:14px;} 
body,td,input,textarea,select{font-family:arial,sans-serif;color:#4c4c4c;} 
.tab{width:100%}
.tab .cell{float:left; clear:both; width:100%; border-bottom:1px solid #999;padding-left:10px;}
.tab .cell a{ background-color:#6599CB;  border:1px solid #6599CB;  color:#FFF;  cursor:pointer;  float:left;  font-size:15px;  margin-left:1px;  padding:3px 4px; -moz-border-radius:3px 3px 0 0; -webkit-border-radius:3px 3px 0 0; border-radius:3px 3px 0 0}
.tab .cell a:hover{background-color:#5C82AB; border-color:#5C82AB}
.tab .cell .t{background-color:#FFF!important;  border-color:#999;  border-style:solid;  border-width:1px 1px 0;  color:#4c4c4c;  margin-bottom:-1px;  padding:4px 4px 5px; font-weight:bold}
.tab .cont{float:left; clear:both; width:100%}
</style>
<title>HTML5横向菜单Demos</title>
</head>
<body>
<div class="tab" style="margin:50px 0;">
	<div class="cell">
		<a href="http://www.codesocang.com">源码搜藏</a>
		<a class="t">PHP</a>
		<a>Linux</a>
		<a>C++</a>
		<a>Android</a>
		<a>网页特效</a>
		<a>jQuery</a>
		<a>Ajax</a>
		<a>C#源码</a>
	</div>
	<div class="cont">
		<br><br>
	<div>	
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

简洁的HTML5水平圆角菜单，横向排列的网站菜单，圆角需要HTML5环境。若用户所使用的浏览器不支持HTML5，则看不到圆角效果，但菜单显示正常，在兼容性方面可以借鉴这样的设计思路，在不兼容的情况下，至少可以让菜单发挥基本的功能，不错位。

html5实现的水平圆角菜单由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/csstx/4914.html

标签：网站源码

上一篇：HTML5实现圆角框的一个“通知公告”页面

下一篇：纯CSS “三角形箭头”Div边框代码

[css样式] HTML5/CSS3画国旗-五星红旗

[css样式] 圆形按钮HTML5/CSS3 button代码H

[css样式] 多种CSS3纹理背景效果

[css样式] CSS3表格特效边框阴影+圆角有立

[css样式] CSS实现背景渐变 CSs滤镜使用

[css样式] 鼠标经过显示隐藏层

[css样式] css的margin缩写方式

[css样式] CSS圆角框，圆角提示框

[css样式] 超炫css3-rotate环形旋转特效有

[css样式] 让div居中对齐的css

[css样式] CSS实现的搜索框点击后提示消失

[css样式] css3轻松实现六边形

相关内容推荐

清华大学出版社

快速提升网站排名

收缩与展开

19楼风格模板

dedecms加上alt

网络图标矢量素材

PHP教程下载

网站排名提升软件

javascript基础

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1