一、 display 和 float
这周具体遇到的都是将块级元素和行内元素转换，具体可以用 dispaly 和 float 来解决。
display: inline-block; 和 float:left;区别
1、display:inline-block; 是将元素变成具有行内元素在一行排列显示的特征，又具有块级元素可以设置 width 和 height属性的特征。（两个元素之前有缝隙存在,如果后面跟块级元素，则块级元素会换行显示）
2、float:left; float意思是浮动的意思，float:left;的字面意思就是靠左边浮动 ，可以设置 width 和 height 属性也可以在一行显示，元素之前没有缝隙存在并且会脱离图层，如果后面跟块级元素，则块级元素不会换行显示。
二、 css选择器
伪类选择器
选择最后一个 li 元素 li :last-child{*****} ；这种写法的叫做 伪类选择器。
三、css属性总结
| 属性名 | 属性值 | 说明 |
|---|---|---|
| font-family | 黑体 | 字体为黑体 |
| border-radius | 25px | 把一个盒子四角变弧度 |
| text-decoration | none | 给a标签去除下划线 |
| hover | color：bule | 鼠标移入时颜色变成蓝色 |
| cursor | pointer | 鼠标移入时变成手状标志 |
| trstransition | width 1s | 鼠标移入时宽度出现时间是1秒 |
| list-style | none | 去除 li 标签前的小圆点 |
target 常见的4个值
1、-blank 在新窗口中打开；
2、-self 在当前窗口打开（默认值）；
3、-parent 在父窗口打开；
4、-top 在当前浏览器中打开，且框架会消失。
四、ul 无序列表
image.png
效果如下
image.png
想要做出如下图的效果
image.png
css样式设置
图4
说明：
1、li 是不能单独使用的，必须在 ul 中使用；
2、ul是块级元素、li 也是块级元素 可以设置宽和高；
3、ul 标签下不能直接放内容或者其他标签，必须放在 li 标签里，而 li 标签是可以放内容或其他属性，也可以再放 ul ol 标签。
