一、今天完成的事情：

1.学习了使用css来画三角形

2.学习了使用css来画圆形

3.学习了在页面添加audio音频文件

4.学习了去除inline-block间距的方法

二、明天计划的事情：

1.学习自定义audio音频样式

2.学习css动画效果，hover属性

3.学习制作半透明效果

三、遇到的问题：

使用bootstrap栅格布局还有些不熟练，布局想的比较久，特别是col的位置的调整，一般调整不到想要的位置，会通过调整row或者col的padding-left的长度来准确定位，不过不知道是否会影响元素水平居中

四、收获：

1.使用css画三角形

width: 0;

height: 0;

border: 50px solid transparent;  ( transparent为透明 )

border-top: 50px solid red; （ 改top为left\right\bottom则角朝向改变 ）

此为角朝上的红色三角形

2.使用css画圆形

width: 10px;

height: 10px;

border-radius: 50%;

此为直径10px的圆形，画圆形跟画圆角的矩形方法一样，都是添加border-radius样式，当其角的弧度大于等于50%，圆角就变成了圆弧

3.页面添加audio音频

<audio src="*" controls="controls"></audio>  （ src为音频文件地址，controls="controls"为使用浏览器的音频播放组件样式 ）

浏览器自带的音频播放样式想要自定义的话，查找了下都需要使用js调用，暂时没找到只用css改变播放样式的方法

4.去除inline-blcok间距的方法

方法一：改变HTML结构

<ul>

     <li>item1

     <li>item2

     <li>item3

     <li>item4

     <li>item5

</ul

丢失关闭标签，“DOCTYPE”要选择对，在“XHTML”下会出现问题

方法二：负的margin

ul {

    font-size: 12px;

}

ul li {

    margin-right: -4px;

    *margin-right: 0;

}

这种解决方法并不完美，如果你的父元素设置的字号不一样，可能你的“-4px”就不能解决问题。况且在Chrome中你需要另外设置一个负的margin值才能实现同等的效果

方法三：设置父元素字体为0

设置父元素的字体为“0”，然后在“inline-block”元素上重置字体需要的大小，可是在Safari下问题依然存在