纯CSS实现六边形布局的导航菜单

<!DOCTYPE html>

<html>

<head>

<title>纯CSS实现六边形布局的导航菜单</title>

<style>

.wrap{margin:100px;width:303px;}

.nav{width:100px;height:58px;background:#339933;display:inline-block;position:relative;line-height:58px;text-align:center;color:#ffffff;font-size:14px;text-

decoration:none;float:left;margin-top:31px;margin-right:1px;}

.nav s{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px dotted transparent;border-right:50px dotted transparent;border-bottom:30px solid

#339933;left:0px;top:-30px;}

.nav b{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px dotted transparent;border-right:50px dotted transparent;border-top:30px solid

#339933;bottom:-30px;left:0px;}

.a0{margin-left:100px;}

.a1{margin-left:50px;}

.nav:hover{background:#8CBF26;color:#333333;}

.nav:hover s{border-bottom-color:#8CBF26;}

.nav:hover b{border-top-color:#8CBF26;}

</style>

</head>

<body>

</div>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>

时间： 2024-11-07 13:09:43

纯CSS实现六边形布局的导航菜单的相关文章

纯css实现的三级水平导航菜单

vscode练习使用开发纯css的三级水平导航菜单.先上图: 1.html5布局 1 <html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title>水平导航菜单</title> 6 <link rel="stylesheet" href="reset.css"> 7 <link rel="stylesheet"

这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xm

纯CSS实现的二级下拉菜单效果代码实例

纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一,当前的此效果一般哟结合js实现,本章节介绍一个使用纯CSS实现的二级下拉菜单效果,希望能够给需要的朋友带来一定的帮助,不过此代码也有一点浏览器兼容问题,那就是在IE6中不兼容.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conten

实用js+css多级树形展开效果导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

纯HTML+CSS带说明的黄色导航菜单

HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航在线体验效果:http://hovertree.com/texiao/css/1.htm 代码如下,保存到HTML文件可以看到效果: <!DOCTYPE html > <html > <head> <title>HoverTree带说明的CSS菜单-hovertree.com</title><base target="_blank" /&g

纯CSS实现树状结构导航，纯CSS折叠菜单，简单粗暴，就是这么强大

在对网站进行mip改造的时候,使用百度的导航组件,很难有较好的展现形式. 百度又不允许自定义JS,所以,考虑增加CSS(是在百度组件的基础上增加JS),用css补充实现点击功能,实现精美的导航. 最终结果是为了实现以下三个样式 1.未展开状态 2.展开状态,有二级导航的,要出现+号 3.点击+号能展开二级菜单参考以下树状CSS的设计思路,主要是使用 html5的 details summary标签,注意看注释演示图如下代码如下 <!DOCTYPE html> <html xmln

纯css实现的下拉导航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>老Y天下-网页特效-导航菜单-漂亮的二级下

纯css和js版下拉菜单

<!doctype html> <html> <head> <meta charset="utf-8"> <title>css版下拉菜单</title> <style type="text/css"> div,body,ul,li{padding:0;margin:0; list-style:none;} .all{width:550px; height:30px; backgrou

纯CSS实现面包屑式导航

参考别人的教程,模仿了一下,效果图: html: <div id="crumbs"> <ul> <li><a href="#">Breadcrumb</a></li> </ul> </div> css: #crumbs ul li a { display: block; float: left; height: 50px; background: #3498db; tex