【HTML、CSS】利用HTML、CSS仿小米商城商品列表

已于 2022-04-06 13:39:28 修改
阅读量1k 收藏 5
点赞数 2
分类专栏： CSS HTML 文章标签： css html webview 前端
于 2022-03-12 11:50:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43797577/article/details/123441087
版权
CSS 同时被 2 个专栏收录
15 篇文章 1 订阅
订阅专栏
HTML
15 篇文章 0 订阅
订阅专栏

HTML源码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局案例</title>
</head>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="../css/buju.css">

<body>

    <div class="box">
        <div class="left">
            <a href="#">
                <img src="../img/zdp.jpg" alt="小米折叠屏手机" class="pic1">
            </a>
        </div>
        <div class="right">
            <div class="one">
                <!-- 图片 -->
                <a href="#">
                    <img src="../img/k50.jpg" alt="Redmi K50 电竞版" class="pic">
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <h5 class="font">
                        Redmi K50 电竞版
                    </h5>
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <p class="ms">
                        全线拉满的冷血旗舰
                    </p>
                </a>
                <!-- 价格 -->
                <a href="#">
                    <p class="jg">3299元起</p>
                </a>
            </div>
            <div class="tow">
                <!-- 图片 -->
                <a href="#">
                    <img src="../img/12.jpg" alt="xiaomi 12 Pro" class="pic">
                </a>
                <a href="#">
                    <!-- 商品描述 -->
                    <h5 class="font">
                        xiaomi 12 Pro
                    </h5>
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <p class="ms">
                        全新骁龙8
                    </p>
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <p class="ms2">
                        2kAMODED屏幕
                    </p>
                </a>
                <!-- 价格 -->
                <a href="#">
                    <p class="jg">4699元起</p>
                </a>
            </div>
            <div class="three">
                <!-- 图片 -->
                <a href="#">
                    <img src="../img/mi12.jpg" alt="Xiaomi  12" class="pic">
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <h5 class="font">
                        Xiaomi 12
                    </h5>
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <p class="ms">
                        全新骁龙8
                    </p>
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <p class="ms2">
                        5000万主摄
                    </p>
                </a>
                <!-- 价格 -->
                <a href="#">
                    <p class="jg">3699元起</p>
                </a>
            </div>
            <div class="four">
                <!-- 图片 -->
                <a href="#">
                    <img src="../img/12x.jpg" alt="Xiaomi 12X" class="pic">
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <h5 class="font">
                        Xiaomi 12X
                    </h5>
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <p class="ms">
                        骁龙870
                    </p>
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <p class="ms2">
                        5000万主摄
                    </p>
                </a>
                <!-- 价格 -->
                <a href="#">
                    <p class="jg">2999元起</p>
                </a>
            </div>
            <div class="five">
                <!-- 图片 -->
                <a href="#">
                    <img src="../img/11.jpg" alt="Xiaomi11 青春活力版" class="pic">
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <h5 class="font">
                        Xiaomi11 青春活力版
                    </h5>
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <p class="ms">
                        轻薄5G，内外皆出彩
                    </p>
                </a>
                <!-- 价格 -->
                <a href="#">
                    <p class="jg">1899元起</p>
                    <p class="jg2">1999元</p>
                </a>
            </div>
            <div class="six">
                <!-- 图片 -->
                <a href="#">
                    <img src="../img/11pro.jpg" alt="Redmi Note 11Pro系列" class="pic">
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <h5 class="font">
                        Redmi Note 11Pro系列
                    </h5>
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <p class="ms">
                        三星AMOLED高刷屏
                    </p>
                </a>
                <!-- 价格 -->
                <a href="#">
                    <p class="jg">1799元起</p>
                </a>
            </div>
            <div class="seven">
                <!-- 图片 -->
                <a href="#">
                    <img src="../img/115g.jpg" alt="Redmi Note 11 5G" class="pic">
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <h5 class="font">
                        Redmi Note 11 5G
                    </h5>
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <p class="ms">
                        5000mAh大电量
                    </p>
                </a>
                <!-- 价格 -->
                <a href="#">
                    <p class="jg">1199元起</p>
                </a>
            </div>
            <div class="eight">
                <!-- 图片 -->
                <a href="#">
                    <img src="../img/114g.jpg" alt="Redmi Note 11 4G" class="pic">
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <h5 class="font">
                        Redmi Note 11 4G
                    </h5>
                </a>
                <!-- 商品描述 -->
                <a href="#">
                    <p class="ms">
                        5000mAh大电量
                    </p>
                </a>
                <!-- 价格 -->
                <a href="#">
                    <p class="jg">969元起</p>
                </a>
                <a href="#">
                    <p class="jg2">999元起</p>
                </a>
            </div>
        </div>
    </div>
