前端-----小米商城模块练习

任务介绍:

小米商城模块化练习

效果图

①小米官方图

②效果图

代码

①html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="index.css"><script src="index.js"></script><title>小米商城模块练习</title>
</head>
<body><div class="content"><div class="content-show"><img src="data:images/left.jpg" class="content-show-photo"></div><div class="content-list"><div class="content-list-item"><span class="content-list-item-top top-g">新品</span><img src="data:images/right1.jpg" class="content-list-item-photo"><span class="content-list-item-name">小米8 青春版 4GB+64GB</span><p class="content-list-item-explain">潮流镜面渐变色，2400万自拍旗舰</p><span class="price">1299元 <span class="no-price">1300元</span></span></div><div class="content-list-item"><span class="content-list-item-top top-g">新品</span><img src="data:images/right2.png" class="content-list-item-photo"><span class="content-list-item-name">小米Play</span><p class="content-list-item-explain">内置每月10GB高速流量，高颜值流光渐变色</p><span class="price">1099元 </span></div><div class="content-list-item"><span class="content-list-item-top top-r">减300元</span><img src="data:images/right3.jpg" class="content-list-item-photo"><span class="content-list-item-name">小米8 SE 6GB+64GB</span><p class="content-list-item-explain">AI 超感光双摄，三星 AMOLED 屏幕</p><span class="price">1699元 <span class="no-price">1999元</span></span></div><div class="content-list-item item-R"><span class="content-list-item-top top-r">减600元</span><img src="data:images/right4.jpg" class="content-list-item-photo"><span class="content-list-item-name">小米MIX 2S 8GB+256GB</span><p class="content-list-item-explain">骁龙845 年度旗舰处理器，艺术品般陶瓷机身</p><span class="price">3399元 <span class="no-price">3999元</span></span></div><div class="content-list-item item-B"><span class="content-list-item-top top-r">享8折</span><img src="data:images/right5.jpg" class="content-list-item-photo"><span class="content-list-item-name">小米6X 6GB+128GB</span><p class="content-list-item-explain">轻薄美观的拍照手机</p><span class="price">1499元 <span class="no-price">1999元</span></span></div><div class="content-list-item item-B"><span class="content-list-item-top top-r">减100元</span><img src="data:images/right6.jpg" class="content-list-item-photo"><span class="content-list-item-name">小米Max 3 4GB+64GB</span><p class="content-list-item-explain">.</p><span class="price">1599元 <span class="no-price">1699元</span></span></div><div class="content-list-item item-B"><span class="content-list-item-top top-r">享8折</span><img src="data:images/right7.jpg" class="content-list-item-photo"><span class="content-list-item-name">红米6 Pro</span><p class="content-list-item-explain">高颜值大电量 红米旗舰</p><span class="price">999元 <span class="no-price">1299元</span></span></div><div class="content-list-item item-B item-R"><span class="content-list-item-top top-r">减300元</span><img src="data:images/right8.jpg" class="content-list-item-photo"><span class="content-list-item-name">红米6A 2GB+16GB</span><p class="content-list-item-explain">.</p><span class="price">569元 <span class="no-price">599元</span></span></div></div></div></body>
</html>

②css部分

body{margin: 0;font-family: sans-serif;
}
.content{width: 1226px;height: 615px;background: #f5f5f5;margin: 90px auto 0;
}
.content-show{width: 235px;height: 615px;background: blue;float: left;margin-right: 11px;
}
.content-list{width: 980px;height: 615px;background: #f5f5f5;float: left;
}
.content-list-item{width: 235px;height: 300px;background: #fff;float: left;margin-right: 13px;margin-bottom: 14px;
}
.item-R{margin-right: 0px;
}
.item-B{margin-bottom: 0px;
}
.content-show-photo{width: 235px;height: 615px;
}
.content-list-item-top{display: block;text-align: center;font-size: 14px;color: #fff
}
.top-r{margin: auto 90px;background: #e53935;
}
.top-g{margin: auto 90px;background: #83c44e;
}
.content-list-item-photo{/*clear: both;*/height: 160px;width: 160px;margin: 10px 36.5px 15px;
}
.content-list-item-name{display: block;font-size: 14px;font-weight: 400;text-align: center/*margin: auto 50px;*/
}
.content-list-item-explain{font-size: 12px;text-align: center;text-overflow: ellipsis;white-space: nowrap;height: 18px;margin: 0 10px 10px;color: #b0b0b0;overflow: hidden;
}
.no-price{color: #b0b0b0;font-size: 14px;text-align: center;
}
.price{display: block;color: #ff6700;font-size: 14px;text-align: center;white-space: nowrap;
}

