效果:
代码:
免费下载:https://download.csdn.net/download/cc2855816075/80144740
注意:
1.float浮动的元素会脱离标准流,当一个div中的所有元素都脱标时,div将失去大小,因为没有元素将它撑开撑大,所以常见的解决办法有两个:
①在原处放一个和他一样大小的div帮他占位置。
②利用clear:both消除float浮动带来的影响。
<!-- ★★★去除float造成的影响★★★ -->
<div style="clear: both;"></div>
2.空格为后代选择器,选择所有后代。
.odr-1-a,.odr-1-b{/* ★★★并集选择器不是空格,而是逗号!!★★★ */
width: 49%;
display: inline-block;
line-height: 36px;
}
3.“>”是子元素选择器 ,选取的一定是直接后代(儿子)。
4.vertical-align意味垂直方向的对齐方式,一般对图片作用。
.odr-4-1{
margin-top: 6px;
vertical-align: top;/*★★★很重要,不然对不齐★★★*/
}
background-color: #e2e2e2;
/* ★★★这个是修改无序列表前面原点样式的属性★★★ */