一个蜂巢状的布局

需要一个蜂巢型状的导航，或者图片展示，所以编写了这个demo。


<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>六边形</title><style>.wrap{margin:100px;margin-left: 300px;width:505px;}.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 class="wrap"><!--第一层--><a class="nav a0" target="_blank" href="#"><s></s>1<b></b></a><a class="nav " target="_blank" href="#"><s></s>2<b></b></a><a class="nav " target="_blank" href="#"><s></s>3<b></b></a><!--第二层--><a class="nav a1" target="_blank" href="#"><s></s>4<b></b></a><a class="nav " target="_blank" href="#"><s></s>5<b></b></a><a class="nav " target="_blank" href="#"><s></s>6<b></b></a><a class="nav " target="_blank" href="#"><s></s>7<b></b></a><!--第三层--><a class="nav " target="_blank" href="#"><s></s>8<b></b></a><a class="nav " target="_blank" href="#"><s></s>9<b></b></a><a class="nav " target="_blank" href="#" style=""><s></s>10<b></b></a><a class="nav " target="_blank" href="#"><s></s>11<b></b></a><a class="nav " target="_blank" href="#"><s></s>12<b></b></a><!--第4层--><a class="nav a1" target="_blank" href="#"><s></s>4<b></b></a><a class="nav " target="_blank" href="#"><s></s>5<b></b></a><a class="nav " target="_blank" href="#"><s></s>6<b></b></a><a class="nav " target="_blank" href="#"><s></s>7<b></b></a><!--第5层--><a class="nav a0" target="_blank" href="#"><s></s>1<b></b></a><a class="nav " target="_blank" href="#"><s></s>2<b></b></a><a class="nav " target="_blank" href="#"><s></s>3<b></b></a>
</div>
</body>
</html>

由于鄙人水平有限，具体需要添加什么效果，请按照你的需要自己添加哦！

一个蜂巢状的布局相关推荐

jQuery Masonry 一个 jQuery动态网格布局的插件
jQuery Masonry 是一个 jQuery动态网格布局的插件. 每个元素都是漂浮在固定的网格布局上面,就像一枚图钉定在墙上一样. 我们发现以下的15网站使用jQuery Masonry的范例. ...
【Solidity】1.一个Solidity源文件的布局 - 深入理解Solidity
想知道更多关于区块链技术知识,请百度[链客区块链技术问答社区] 链客,有问必答!! 一个Solidity源文件的布局源文件可以包含任意数量的合约定义,include指令和pragma伪指令. Pra ...
[html] 写一个标签云的布局
[html] 写一个标签云的布局 <ul class="tag-cloud"><li>JavaScript</li><li>技术&l ...
php生成饼状图柱形图,求一个饼状图或柱状图php生成类或例子
求一个饼状图或柱状图php生成类或例子时间:2006/7/19 6:10:04 作者:佚名人气:268 PHP代码:---------------------------------------- ...
android webview圆角,Android 实现一个通用的圆角布局
前言我们在平时的开发中,经常会遇到圆角需求,比如下图一般的实现方法是上面的图片左上和右上设置圆角,下面的文字部分左下和右下设置圆角,而 Glide 默认是不支持指定位置设置圆角的,需要通过自定义 ...
【Solidity】1.一个Solidity源文件的布局 - 深入理解Solidity 1
索引 [Solidity]1.一个Solidity源文件的布局 [Solidity]2.合约的结构体 [Solidity]3.类型 [Solidity]4.单位和全局可变量 [Solidity]5.表 ...
一个完美的导航条html,一个DIV CSS代码布局的简单导航条
简单的DIV CSS代码布局实现导航条一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航 ...
three.js实现3d球体树状结构布局——添加入场、出场、点击放大等动画
目录系列文章前言新增功能添加背景灯光旋转动画数据入场.出场动画点击放大实现效果实现源码相关资源系列文章 three.js实现3d球体树状结构布局--树状结构的实现前言本文建议 ...
Mindmanager2020教程篇画一个树状思维导图及试用密钥过期
MindManager思维导图是一个创造.管理和交流思想的通用标准,其可视化的绘图软件有着直观.友好的用户界面和丰富的功能,这将帮助您有序地组织您的思维.资源和项目进程. 在分析问题时,有许多可行的分 ...

一个蜂巢状的布局

一个蜂巢状的布局相关推荐

最新文章

热门文章

一个蜂巢 状的布局

一个蜂巢 状的布局相关推荐

最新文章

热门文章

一个蜂巢状的布局

一个蜂巢状的布局相关推荐