第二周学习笔记和总结

一、 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 标签。