前端-----小米商城模块练习相关推荐

判断字符串正则_(重学前端 - JavaScript(模块一)) 14、引用类型之 RegExp (正则)(详述)...
上一篇文章介绍了 JavaScript 中的 Date 类型,从地理方面的原理知识开始入手,如果大家认真看过上一篇文章,相信 JavaScript 中的 Date 类型已经难不住大家了!!! 但是今天 ...
前端小米商城首页简易模仿
前端小米商城首页简易模仿 HTML部分 <!DOCTYPE html><html lang="en"><head><meta charse ...
node js并发加载页面缓慢_详解如何利用前端Node模块zlib开启gzip压缩使页面加载速度更快...
前言这篇文章我们来聊一聊Node的原生模块zlib,它的主要作用是压缩和解压缩数据,我们都知道数据在压缩后可以减小体积,在网络传输时提高传输速度和节约带宽! API用法 zlib这个模块提供了很多的 ...
8.12 Web前端-小米商城项目实战
hello,各位朋友们大家好,今天我来继续把小米商城的部分说完,最后剩余的部分就是主体和尾部了,这两部分内容相对于前面来说难度较小,只有几个点需要注意一下即可. 1.主体部分: 首先我来说说主体部分, ...
8.8 Web前端-小米商城项目实战
hello大家好,人总是会在写项目的时候发现自己的许多不足之处,然后加以改进,并且记住这些东西,所以今天我给大家带来的是我的第二个项目,小米商城首页的书写.我觉得这个项目相比于我第一个淘宝的项目的难度 ...
房产中介租房平台小程序v4.1.61+ 前端（模块版）安装教程
房产中介租房平台小程序版本号:4.1.61 – 无限多开版,前端包括微信小程序+抖音小程序前端,功能挺强大,非常合适做房产中介平台.播播资源网整理了安装使用教程如下: 安装说明:上传压缩包至网站微擎框 ...
【jsSDK】前端验证码SDK模块
前端验证码模块ts 介绍一.效果展示二.使用步骤 1.引入库 2.参数说明 3.方法与事件说明说明介绍 1.该验证码模块基于原生typescript实现前端sdk模块,webpack打包. 2 ...
实战SSM_O2O商铺_39【前端展示】首页轮播图和一级商铺Dao+Service+Controller层的实现
文章目录概述 HeadLine Dao层接口映射文件单元测试 HeadLine Service层接口实现类单元测试 ShopCategory Dao层完善映射文件完善单元测试 Con ...
开放下载！《大促背后的前端核心业务实践》
简介:你关心玩法,我关心技术!作为淘系每年重要的大促活动 618 是如何保证平稳进行的?七大章节全方位展示 618 中的前端身影!另附 6000+ 字图文版前端学习秘籍和面试官直达简历投递地址,还不快 ...
大型前端项目的断点调试共享化和复用化实践
作者:enoyao,腾讯工程师背景随着我们项目越来越大,我们有可能需要维护很多的模块,我们腾讯文档 Excel 项目大模块有 10 几个,而每个大模块分别有 N 个小模块,每个大模块下的小模块都有 ...

前端-----小米商城模块练习

任务介绍:

效果图

代码

前端-----小米商城模块练习相关推荐

最新文章

热门文章