您好， 用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-Type" mrc="text/html charset=gb2312" />
<title>index</title>
<style type="text/css">
#outer {
background:width:730px text-align:center padding-top:20px height:330px border:1px solid #000 position:relative}
* html #outer {height:350px height:330px}
#hex {padding:0 margin:0 auto list-style:none width:325px}
#hex li {display:block float:left width:104px margin-right:4px height:120px}
#hex li.p1 {padding-left:54px}
#hex li.p2 {margin-top:-26px}
#hex li a {text-decoration:none color:#000 cursor:pointer}
#hex li a b {display:block width:0 height:0 overflow:hidden border-bottom:30px solid #ec0 border-left:52px dotted
transparent border-right:52px dotted transparent}
#hex li a span {display:block width:104px height:60px line-height:59px text-align:center background:#ec0
font-size:11px font-family: arial, veradana, sans-serif}
#hex li a em {display:block width:0 height:0 overflow:hidden border-top:30px solid #ec0 border-left:52px dotted
transparent border-right:52px dotted transparent}
* html #hex li a b, * html #hex li a em {width:104px height:30px w\idth:0 he\ight:0}
#hex li a.inner b {border-bottom-color:#c60}
#hex li a.inner span {background:#c60}
#hex li a.inner em {border-top-color:#c60}
#hex li a:hover {white-space:normal color:#fff}
#hex li a:hover b {border-bottom-color:#c90}
#hex li a:hover span {background:#c90}
#hex li a:hover em {border-top-color:#c90}
#hex li a.inner:hover b {border-bottom-color:#a40}
#hex li a.inner:hover span {background:#a40}
#hex li a.inner:hover em {border-top-color:#a40}
#flower {width:100px height:100px position:absolute left:45px top:110px background:transparent}
#flower b {display:block width:0 height:0 overflow:hidden border-top:23px dotted transparent border-bottom:23px
dotted transparent position:absolute cursor:pointer}
/* hack for IE5.5 */
* html #flower b {width:39px height:46px w\idth:0 he\ight:0}
#flower a, #flower a:visited {text-decoration:none}
#flower b.p1 {border-right:39px solid #ec0}
#flower b.p2 {border-left:39px solid #c60}
#flower b.a1 {top:1px left:9px}
#flower b.a2 {top:1px right:9px}
#flower b.a3 {top:27px left:7px}
#flower b.a4 {top:27px left:54px}
#flower b.a5 {top:53px left:9px}
#flower b.a6 {top:53px right:9px}
#flower a:hover {white-space:normal cursor:pointer}
#flower a:hover b.p1 {border-right:39px solid #c60}
#flower a:hover b.p2 {border-left:39px solid #ec0}
</style>
</head>
<body>
<!-- the menu -->
<ul id="hex">
<li class="p1"><a href="/"><b></b><span>教学资源</span><em></em></a></li>
<li><a href="/"><b></b><span>财务查询</span><em></em></a></li>
<li class="p2"><a href="/"><b></b><span>图书馆</span><em></em></a></li>
<li class="p2"><a class="inner" href="/"><b></b><span>校领导邮箱</span><em></em></a></li>
<li class="p2"><a href="/"><b></b><span>信息查询</span><em></em></a></li>
<li class="p1 p2"><a href="/"><b></b><span>招标公示</span><em></em></a></li>
<li class="p2"><a href="/"><b></b><span>校园一卡通</span><em></em></a></li>
</ul>
</div>
</body>
</html>
1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。2.float浮动布局，absolute绝对定位，flex弹性盒子，table表格布局，grid网格布局 / 栅格化布局
3.移动端布局：流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,
css设计模式
OOCSS——Object Oriented CSS
SMACSS——Scalable and Modular Architecture for CSS
垂直水平均分：
子元素纵向等距排列：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
选择器优先级：通常我们可以将CSS的优先级由高到低分为六组：
1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。IE 6不支持这个属性；
2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0} 会覆盖 .classname{margin:3px}。
4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px} 会覆盖 div{margin:6px}
5、第五级由一个或多个 类型选择器定义。如 div{margin:6px} 覆盖 *{margin:10px} 。
最低一级的选择器是为一个通配选择器，用*{margin:10px}这样的类型来定义。
另外，可以用一句极为简单的话来描述CSS优先级问题：当一个CSS选择器拥有更多的高级别属性时，它的优先级就会比较高。如 #i100
*.c20 *.c10{} 的优先级就会高于 #i100 *.c10 div p span em{}
，这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个，当然前者优先级会比较高。相同级别的优先级：
当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
2、第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
3、第三级的优先属性由<link/>标签所引入的样式表定义。
4、第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
5、第五级优先的样式由用户设定。
最低级的优先权由浏览器默认。
