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

原创已于 2022-03-23 16:40:23 修改 · 604 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #前端自学 #前端框架 #自学前端

于 2022-03-22 15:19:06 首次发布

2023年前端—入门到精通专栏收录该内容

323 篇文章

订阅专栏

本文介绍了如何在HTML与CSS中通过子绝父相实现hot图片的精确定位，通过实例演示了绝对定位与浮动的区别，适合前端初学者掌握布局技巧。

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

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

一、案例

1.1 案例截图

1.2 案例分析

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

1.3 案例小结

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

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

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