仿写小米官网右边工具导航栏

说明：

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

目标：仿写小米官网的右侧工具导航栏：

HTML元素：

<div class="tool-bar"><ul><li class="open-box"><a href="#"><img src="./img/tool-bar-img/1s.png" class="static"><img src="./img/tool-bar-img/1h.png" class="hover"><span>手机APP</span><div class="app-download" ><img src="./img/tool-bar-img/downapp.png"><span>扫码领取新人百元红包</span></div></a> </li><li><a href="#"><img src="./img/tool-bar-img/2s.png" class="static"><img src="./img/tool-bar-img/2h.png" class="hover"><span>个人中心</span></a>    </li><li><a href="#"><img src="./img/tool-bar-img/3s.png" class="static"><img src="./img/tool-bar-img/3h.png" class="hover"><span>售后服务</span></a></li><li><a href="#"><img src="./img/tool-bar-img/4s.png" class="static"><img src="./img/tool-bar-img/4h.png" class="hover"><span>人工客服</span></a>  </li><li><a href="#"><img src="./img/tool-bar-img/5s.png" class="static"><img src="./img/tool-bar-img/5h.png" class="hover"><span>购物车</span></a> </li></ul></div>

CSS样式：
代码实现：

/* 首页右侧工具栏 */.tool-bar{width: 84px;height: 460px;position: fixed;bottom: 70px;right: 0;z-index: 999;background-color: white;}.tool-bar span{color: #9c9c9c;}.tool-bar ul{width: 100%;height: 100%;}.tool-bar li{width: 100%;height: 90px;border: 1px solid #f5f5f5;border-right: none;}.tool-bar li:hover span{color: #FF6A00;}.tool-bar li:hover .static{display: none;}.tool-bar li:hover .hover{display: block;}.tool-bar li img{width: 30px;height: 30px;margin-left: 27px;margin-top: 18px;}.tool-bar li .hover{display: none;}.tool-bar li span{display: inline-block;width: 100%;height: 14px;font-size: 14px;text-align: center;}.open-box::before{display: none;content: '';border: 8px solid transparent;border-left-color: white;position: absolute;left: -10px;top: 50%;}.open-box{    position: relative;}.open-box .app-download{display: none;position: absolute;z-index: 999;background-color: white;right: 94px; padding: 14px;width: 100px;height: 161px;top: 0;}.open-box .app-download img{display: block;width: 100px;height: 100px;margin: 6px auto;}.open-box .app-download span{display: inline-block;width: 80px;margin-left: 10px;   }.open-box:hover::before{display: block;}.open-box:hover .app-download span{color: #9c9c9c;}.open-box:hover .app-download{display: block;}

仿写小米官网右边工具导航栏相关推荐

仿写小米官网简单的HTML+CSS练习
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
前端实战：仿写小米官网第一天
前端实战的第一天小米官网目前效果: 实现功能: 导航栏,首页切换,无淡入淡出效果的轮播图,搜索功能,产品展示栏下滑代码(便于记录,将js.css和html糅合在了一起): <!DOCTYP ...
仿写小米官网（登录、注册页面、首页、详情页、购物车）
功能介绍各网页公用功能返回顶部调用jquery的方法实现效果,页面滚动超过任意位置时右侧出现返回顶部按钮,点击后平滑返回顶部注册用户需要填写手机号.昵称.密码且勾选同意协议,如果是合法数据且 ...
小米官网竖直导航栏html,演示：小米首页纵向导航栏特效(上)
课程目标: 本季课程引入了CSS3众多功能中的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果.整合 HTML5 & CSS3,有的是网站开发中常用的.实用的功能,有的是先进的 We ...
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.这个练习会 ...
实战小米官网静态页面1：导航栏部分
小米官网静态页面: 导航栏部分: 这里用id选择器,猫脸动画:class选择器(复习!) F12 导航栏分了左右两个部分: 下图18行少了个v,记得补上,是navCenter 设置好网页的边距图片原 ...

仿写小米官网右边工具导航栏

仿写小米官网右边工具导航栏相关推荐

最新文章

热门文章

仿写小米官网 右边工具导航栏

仿写小米官网 右边工具导航栏相关推荐

最新文章

热门文章

仿写小米官网右边工具导航栏

仿写小米官网右边工具导航栏相关推荐