标题有点唬人。。。也不是说要做F2E，只是前段时间做了这个wordpress主题感觉还挺好玩。

之前只是在w3school上看了看CSS语法，都不咋会CSS，做完了才稍微入点门。然后嘛现在总结一下最近所学，基本上是想到哪写到哪，页底有demo页面。

1.块级元素居中 一般用作.container，给一个width，然后利用margin的auto

.container{
    width:90%;
    margin:0 auto;
}

2.图片不超过父元素 img是特殊的内联元素，这个问题之前做影评的时候就遇到过，google无果后看了bootstrap的源码，找到如下解决办法

img{
    max-width:100%;
}

3.CSS制作三角形 其实就是利用很宽的border，理论上来说可以用三角形拼成任意图形

将图中第一个div的高、宽设为0，即可

.triangle{
        width: 0;
        /*50px为边框厚度，即三角形的高 */
	border: 50px solid transparent;
}

如果想像图中凸出来的效果，用伪类:after或者:before

.triangle{
	position: relative;
    width: 200px;
    height: 100px;
}
.triangle.gray{
    background: #555;
}
.triangle.gray:after{
	position: absolute;
	top: 100%;
	left: 50px;
	z-index: 999;
	content: '';
	border: 50px solid transparent;
	border-top-color: #555;
}

4.多列 这个之前不明觉历，后来看bootstrap源码学到了栅格系统（bootstrap太牛逼了 :）。

在框架中，一般将屏幕分成N个等宽的小块，然后分配若干小块达到多列效果，bootstrap分成12等份，semantic则分成16等份。我这里简单点，分成4等份。

5.子菜单 bootstrap里面是用的js，点击之后才能弹出子菜单。实际中我更喜欢用hover就能弹出的子菜单。

最核心的在于给子菜单的父元素一个相对定位position:relative;，目的在于让它脱离标准文档流，然后子菜单采用绝对定位position:absolute;，默认为display:none;，然后父元素或子菜单:hover时display:block;就OK，其实前面三角形也用到了这点。

3级4级N级菜单也是如此，这里就不说了。

6.以上效果Demo