折磨我一个周的小米官网——小米侧边栏
目录
前言
小米官网侧边栏
效果展示
html结构代码
样式代码
JS代码解析
总结
前言
小编历时一个星期的艰苦奋斗,终于在第七天的末尾结束了小米官网的折磨。这段时间是真的难熬。当然小编也对JavaScript的用法以及理解层度,有了一定的提高。庞大的收获总是伴随着艰苦的学习过程,当你度过了艰苦的学习过程,你的收获一定大于你的付出。
小米官网侧边栏
效果展示
小米侧边栏
- 鼠标经过导航栏,导航栏会进行字体/背景颜色变换,左边页面显示
- 鼠标经过不同的导航栏,左边页面会弹出不同的页面进行切换
- 鼠标离开导航栏,左边页面会进行隐藏
html结构代码
<div class="banner-nav"><li><a href="JavaScript:;">手机</a></li><li><a href="JavaScript:;">电视</a></li><li><a href="JavaScript:;">笔记本</a> <a href="JavaScript:;">平板</a></li><li><a href="JavaScript:;">家电</a></li><li><a href="JavaScript:;">出行</a> <a href="JavaScript:;">穿戴</a></li><li><a href="JavaScript:;">智能</a> <a href="JavaScript:;">路由器</a></li><li><a href="JavaScript:;">电源</a> <a href="JavaScript:;">配件</a></li><li><a href="JavaScript:;">健康</a> <a href="JavaScript:;">儿童</a></li><li><a href="JavaScript:;">耳机</a> <a href="JavaScript:;">音响</a></li><li><a href="JavaScript:;">生活</a> <a href="JavaScript:;">箱包</a></li></div>
大家可以根据自己喜欢的方式来布局,不一定要和我这个一样,这个是导航栏的布局。相信这个对大家来说还是很简单的。
左边出现那个盒子的代码结构代码就很多了,小编我给大家说一下我自己的一个思路好了。大家可以自己去试一下。
小编我是把左边那个盒子利用绝对定位进行定位到导航栏的左边的,我设置了一个高度和导航栏一样高度的盒子。因为要做不同的页面所以我在里面再次放了很多个盒子,每个盒子里面的内容都是不一样的,但是他们的样式都是相同的,他们里面内容的结构都是一样的。与其说切换的是内容不如说是切换的是盒子。里面每个盒子的结构是这样的,我在盒子里面又放了四个盒子,给四个盒子设置浮动让他们并排显示,当然他们的宽度是父盒子的四分之一,高度肯定是和父盒子一样高,然后在给四个盒子里面都放上li标签,每个盒子放六个小li,最后在加上你们需要的内容就可以了。
样式代码
.main .banner-nav {float: left;width: 234px;height: 100%;padding-top: 10px;background-color: rgba(63, 61, 61);
}
.main .banner-nav li {width: 100%;height: 42px;line-height: 42px;padding: 4px 0 4px 20px;position: relative;
}
.main .banner-nav li a {color: #fff;font-size: 14px;text-decoration: none;
}
.main .banner-nav li::after {position: absolute;right: 20px;top: 14px;content: '';display: inline-block;width: 10px;height: 10px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);
}
.main .banner-nav li:hover {background-color: rgba(255, 106, 0);
}
JS代码解析
var bannernav = document.querySelector('.banner-nav');var bannernavlis = bannernav.querySelectorAll('li');var bannerbox = document.querySelector('.banner-box');var childbox = bannerbox.querySelectorAll('.childbox');for (var j = 0; j < bannernavlis.length; j++) {bannernavlis[j].setAttribute('index', j);bannernavlis[j].addEventListener('mouseenter', function() {var index = this.getAttribute('index');bannerbox.style.display = 'block';for (var i = 0; i < childbox.length; i++) {childbox[i].style.display = 'none';}childbox[index].style.display = 'block';});bannernavlis[j].addEventListener('mouseleave', function() {bannerbox.addEventListener('mouseenter', function() {bannerbox.style.display = 'block';});bannerbox.addEventListener('mouseleave', function() {bannerbox.style.display = 'none';});bannerbox.style.display = 'none';});}
总结
在辛苦的同时总是伴随着意想不到的收获,再多的困难努力克服之后都将成为你以后成功的经验。努力的付出都会给你等同或者超越你付出的收获。大家一起努力啊!
折磨我一个周的小米官网——小米侧边栏相关推荐
- jQuery的小米官网-----侧边导航栏
目录 前言 1.原生js和jQuery优势对比 1.1.原生JavaScript优点 1.2.jQuery优点 2.侧边栏代码展示 2.1. 原生js代码 2.2.jQuery代码 总结 前言 时隔多 ...
- ##HTML做小米官网,好复杂,以后用框架写一个简单的
小米官网<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...
- 小米官网静态网页练习记录
本次练习是在完成京东网页的独自完成,来达到提升熟练度的目的. 完成效果图 总结 (1)logo:在logo处不只是放图片,还外加文字通过检索权重 .header-b .logo::before{ co ...
- 仿照小米官网项目具体操作与细节
本项目已上传github 有需要的可以下载 点这里前往下载 小米官网项目具体操作 1.gulp的搭建 一 , 打开node控制台 命令行输入 cd 加文件夹路径 进入当前文件夹 命令行输入 cnpm ...
- 第一个完整页面来啦~小米官网
不知不觉学习前端已经快4个月啦,之前没学JavaScript之前做的项目都只能看不能玩,小米官网这个页面算上写出的第一个相对完整一点的项目,虽然需要进步的地方还有很多,但是未来可期! 本篇博客主要是针 ...
- 花季美少女和小米官网你选哪个?
前言 花季少女和小米官网你选哪个?只有小孩子才做选择,你当然都会拥有!我们今天就看看花季美少女是怎么用jQuery写小米官网的,看看女孩子的思维和男孩子有什么不一样!css的东西我这里就不多说啦,时间 ...
- Outline,Input样式的设置,小米官网搜索框
在做小米项目右上角的搜索框的时候,发现了该问题,现总结如下: outline outline和border类似,只不过outline不占用空间,而border占用空间 #box1{width: 300 ...
- 小米官网首屏纯css代码
小米官网首屏代码(纯CSS编写) ** 1.html部分: ** 小米商城 <!-- bar的内部容器--> <div class="top-bar w"> ...
- 小米官网详情页头部固定效果
最近研究小米官网一些基础css特效实现效果,通过研究别人的代码,自己也学到了很多,下面介绍下小米官网详情页页面头部固定效果 页面滑动时候,顶部购买一栏会缓慢固定在头部,有类似动画效果,主要应用的是cs ...
最新文章
- FSBL UBOOT KERNELROOTFS 启动流程详解 (未完待续)
- 刚开始学python,写的几个小脚本
- 测试晶面间距软件_超逼真动图解析常用15大分析测试仪器,必收藏!SEM, 红外,紫外,核磁,质谱,TEM,ICP等...
- Python文本处理几种方法
- leetcode 39. Combination Sum | 39. 组合总和(Java)
- python编写程序接收字符串_Python字符串操作
- <load-on-startup>1</load-on-startup>的作用
- 黑马程序员_Java集合框架
- 数据集准备及数据预处理_数据理解和准备–数据集的基础工作
- 成都睿铂 | 落差区域无人机倾斜摄影航线的规划要点
- oracle的查询数据(检索数据)
- lvs-rrd 监控LVS
- virtuozo空三加密_VirtuoZoAAT空三加密中的应用技巧
- 《软件项目管理》课程知识总结
- 赤峰中考计算机考试软件,2017年内蒙古赤峰中考信息技术操作考试实施细则
- geopandas下载问题
- Financial crime in times of Covid-19 – AML and cyber resilience measures 整理
- 等额本息贷款的提取还款计算 之 月供不变计算方法
- mac环境下搭建frida环境并连接网易mumu模拟器
- 华为云mysql认证ssl_华为云SSL证书