</body>

</html>

css源码：

* {
    /* 全局设定内外边距为0 */
    margin: 0px;
    padding: 0px;
}
body{
    /* body颜色为f5f5 */
    background-color: #f5f5f5;
}
body a{
    /* 去掉下划线 */
    text-decoration: none;
}
.box {
   .box {
    /* 最外层div居中显示 清除浮动 */
    width: 1400px;
    /* height: 830px; */
    margin: 180px auto;
    overflow: hidden;
}
}
.pic1{
    /* 左侧图片 */
    float: left;
    width: 200px;
    height: 830px;
}
.right {
    /* 右侧商品 */
      float: left;
    width: 1200px;
    height: 300px;
  
    
}
/* 关键帧 100%时1.1倍放大 */
@keyframes donghua {  
    100%{
        transform: scale(1.1);
        }
}
.pic1:hover {
       /* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
    animation: donghua 1s;
    box-shadow: 10px 10px 10px 4px  rgba(159, 154, 145, .5) ;
}
.one:hover {
    /* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
    animation: donghua 1s;
    box-shadow: 10px 10px 10px 4px  rgba(159, 154, 145, .5) ;
}
.tow:hover {
    /* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
    animation: donghua 1s;
    box-shadow: 10px 10px 10px 4px  rgba(159, 154, 145, .5) ;
}
.three:hover {
      /* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
    animation: donghua 1s;
    box-shadow: 10px 10px 10px 4px  rgba(159, 154, 145, .5) ;
}
.four:hover {
     /* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
    animation: donghua 1s;
    box-shadow: 10px 10px 10px 4px  rgba(159, 154, 145, .5) ;
}
.five:hover {
  /* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
    animation: donghua 1s;
    box-shadow: 10px 10px 10px 4px  rgba(159, 154, 145, .5) ;
}
.six:hover {
      /* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
    animation: donghua 1s;
    box-shadow: 10px 10px 10px 4px  rgba(159, 154, 145, .5) ;
}
.seven:hover {
      /* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
    animation: donghua 1s;
    box-shadow: 10px 10px 10px 4px  rgba(159, 154, 145, .5) ;
}
.eight:hover {
      /* 调用关键帧 使鼠标放在盒子上时1秒放大1.1倍 鼠标放到盒子出现阴影部分 */
    animation: donghua 1s;
    box-shadow: 10px 10px 10px 4px  rgba(159, 154, 145, .5) ;
}
.box .pic {
    /* 图片内边距 */
    width: 250px;
    /* padding: 0px 20px; */
} 
.box .font{
    /* 字体大小 外边距 */
    color: #5f5f5f;
    margin:10px 60px;
    font-size: 14px;
}
.box .ms {
    /* 左浮动 字体大小 外边距 */
    float: left;
    color: #c2c2c2;
    font-size: 12px;
    margin-left: 60px;
}
.box .ms2 {
    /* 左浮动 字体大小 内、外左边距  左侧边框颜色和字体颜色一样*/
    float: left;
    color: #c2c2c2;
    font-size: 12px;
    margin-left: 5px;
    padding-left: 5px;
    border-left: 2px solid #c2c2c2;
}
.box .jg {
    /* 左浮动 外边距 字体颜色 */
    float: left;
    margin: 20px 50px;
    color: #FFAF78;
    font-size: 14px;
}
.box .jg2 {
    /* 左浮动 外边距 字体颜色 */
    float: left;
    margin: 17px;
    color: #c2c2c2;
    font-size: 14px;
    text-decoration:line-through;
}
.one {
    /* 盒子左浮动在一行显示，上下外边距为10px 左右为20px */
    float: left;
    width: 250px;
    height: 400px;
    background-color:#ffffff;
    margin: 10px 20px;
    
}
 .tow {
    /* 盒子左浮动在一行显示，上下外边距为10px 左右为20px */
    float: left;
    width: 250px;
    height: 400px;
    background-color:#ffffff;
    margin: 10px 20px;
}
.three {
    /* 盒子左浮动在一行显示，上下外边距为10px 左右为20px */
    float: left;
    width: 250px;
    height: 400px;
    background-color:#ffffff;
    margin: 10px 20px;
}
.four {
    /* 盒子左浮动在一行显示，上下外边距为10px 左右为20px */
    float: left;
    width: 250px;
    height: 400px;
    background-color:#ffffff;
    margin: 10px 20px;
} 
.five {
     /* 盒子左浮动在一行显示，上下外边距为10px 左右为20px */
    float: left;
    width: 250px;
    height: 400px;
    background-color:#ffffff;
    margin: 10px 20px;
}
.six {
     /* 盒子左浮动在一行显示，上下外边距为10px 左右为20px */
    float: left;
    width: 250px;
    height: 400px;
    background-color:#ffffff;
    margin: 10px 20px;
}
.seven {
     /* 盒子左浮动在一行显示，上下外边距为10px 左右为20px */
    float: left;
    width: 250px;
    height: 400px;
    background-color:#ffffff;
    margin: 10px 20px;
}
.eight {
     /* 盒子左浮动在一行显示，上下外边距为10px 左右为20px */
    float: left;
    width: 250px;
    height: 400px;
    background-color:#ffffff;
    margin: 10px 20px;
}

