重点就是热点问题，现在碰到了这么一个页面（如图，图片只是示例），需求是在电脑上都要能看，不变形，还要每个圆圈都可以点。
整个网站使用的框架是bootstrap，但是考虑了好久，感觉不适合用bootstrap来对它进行布局。原因是，它的布局恰好和栅格系统的12有矛盾，因为第一条曲线是有5个圈的，取col-lg-1也不行，取col-lg-2也不行
然后经人提醒，可以用热点。然后。。(っ °Д °;)っ？？？热点？？纳尼？？
百度了资料，Dreamweaver就有热点（用Dreamweaver建立热点的时候，记得调成设计模式而不是代码模式。（如何Dreamweaver建立热点的链接），根据w3c定义：
我理解的原理是这样的：img标签作为一张背景图片，然后以这张图片的左上角为map标签的起始点（0，0），以area的shape取值为circle为例子，coords的前两个数字就是这块area的圆心（因为是circle），最后那个数字是这个圆的半径，圈出来的区域就是当前这个area的区域。
方形的话，则是把矩形的左上角视为原点，对角线为距离。
难点在于，缩小屏幕宽度的时候，热点位置不会跟着变化。
后来又改了需求，换成，后面虚线是100%占据屏幕宽度，圆圈则是控制在1200px的宽度，于是热点的位置的数字就可以不用改了。只要调节虚线随时变化被压缩拉伸大小的问题。这个简单，就不解释了。
另外一种类似热点的方式，看这个网站：http://zt.tianpeng.com/dist/20170324-3270/index.html?fr=pic
这个网站全是背景图片，图片从服务器上请求回来，给个a标签在位置上添加链接。
这个，只能说666吧。
说一下自己的看法，不针对这个网站：怎么说呢，毕竟全是图片这种方式确实6。在前端的优化上确实是涉及到图片的大小数量等问题。整个网站使用图片的不好的地方在于加载图片的问题，一般连小图标的图片我们都是用i字体来控制，能不用上图片就不用上图片，减少因为图片对服务器的请求数量和时间等问题。
吐槽完，我们还是说回不规则布局和热点
不规则布局，比如说我刚接触前端的时候就碰到过，当时参加比赛做一个环保网站，需要做一个日历，恰好是这样布局的（找不到原来网址了只能ps模拟一下）
如箭头所指向，这个表格边框是需要保留的，每个格子也有背景颜色（因为还需要做hover的动效），但是只有第一行最后一个格子不需要border-top，border-right，background，只要对这个格子做特殊处理就可以了，相对来说这种不规则布局还比较好做。
像百度找来的这种呢，我觉得还是属于规则的，这个很好划分div的位置，也可以像上面提到的猪八戒网一样全是图片，然后用<a>标签定位放链接
在百度找到的另外一种（你会发现= =不规则的好多是韩国的设计，因为我们那个比赛的环保网站也是当时参考一个韩国网站设计的【这里声明：设计美感什么的部分国界，不要乱喷】）
这种呢，就看起来难搞一些了，除了背景是那块黄色，对于logo，nav，右下角的切图文字，正中间左边的文字布局使用position去排版之外，难的是图片的不规则形状要怎么展现。
观察一下，图片是有一种overflow:hidden的样式存在，但是边边角角又都是圆弧，这就难以思考了。
想了一下方法有下面几种：
- 用table去布局。这是很老套的一种做法，虽然table很好用，但是大概从好几年前就已经摒弃，一个是因为table对于网页的加载时间问题，另外一个也是因为table的布局问题，这个，百度下来一堆我就不说了。
- 用div去布局。这个倒是现在确实常用的方式，但是相对这里的图片外观而言，可能比较难弄，依旧是在这一堆div底下是一张img，如果把div像这么切割↓，感觉就是和table布局一样，不需要的就不用展现，外弧还可以用border-radius凑合一下，但是内弧，就不知道要怎么搞了，难道这个div里面再拆很多细小的div吗？
- 用到变形，CSS3+jq，Arctext.js弧形插件（没用过，先不说）
- 也是高端的，用canvas画布，这个涉及到js，不在这里讲。
另外一个就是热点问题
上面讲到，热点就是用map。
map的坏处是什么的呢，比如你打开两个浏览器页面是同一个使用了热点的网站，然后你选择其中一个进行点击，你会打开两个对应的页面，因为它是同时的。另外不好的地方就是map不好调因为屏幕大小的问题，对热点位置和大小进行自适应。
但是热点还是有用的，像一些比较大型的商城网站，放置某些需要加不同链接的不规则布局的商品的时候，热点就可以用上。