电商项目：仿小米官网纯HTML+css布局

前言

时间过得很快，已经步入大三下学期了，浪了大学这几年，这几个星期从新把之前学的html+css系统性复习了一遍，虽然之前也学习过，但Monto觉得无论任何事情，基础是最重要的，任何框架千变万变，但唯独基础知识是不会改变的，作为一个web小白，要杜绝好高骛远，把根基打扎实才是最稳妥的，至少我是这么看来的，不知道屏幕前的读友您是怎么认为的？好了废话不多说了，整活。

正文

我打算分模块按系统功能写，即一篇文章阐述项目中一个模块，通过分析达到让已经熟悉相关技术的同学能清楚地贯穿项目流程，即使不熟悉的新手也能了解到相关知识点从而进行后续学习。本篇先采用html5和css编写一个大概框架，后期将使用js在在,jq,技术栈可能会用到vue，后端的话Mysql+springboot。

一.技术类型

主要技术栈
    本项目前端主要是由纯HTML和css搭建，比较简单的一个应用很适合小白练手

计划下期跟新将会使用vue进行编写

    后端采用SpringBoot + Mybatis + MySQL

二.运行环境

• 1.Maven(项目对象模型，可以通过一小段描述信息来管理项目的构建，报告和文档的项目管理工具软件
• 2.MySQL 8.0+版本（不支持8.0版本以下的）

三.商城界面 （类似小米官网）

1.商品导航栏以及商品列表

上方导航栏采用浮动属性进行定位，在标签上还设置了动画属性，显示商城二维码，以及其他商品，重点：用border标签写一个三角形，浮动定位方向设置，动画结合hover的运用

li:hover>.app::after{
content: '';
display: block;
border:8px solid transparent;
border-top:none;
width: 0;
height: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
border-bottom-color: rgb(248, 247, 247);
 }

 2.商品分类和轮播图

 重难点：左侧的列表框要写在上方li下 

3.商品细节图

重难点：运用postion属性进行定位 

4.右侧悬浮浮窗

 重难点：运用 position: fixed;将其固定定位，固定于视口位置，后计算整体宽度将其定位与列表旁边，下方为核心代码。

width+margin-left+margin-right+left+right=视口宽度

auto+0+26+639px + 50% =视口宽度

为满足等式只可设置margin-left和margin-right，但margin-left：-200px 是元素左移200px，而left又+200px，所以不会变化，只能设置margin-right，margin-right值越小则

left值越大。注意：margin-right 是影响他人的，自己本身不会变化，只是为了使等式满足。

.backto{
    width: 50px;
    height: 305px;
    background-color: rgb(248, 246, 246);
    position: fixed;
    
    right: 50%;    
    bottom: 60px;
    
    margin-right: -663px;
}