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

Posted 2022-03-23 黑马程序员官方

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

• 前端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;

---

 2022年前端学习路线图：课程、源码、笔记，技术栈
欢迎小伙伴们留言哦，期待看到大家的进步。另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。