黑马程序员前端-CSS综合案例：学成在线模块添加

 前端学习笔记教程不定期更新中，传送门：

• ​​前端HTML第一天：什么是网页？什么是HTML？网页怎么形成？​​
• ​​黑马程序员前端-CSS入门总结​​
• ​​黑马程序员前端-CSS之emmet语法​​
• ​​黑马程序员前端-CSS的复合选择器​​
• ​​黑马程序员前端-CSS的显示模式​​
• ​​黑马程序员前端-CSS背景​​
• ​​黑马程序员前端-CSS三大特性：叠层性、继承性、优先级​​
• ​​黑马程序员前端–CSS盒子模型以及PS基础​​
• ​​黑马程序员前端-CSS之圆角边框、盒子阴影、文字阴影​​
• ​​黑马程序员前端-CSS之浮动知识点汇总​​
• ​​黑马程序员前端-CSS前端基础了解PS切图​​
• ​​黑马程序员前端-CSS属性书写顺序（重点）​​
• ​​黑马程序员前端-CSS练手之学成在线页面制作​​
• ​​黑马程序员前端-CSS定位的4种分类​​

下面开始继续更新内容，前面链接大家用来查漏补缺哦。
 

一、案例

1.1 案例截图

1.2 案例分析

1. 一个大的 ​​li​​ 中包含 一个课程图片，课程介绍文字信息，还有hot的小图标；
2. hot图片重叠在课程图片上面—— 脱标，不占位置，需要使用绝对定位；
3. hot图片重叠在li的右上方 —— 需要使用边偏移确定准确位置。

1.3 案例小结

1. 子绝父相 —— 子元素使用绝对定位，父元素使用相对定位；
2. 与浮动的对比：

• 绝对定位：脱标，利用边偏移指定准确位置；
• 浮动：脱标，不能指定准确位置，让多个块级元素在一行显示。

1.4 代码

<!-- 修改.box-bd里面的li标签内容，添加一个hot图标 -->

<li>
     <!-- 添加hot小图片 -->
    <em>
        <img src="images/hot.png" alt="">
    </em>
    <img src="images/pic.png" alt="">
    <h4>
        Think PHP 5.0 博客系统实战项目演练
    </h4>
    <div class="info">
        <span>高级</span> • 1125人在学习
    </div>
</li>

.box-bd ul li {
    /* 子绝父相 */
    /* 父元素相对定位 */
    position: relative;
    float: left;
    width: 228px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
   
}
.box-bd ul li > img {
    width: 100%;
}
.box-bd ul li h4 {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box-bd ul li em {
     /* 子元素绝对定位 */
    position: absolute;
    top: 4px;
    right: -4px;
}