【HTML+CSS练习一】编写小米商城小组件

阿航的笔记

已于 2024-03-06 09:53:55 修改

阅读量1.1k

点赞数 24

文章标签： html css 前端

于 2024-02-28 21:11:05 首次发布

本文链接：https://blog.csdn.net/zyh0815/article/details/136351638

版权

本文详细介绍了如何通过HTML和CSS代码实现小米商城类似的小部件设计，涉及页面布局的分层结构、浮动元素的应用以及CSS样式控制。通过实例展示了大盒子、左侧和右侧子盒子的构建及内容组织。

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

文章目录

前言
一、页面布局
二、HTML代码
三、CSS代码
总结

前言

本文是参照小米商城网站中的小组件做的HTML+CSS练习

注：以下是本篇文章正文内容，下面案例中的截图来源于小米商城。

一、页面布局

将此页面的布局拆分为三个盒子，一个大盒子，一个左侧盒子（包括一张主图），一个右侧盒子（包括8个小盒子）。先设置盒子的大小，然后利用float浮动元素多多个块级元素横向排列，最后在盒子中加入文字，图片，超链接和其它细节。
在这里插入图片描述

二、HTML代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./box2.css">
</head>

<body>
    <div class="box">
        <div class="left"><a href="https://www.mi.com" target="_blank"><img src="./images/mi.jpg"></a></div>
        <div class="right">
            <div>
                <a href="https://www.mi.com" target="_blank">
                    <img src="./images/mi1.jpg">
                    <h3 class="title">Xiaomi 14 Ultra</h3>
                    <p class="desc">徕卡全明星四摄 | 双向卫星通信 | 小米澎湃OS</p>
                    <p class="price">6499元起</p>
                </a>
            </div>
            <div>
                <a href="https://www.mi.com" target="_blank">
                    <img src="./images/mi2.jpg">
                    <h3 class="title">Redmi K70 Pro</h3>
                    <p class="desc">第三代骁龙8 年度旗舰平台</p>
                    <p class="price">3299元起</p>
                </a>
            </div>
            <div>
                <a href="https://www.mi.com" target="_blank">
                    <img src="./images/mi3.jpg">
                    <h3 class="title">Redmi K70</h3>
                    <p class="desc">第二代骁龙8 旗舰芯</p>
                    <p class="price">2499元起</p>
                </a>
            </div>
            <div>
                <a href="https://www.mi.com" target="_blank">
                    <img src="./images/mi4.jpg">
                    <h3 class="title">Redmi K70E</h3>
                    <p class="desc">新一代旗舰焊门员</p>
                    <p class="price">1899元起</p>
                </a>
            </div>
            <div>
                <a href="https://www.mi.com" target="_blank">
                    <img src="./images/mi5.jpg">
                    <h3 class="title">Xiaomi 14 Pro</h3>
                    <p class="desc">徕卡Summilux可变光圈镜头｜小米澎湃OS</p>
                    <p class="price">4999元起</p>
                </a>
            </div>
            <div>
                <a href="https://www.mi.com" target="_blank">
                    <img src="./images/mi6.jpg">
                    <h3 class="title">Xiaomi 14</h3>
                    <p class="desc">徕卡光学Summilux镜头｜小米澎湃OS｜第三代骁龙®8移动平台</p>
                    <p class="price">3999元起</p>
                </a>
            </div>
            <div>
                <a href="https://www.mi.com" target="_blank">
                    <img src="./images/mi7.jpg">
                    <h3 class="title">Redmi Note 13 Pro</h3>
                    <p class="desc">小金刚品质</p>
                    <p class="price">1399元起</p>
                </a>
            </div>
            <div>
                <a href="https://www.mi.com" target="_blank">
                    <img src="./images/mi8.jpg">
                    <h3 class="title">Redmi Note 13 Pro+</h3>
                    <p class="desc">天玑 7200-Ultra 处理器</p>
                    <p class="price">1899元起</p>
                </a>
            </div>
        </div>
    </div>
</body>

</html>

三、CSS代码

* {
    background-color: #f5f5f5;
}

.box {
    width: 1226px;
    height: 615px;
    background-color: #f5f5f5;
    margin: 100px auto;
}

.right a {
    text-decoration: none;
    background-color: #fff;
}


.left {
    width: 234px;
    height: 615px;
    float: left;
}

.left img {
    width: 234px;
    height: 615px;
}

.right {
    width: 992px;
    height: 615px;
    float: left;
}

.right>div {
    width: 234px;
    height: 300px;
    background-color: #fff;
    float: left;
    margin-left: 14px;
    margin-bottom: 15px;

}

.right>div img {
    width: 160px;
    height: 160px;
    margin: 10px 37px 18px 37px;
}

.right>div .title {
    font-size: 14px;
    font-weight: 400;
    color: #333;
    margin: 0 10px 2px;
    text-align: center;
}

.right>div .desc {
    height: 18px;
    font-size: 12px;
    text-align: center;
    color: #b0b0b0;
    margin: 0 10px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.right>div .price {
    text-align: center;
    color: #ff6700;
    font-size: 14px;
    margin: 0 10px 14px;   
}

.right>div img,
.title,
.desc,
.price {
    background-color: #fff;
}

这里对上图中较陌生的代码作详细解释
text-overflow: ellipsis; 当文本内容超出容器的宽度时，使用省略号(…)代替超出部分。
white-space: nowrap; 不允许文本内容换行，保持在同一行显示。
overflow: hidden; 当内容超出容器的宽度时，隐藏超出部分，只显示容器宽度内的内容。