需要的知识
1.div标签的运用
2.id选择器，后代选择器，
3.简单的css样式长，宽，高，背景颜色，浮动，绝对定位，边框弧度
4.div的布局特点
静态的完成效果
动态效果（点击链接观看）
太极页面1446450047.github.io开始
HTML部分
<!DOCTYPE html>
HTML部分说明
1.其中最外面的id为八卦-wrapper为包住八卦的最大的div
2.id 为八卦的div为上图中的八卦
3.八卦里面的div为 下图指示部分
CSS部分
CSS部分说明
通过改变每个div的大小颜色，浮动的left，top值，改变每个div的border-redius的值来画这个八卦图
<
完整代码
<!DOCTYPE html>
注意事项
1.id可以用中文 ，但是文件名和路径不能（最好不要）
2.一定要注意清楚浏览其的默认样式
3.能不写死就千万不要写死，最好用百分比代替像素（防止用户改变分辨率造成的bug）
4.父元素relative，子元素absolute
5.注意几个div的偏移位置，可以加boder: 1px,solid,red;来确定位置后调试
6.第27行代码为让八卦转起来在静态八卦中不起作用
让八卦转起来
/*先定义一个@keyframes 命名为x*/
转动的八卦完整代码
<!DOCTYPE html>
拓展：手机端的转动的八卦
在原代码不变的情况下使用
@media(max-width:500px){ }来设置移动端的样式
（其中设置的样式为当在移动端的时候所展现的样式，没有在其中设置的样式默认使用客户端的样式）
移动端完整代码
<!DOCTYPE html>
部署到GitHub上的链接：
/1446450047/My-Code-Exercise/blob/master/html%2Bcss-demo1/index.html
