从0到1搭建小米商城首页

为了进一步巩固前端布局的基础知识，我准备做一个使用原生三剑客完成的一个小米商城首页。期间会记录遇到的一些小问题。

先完成如下区域的搭建

1、大大的背景图

dom结构

<!-- 顶部图片 -->
<div class="top_img">
</div>

样式

注意：

使用background-image的方式填充背景，盒子需要有高度。不然会看不见
使用background-position: center使图片居中显示
使用background-size: cover使图片等比放大覆盖div，可能会有部分会延伸出盒子

.top_img{height: 120px;width: 100%;background-image: url('../assets/pictures/top_bg.jpg');background-position: center;background-repeat: no-repeat;background-size: cover;
}

效果

后续是黑色的导航栏，准备使用flex布局梭哈~，期待更新

原图 ↓↓

从0到1搭建小米商城首页相关推荐

前端小米商城首页简易模仿
前端小米商城首页简易模仿 HTML部分 <!DOCTYPE html><html lang="en"><head><meta charse ...
如何从 0 到 1 搭建生鲜 B2B 的技术体系（B2B 技术共享第五篇）
宋小菜一直聚焦做中国生鲜的分销网络宋小菜从2014年年底创建,到今天为止,3年多的时间只做了一件事情,摸索到蔬菜供应链的上游,为什么宋小菜要把业务持续往"上"做了?做B2B业务, ...
微信小程序商城项目实战(第一篇:项目搭建与首页)
商城项目第一篇项目搭建项目结构编写整个项目中需要用到的功能 request.js 全局样式组件(搜索框) 首页代码编写效果图项目搭建后端接口:https://www.showdoc.c ...
Anaconda3+python3.7.10+TensorFlow2.3.0+PyQt5环境搭建
Anaconda3+python3.7.10+TensorFlow2.3.0+PyQt5环境搭建一.Anaconda 创建 python3.7环境 1.进入 C:\Users\用户名目录下,找到 ...
教你从0到1搭建秒杀系统-订单异步处理
前面几篇我们从限流角度,缓存角度来优化了用户下单的速度,减少了服务器和数据库的压力.这些处理对于一个秒杀系统都是非常重要的,并且效果立竿见影,那还有什么操作也能有立竿见影的效果呢?答案是下单的异步处理 ...
教你从0到1搭建秒杀系统-Canal快速入门（番外篇）
Canal用途很广,并且上手非常简单,小伙伴们在平时完成公司的需求时,很有可能会用到.本篇介绍一下数据库中间件Canal的使用. 很多时候为了缩短调用延时,我们会对部分接口数据加入了缓存.一旦这些数据 ...
教你从0到1搭建秒杀系统-缓存与数据库双写一致
本文是秒杀系统的第四篇,我们来讨论秒杀系统中缓存热点数据的问题,进一步延伸到数据库和缓存的双写一致性问题. 在秒杀实际的业务中,一定有很多需要做缓存的场景,比如售卖的商品,包括名称,详情等.访问量很大 ...
教你从0到1搭建秒杀系统-抢购接口隐藏与单用户限制频率
在前两篇文章的介绍下,我们完成了防止超卖商品和抢购接口的限流,已经能够防止大流量把我们的服务器直接搞炸,这篇文章中,我们要开始关心一些细节问题.对于稍微懂点电脑的,点击F12打开浏览器的控制台,就能在 ...
教你从0到1搭建秒杀系统-限流
本文是秒杀系统的第二篇,主要讲解接口限流措施.接口限流其实定义也非常广,接口限流本身也是系统安全防护的一种措施,在面临高并发的请购请求时,我们如果不对接口进行限流,可能会对后台系统造成极大的压力,尤其 ...
教你从0到1搭建秒杀系统-防超卖
各位读者好,最近笔者学了很多东西,其实都想跟大家进行分享,奈何需要将所学习的知识整理出来需要耗费大量的时间,包括总结,或各种图形以及写代码示例,所以可能更新的速度会比较慢.但大家放心,只要有时间我就会 ...

从0到1搭建小米商城首页

1、大大的背景图

从0到1搭建小米商城首页相关推荐

最新文章

热门文章