A Lucky Boy
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5期末大作业：仿小米手机商城网站设计——仿小米手机商城全套(37页) 商城网购HTM5网页设计作业成品
11-24 925
HTML5期末大作业：仿小米手机商城网站设计——仿小米手机商城全套(37页) 商城网购HTM5网页设计作业成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC
H5页面可下拉刷新的订单列表
08-02
电商H5订单页面,分订单种类,比如已支付,已取货等,只要更改种类数组,会自动适应,订单列表带上啦加载,下拉刷新功能,简单,粗暴
HTML+CSS做的商城页面
热门推荐
qq_53682646的博客
10-04 1万+
品优购小商城，用html+css做的三个静态页面
前端开发——淘宝购物列表
gjbss的博客
11-25 2707
淘宝购物列表
我的预约订单页面List
weixin_30242907的博客
04-23 970
1 <%@ page language="java" contentType="text/html;charset=UTF-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 3 <%@ taglib prefix="fn" uri="http://java....
写一个h5 瀑布流商品列表网页代码
weixin_35750953的博客
02-18 329
我们可以使用 HTML、CSS 和 JavaScript 来创建 h5 瀑布流商品列表网页。首先，我们需要创建一个网页文件，其中包含一个头文件，一个主要的 HTML 部分和一个脚本部分。然后，在 HTML 部分中，我们需要添加一个 div 元素，用来放置商品列表的数据。接下来，我们需要在 JavaScript 部分中写一些代码，用来从服务器获取商品列表的数据，并将其渲染到 div 中，以创建瀑布流...
2022最新仿小米商城首页html+css+js
09-22
本资源名为“2022最新仿小米商城首页html+css+js”，这是一套完整的前端开发代码，旨在模仿小米商城的首页布局和功能。它包括了HTML、CSS和JavaScript三个主要组成部分，这些都是构建动态、交互式网页的基础技术。 ...
html+css仿小米商城首页搜索页和商品详情页
12-30
在这个“html+css仿小米商城首页搜索页和商品详情页”的作业中，我们将深入探讨如何利用这两种语言来创建类似于小米商城的页面设计。 首先，HTML（HyperText Markup Language）是用于创建网页内容的标记语言。它...
html网页设计作业-静态的css+html仿小米商城
12-29
这个“html网页设计作业-静态的css+html仿小米商城”旨在帮助学习者掌握网页布局、样式设计以及交互实现的基本技巧。 首先，HTML（HyperText Markup Language）是网页内容的结构化语言，它定义了网页的各个部分，如...
仿小米商城wed练习HTML+css
05-15
在本项目中，"仿小米商城web练习HTML+css"是一个学习Web开发的实践案例，主要涉及HTML和CSS这两种前端核心技术。这个项目旨在帮助初学者理解网页布局、元素设计以及如何构建一个类似小米商城的电商网站界面。接下来...
小米商城前端页面显示html设计
06-11
小米商城页面设计，对小白友好的设计示例，有需要的可以看看
html+css实现仿小米商城主页
01-05
在仿小米商城的主页中，我们需要构建头部、导航栏、商品展示区、底部版权等不同区域，通过`<header>`, `<nav>`, `<main>`, `<section>`和`<footer>`等语义化标签来组织内容。 2. 导航链接：使用`<a>`标签创建可点击...
移动端-确认订单页面
xxx857857857的博客
09-24 977
移动端-确认订单页面 含源码与资源 orders.css order.html 页面效果 这里的数据以iphone6/7/8为例（之后会有含移动适配的页面，感谢b站黑马，项目来自于这上面的） 里面有设计稿，可以自己做一做，设计稿测量可以用PxCook或者PS (移动端设计稿一般在开发模式下调为2x) 链接：https://pan.baidu.com/s
html简单组件（九）：简洁的商城订单列表显示（带状态）
一方通行的博客
03-26 2666
html简单组件（九）：简洁的商城订单列表显示（带状态） 效果图为： HTML代码 <div class="textDiv"> <div class="head"> <b>订单编号：</b> 2021032610194432 </div> <div class="context"> <b>订单时间：</b> 2021-03-26 10:11:23 &l
HTML&CSS仿京东列表页静态制作总结
ccj_cmp的博客
08-02 1631
商品列表页的制作
HTML-小米布局
m0_74014745的博客
07-10 171
小米官网-手机布局
最简单的html+css仿小米商品页
只想AC的博客
06-05 518
最最最最最简单的html+css仿小米商品页
html+css制作静态小米商城页面（含css手动轮播图）
我也是全粘工程师啦
07-01 9961
html,css制作静态小米商城网页，纯css实现轮播图，含代码注释
仿写小米官网（登录、注册页面、首页、详情页、购物车）
weixin_69174819的博客
06-10 3602
仿写小米官网（登录、注册页面、首页、详情页、购物车）需要源码私
小米商城详情页html css
最新发布
06-23
小米商城详情页通常是一个精心设计的电商页面，使用HTML和CSS来构建。HTML负责页面结构，展示商品信息，而CSS则负责页面的样式和布局。以下是一个简化的介绍： 1. HTML结构：详情页会包含头部（header），包含导航和品牌logo；主体部分（main）一般分为商品图片区域、标题、描述、规格、价格、用户评价等模块；底部（footer）可能包含版权信息、联系方式等。 ```html <!DOCTYPE html> <html> <head> <title>小米商城详情页</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <!-- 导航和logo --> </header> <main> <section class="product-image"> <img src="product.jpg" alt="产品图片"> </section> <section class="product-info"> <h1>产品标题</h1> <p>产品描述...</p> <ul class="specifications"> <!-- 规格列表 --> </ul> <div class="price">价格：￥XX.XX</div> <div class="reviews">用户评价...</div> </section> </main> <footer> <!-- 底部信息 --> </footer> </body> </html> ``` 2. CSS样式：CSS用来设置元素的字体、颜色、大小、位置、布局、动画等。例如，你可以用媒体查询优化响应式设计，使得页面在不同设备上看起来美观且功能正常。 ```css .product-image { width: 100%; height: auto; } .product-info h1 { font-size: 24px; color: #333; } @media (max-width: 768px) { .product-info { flex-direction: column; } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A Lucky Boy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值