仿写小米官网简单的HTML+CSS练习

说明：

1.由于本人只学习了部分html和css，所以本文没有涉及到js部分。
2.本文并没有实现小米官网首页的全部功能，还存在很多问题。如果以后技能提升，会继续更新实现未完成的功能。
3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码，如果发现问题或者有更好的方法请联系本人探讨更正。

目标：仿写小米官网的部分首页，小米官方首页如下图：

总体分析：观察小米官网的整体结构，发现整体框架如下：

注意：
1.产品导航栏在网页中只在中间部分区域显示内容，但设计布局占整个宽度。
2.中间部分轮播图大小占中间部分整体区域（包括左边导航栏部分）。
3.中间部分旁边的空白区域宽度相等，初步想法用 margin-auto 实现。
4.图中未画出部分为右边的工具导航栏，这部分固定在页面右侧，在首页中位置固定。

根据上述分析，将整个页面分为几部分来完成（我将会在后面的文章中逐步介绍）：
1.顶部导航栏见博文《仿写小米网站首页顶部导航栏部分》
2.产品导航栏见博文
《仿写小米网站首页产品导航栏》
3.中间部分见博文
《仿写小米网站首页中间部分》
4.底部见博文
《仿写小米网站首页底部》
5.右边工具导航栏
《仿写小米网站首页右边工具导航栏》
完成后效果如下图：

仿写小米官网简单的HTML+CSS练习相关推荐

仿写小米官网右边工具导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
前端实战：仿写小米官网第一天
前端实战的第一天小米官网目前效果: 实现功能: 导航栏,首页切换,无淡入淡出效果的轮播图,搜索功能,产品展示栏下滑代码(便于记录,将js.css和html糅合在了一起): <!DOCTYP ...
仿写小米官网（登录、注册页面、首页、详情页、购物车）
功能介绍各网页公用功能返回顶部调用jquery的方法实现效果,页面滚动超过任意位置时右侧出现返回顶部按钮,点击后平滑返回顶部注册用户需要填写手机号.昵称.密码且勾选同意协议,如果是合法数据且 ...
小米官网——简单产品模块布局实现
注意: 标签都是有语义的,合理的地方用合理的标签.比如产品标题就用h,大量文字段落就用p margin和padding大部分情况下可以进行混用,两者各有优缺点,最好根据实际情况,采取简单的方法实现,比 ...
小米官网首屏纯css代码
小米官网首屏代码(纯CSS编写) ** 1.html部分: ** 小米商城  <div class="top-bar w"> ...
html+css仿写NIKE官网静态页面
第一次较完整的网页,没有动画,纯静态,没有调式各种窗口大小,谷歌浏览器缩放90%为正常比例部分效果图 html <!DOCTYPE html> <html lang="e ...
仿写小米网站首页顶部导航栏部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
仿写小米网站首页中间部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
仿写小米网站首页产品导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...

仿写小米官网简单的HTML+CSS练习

仿写小米官网简单的HTML+CSS练习相关推荐

最新文章

热门文章

仿写小米官网 简单的HTML+CSS练习

仿写小米官网 简单的HTML+CSS练习相关推荐

最新文章

热门文章

仿写小米官网简单的HTML+CSS练习

仿写小米官网简单的HTML+CSS练习相关推荐