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

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

先完成如下区域的搭建

1、大大的背景图

• dom结构

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

• 样式

注意：

1. 使用background-image的方式填充背景，盒子需要有高度。不然会看不见
2. 使用background-position: center使图片居中显示
3. 使用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布局梭哈~，期待更新 

原图 ↓↓