电商项目：仿小米官网纯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;/* 使其左侧框处于中心位置 等于视口宽度50% */right: 50%;    bottom: 60px;/* 因为left自动调整，则rigth移动663，left为保证等式成立 left要+663px */margin-right: -663px;
}

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

html制作小米官网代码,仿小米官网(html+js+css)
[实例简介] 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码 [实例截图] [核心代码] 小米官网(高仿) └── xiaomi ├── css_1 │ ├── financ ...
Web前端仿小米官网实战总结
Web前端仿小米官网实战总结自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...
仿小米官网源码，2021年9月最新版
部分源码: <div class="header"><div class="page-top"><div class=" ...
前端学习之仿小米官网HTML+CSS
一个简单的仿小米官网 index.css /* 主页index.html样式表 */ .topbar-wrapper{width: 100%;background-color:#333;height: ...
仿Apple官网首页 HTML+CSS+JS
WEB前端开发实践仿Apple官网首页 HTML+CSS+JS 一.前言静态页面,没有后端数据,只是单一的HTML 自写的APPLE.小米源码,严禁盗用二.图片资源这里用了一些iconfont ...
仿小米商城电脑官网-纯HTML+CSS（含轮播图）
来自作者的话这是我第一次写博客,也是为了激励自己学习,分享一些前端学习的知识,有写的不好的多多包涵.下面是参考的一些博客的链接 https://blog.csdn.net/weixin_439768 ...
前端700行代码项目练习--小米官网（仅html、css实现）
目录一.效果展示二.准备工具 1.css重置样式 2.awesome图标字体 3.各图片 4.title网站图标三.代码一.效果展示二.准备工具 1.css重置样式请自行查找,CSDN上一 ...
仿小米官网登录功能的实现
效果图如下: 首先我们需要搭建好页面布局 html的代码如下: <div class="contentrightbottom"><div class=&quo ...
小米官网——简单产品模块布局实现
注意: 标签都是有语义的,合理的地方用合理的标签.比如产品标题就用h,大量文字段落就用p margin和padding大部分情况下可以进行混用,两者各有优缺点,最好根据实际情况,采取简单的方法实现,比 ...

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

前言

正文

一.技术类型

二.运行环境

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

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

最新文章

热门文章

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

前言

正文

一.技术类型

二.运行环境

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

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

最新文章

热门文章

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