前端自学整理——CSS仿小米商品栏

最新推荐文章于 2022-08-15 08:22:39 发布

前端小白兔@

最新推荐文章于 2022-08-15 08:22:39 发布

阅读量990

点赞数 3

分类专栏：前端文章标签： html html5 css3 css

本文链接：https://blog.csdn.net/weixin_43237458/article/details/108858882

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS仿小米商品栏

商品栏已成为手机网站、电商网站甚至课程网站必不可少的一部分。

为了练习CSS中的几个重要模块，这次选用小米商品栏作为练习对象。

准备阶段

在这里插入图片描述

观察盒子模型，根据网页布局的第一准则可以分析：

有一个与浏览器同宽的大盒子，且有背景颜色
有一个可视区的版心部分，版心部分分为两个模块：上面的“小米闪购部分”以及下面的商品部分
小米闪购部分是一个左右浮动；盒子也是浮动模型

开始搭建骨架

结构部分，结构永远比样式重要。根据上面的分析可以得到

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品栏</title>
</head>

<body>
    <div class="box">
        <div class="w">
            <div class="box_hd">
                <h4>小米闪购</h4>
                <a href="#">查看全部</a>
            </div>
            <div class="box_bd">
                <div class="fl"></div>
                <div class="fr"></div>
            </div>
        </div>
    </div>
</body>

</html>

开始修饰样式

1.样式初始化

 <style>
        * {
            margin: 0;
            padding: 0;
        }
         li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        body {
            height: 2000px;
            background-color: #f5f5f5;
        }

        .w {
            margin: 200px auto;
            width: 1226px;
            height: 500px;
            background-color: red;

        }

        /* 头部的标题盒子,注意文字居中 */
        .box_hd {
            background-color: skyblue;
            height: 75px;
            line-height: 75px;
        }
    </style>

基本的盒模型已经搭建起来了：

在这里插入图片描述
2.头部盒子的制作，给左侧盒子左浮动，右侧盒子右浮动，并且修饰边距、字体样式。

3.将下面的大盒子分成两个小盒子。小盒子添加浮动。

 /* 下方两个盒子的左侧盒子浮动 */
        .fl {
            float: left;
            width: 234px;
            height: 614px;
            background-color: blue;
        }

        /* 强制锁定图片大小，以防图片溢出 */
        .fl img {
            width: 100%;
        }

        .fr {
            float: left;
            width: 992px;
            height: 614px;
            background-color: red;
        }

效果如下：

在这里插入图片描述
4.给左侧的盒子插入一张图片即可。

5.右侧的盒子需要采用a+ul+li的模式。

 <ul>
                        <a href="#">
                            <li>
                                <img src="images/mi2.jpg" alt="">
                                <div class="recom">
                                    <h4>小米10 至尊版</h4>
                                    <p>120X变焦/120X变焦/120X变焦 </p>
                                    <i>5299元起</i>
                                </div>
                            </li>
                        </a>
 </ul>

6.对盒子修饰

        .fr ul li {
            float: left;
            width: 234px;
            height: 300px;
            border: 1px solid #d2d2d2;
            background-color: #fff;
            margin-left: 14px;
            margin-bottom: 14px;
            /* 巧用 */
            text-align: center;
        }

        .fr ul li img {
            width: 160px;
            height: 160px;
            margin: 20px 0;

        }

        .recom h4 {
            font-size: 13px;
            color: black;
        }

        .recom p {
            font-size: 12px;
            color: black;
        }

        .recom i {
            display: inline-block;
            padding-top: 10px;
            font-size: 14px;
            font-style: normal;
            color: #ff6700;
        }

        .fr ul li:hover {
            box-shadow: black;
        }

最终效果：

在这里插入图片描述

总结心得：

我们可以给父盒子设置行高等于高度，使盒子中的行内元素居中对齐
盒子的大小需要严格测定，图片也需要锁定大小防止溢出
有些通栏的大盒子不必给定高度，是根据内容撑开的

前端小白兔@

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
前端自学整理——CSS仿小米商品栏

CSS仿小米商品栏商品栏已成为手机网站、电商网站甚至课程网站必不可少的一部分。为了练习CSS中的几个重要模块，这次选用小米商品栏作为练习对象。准备阶段观察盒子模型，根据网页布局的第一准则可以分析：有一个与浏览器同宽的大盒子，且有背景颜色有一个可视区的版心部分，版心部分分为两个模块：上面的“小米闪购部分”以及下面的商品部分小米闪购部分是一个左右浮动；盒子也是浮动模型开始搭建骨架结构部分，结构永远比样式重要。根据上面的分析可以得到<!DOCTYPE html><ht
复制链接

扫一扫