实例（四）淘宝焦点图

重生之我要好好学习

于 2022-07-29 18:00:03 发布

阅读量421

点赞数

分类专栏：笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_52583990/article/details/126059376

版权

本文介绍了在项目场景中如何使用CSS和HTML实现淘宝焦点图。通过解决如何居中显示元素、理解绝对定位的应用、设置圆角、优化重复样式及水平排列等关键问题，展示了焦点图的完整解决方案。

摘要由CSDN通过智能技术生成

项目场景：

学习来源：黑马程序员p238-243
学习内容：简单实现淘宝焦点图

目录标题

项目场景：
问题描述
解决方案：
代码如下
显示效果

问题描述

1.如何让块元素居中显示？

2.为什么给小箭头设置绝对定位

3.如何让绝对定位的盒子垂直居中？

4.如何设置小箭头右侧上下都变成圆角？

5.如何处理prev和next里相同的样式？

6.如何让设置了绝对定位的盒子里的小li水平排列？

解决方案：

1.无法用margin使块元素垂直居中，只能让盒子水平居中

2.（1）绝对定位不占有位置且会压住其他盒子，而相对定位会占有位置（2）子绝父相，小箭头是子盒子，所以应该使用绝对定位abosloute

3.算法如下：

top:50%;
margin-top:盒子高度的一半;

4.border-top-right-radius: 15px;
border-bottom-right-radius: 15px;

5.使用并集选择器，并集选择器可以集体声明相同的样式
语法：
选择器，选择器{ 样式 }；

6.设置浮动

代码如下

css

 *{
   
            margin: 0;
            padding: 0;
        }

        a{
   
            text-decoration: none;
        }

        li{
   
            list-style: none;
        }

        .tb-promo{
   
            position: relative;
            /* 子绝父相 */
            width: 520px;
            height: 280px;
            background-color: pink;
            margin: 100px auto;
        }

        .tb-promo img