# 小米商城首页静态网页

**Repository Path**: Seven703/xiaomi-static

## Basic Information

- **Project Name**: 小米商城首页静态网页
- **Description**: 小米商城首页布局
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-01
- **Last Updated**: 2023-08-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 小米商城首页项目实战

## 1.项目简介

在上一个项目中，重新复习和巩固了基本Html、css、JavaScript基本三件套。并且熟悉了布局模式。现在通过实战小米商城较为复杂的网页布局开发，以及动态效果实现，将提升自身能力，为接下来更深层的阶段实战，奠定更加的能力以及解决方案。

## 2.项目git地址

> https://gitee.com/Seven703/xiaomi-static.git

## 4.效果实现的在线地址

> http://120.26.85.235:5050/

## 5.项目经历

### 第一天--完成基本头部布局

完成头部布局，以及导航栏静态列表，实现效果如下：
![输入图片说明](%E5%B1%95%E7%A4%BA%E5%9B%BE%E7%89%87/xiaomi1.png)

### 遇到的问题

1.列表排版错误，展示效果混乱，解决方式：通过对div结构分层，将其细分至各个模块中，用flort浮动、定位方式进行头部布局，来解决列表排版问题。

2.字体图标问题，小米商城使用了图标字体，需从iconfont字体图标库中，引用需要使用的图标，使用图标时，容易导致使用图标样式错误，引入方式错误，从而导致字体图标显示错误，解决方式：通过细读文档，将合适的字体文件引入，从而来解决字体图标的问题。

### 第二天--完成banner轮播图以及下拉列表和广告区域的实现

实现的效果如下：
![输入图片说明](%E5%B1%95%E7%A4%BA%E5%9B%BE%E7%89%87/xiaomi2.png)

### 遇到的问题

1.轮播图使用swiper插件，使用插件时出现图片大小宽度不适应，无法适应项目版心的内容，解决方式：单独将swiper插件内容放置到banner模块中，并且将banner类设定固定的版心大小，来解决swiper插件宽度大小不正确的问题。

2.在下拉展示列表中，当鼠标移动到列表中时，将会实现下拉展示，但鼠标移动到下拉列表上时，下拉列表无法正常显示，问题原因：没有给下来列表绑定对应的鼠标onmouseover事件，从而导致无法正常的显示出下拉列表，解决方式：为下拉列表也添加一个onmouseover事件，当事件发生时，将下拉列表的display属性从’none’值改为’block’值，即可解决。

3.轮播图左侧展示列表，内容排版无法正确显示问题，解决方式：通过给父级元素设定宽度，当子元素设置flort浮动时，将会自动将内容排版按照垂直排列。

### 第三天--完成商品列表页切换以及功能优化

实现的效果如下：
![输入图片说明](%E5%B1%95%E7%A4%BA%E5%9B%BE%E7%89%87/xiaomi3.png)

### 遇到的问题

1.切换效果问题：当鼠标移动到“穿戴”页面上时，将列表切换到穿戴列表。具体实现方式：定义一个全新的“穿戴”模块，默认为隐藏，通过js标签选择器获得“耳机”以及“穿戴”，出现的问题为：当鼠标移动到“穿戴”上时，列表没有发生变化，但是将上一个相同模块的商品展示列表的display属性修改成'none'，原因为：js标签选择器在选择对应目标时，没有选择到，选到了上一级的标签，正确将标签选择器修改后即可解决该问题。

## 第四天--完成整体布局、固定菜单以及小细节优化

实现的效果如下：
![输入图片说明](%E5%B1%95%E7%A4%BA%E5%9B%BE%E7%89%87/xiaomi4.png)

### 此模块遇到的问题较少，容易解决，至此已完成小米商城静态页面布局。

## 6.项目总结

通过本次对小米商城网页布局和实现，对较为复杂的页面布局有了更深层次的理解以及运用，并且在解决的问题中，也发现了自己的在阅读文档时，没有注意细节，容易导致一些简单的错误，需要在不断的练习实践中更加的完善。

## 7.实现效果
![输入图片说明](%E5%B1%95%E7%A4%BA%E5%9B%BE%E7%89%87/xioami5.png)
![输入图片说明](%E5%B1%95%E7%A4%BA%E5%9B%BE%E7%89%87/xiaomi6.png)
![输入图片说明](%E5%B1%95%E7%A4%BA%E5%9B%BE%E7%89%87/xiaomi7.png)