不知不觉学习前端已经快4个月啦，之前没学JavaScript之前做的项目都只能看不能玩，小米官网这个页面算上写出的第一个相对完整一点的项目，虽然需要进步的地方还有很多，但是未来可期！

本篇博客主要是针对在书写这个项目时遇到的一些问题，找出对应的方法，记录一下自己在写这个项目时踩过的坑。

一、首页的制作

1.下载APP的制作

2.导航栏的制作

3.轮播图的制作

二、登录、注册页面的制作

1.盒子布局

2.复选框样式更改

三、页面跳转

一、首页的制作

首页的主要效果有如下几个：

下载APP、购物车的制作
两个导航栏的制作
轮播图的制作

当我们把布局大致完成后，就需要开始使用JavaScript处理细节了。

1.下载APP的制作

这里需要一个怎样的效果呢，当鼠标移动到下载app时，下载二维码出现，移出消失。这跟我们之前做的很多效果都一样，但他特别吗？他特别。特别就特别在这个出现和消失都有一个动画效果。那么小米原版到底为什么那么丝滑呢？在纠结到底使用display属性还是动画时，突然想到一个很巧妙的属性！我们可以变化这个盒子的高度，搭配过渡效果和overflow：hidden属性，让效果直接拉满。

但是这里会有一个坑在里面。上面这个小三角，我们可以使用边框来做，然后定位在这个盒子外面。如果我们将这个小三角以这个二维码盒子（.download）里面的话，我们定位的top值为负，即会超出盒子，一旦超出就会隐藏掉，所以我们只能把小三角放在外面，然后定位到盒子上方，再配合display属性，完成效果。描述起来可能不太直观，上代码！

html代码：

   <li id="download"><a href="#">下载APP</a><i></i><div class="download"><a href="#"><img src="./image/主页图片/xiaomi-android.png" alt="">小米商城APP</a></div></li>

css代码：（less版）

     li {float: left;padding:8px;padding-right: 0; a {display: block;height: 15px;text-align: center;padding-right: 8px;border-right:1px solid #423c37 ;font-size: 8px;color: #b0b0b0;&:hover {color: #fff;}} }#download {position: relative;width: 68px;i {display: none;position: absolute;top: 20px;left: 25px;width:0;height:0;border-color:  transparent transparent white transparent;// border-color:transparent #ccc transparent  transparent;border-style:solid;border-width:8px;z-index: 9;}.download {position: absolute;top: 16px;left: -28px;margin-top: 20px;width: 130px;height: 0;overflow: hidden;box-shadow: 0px 1px 5px #aaa;// border:1px solid #ccc;background-color: #fff;transition: height .3s;z-index: 999; a {font-size: 14px;color: #000;border: 0;&:hover {color: #000;}img{display: block;width: 100px;height: 100px;margin: 15px;} }}}

js代码：

  var APP = this.document.getElementById('download')var download = this.document.querySelector('.download');APP.addEventListener('mouseenter', function () {download.style.height = 160 + 'px';APP.children[1].style.display = 'block';});APP.addEventListener('mouseleave', function () {download.style.height = 0;APP.children[1].style.display = 'none';});

注：该代码并不是完整代码可能导致无法运行，仅供参考

购物车也是同理制作。

2.导航栏的制作

导航栏这个盒子我们也可以和上面一样，搭配高度完成，这个的主要点就是，当我们触摸上方的某一个导航栏，下面就会出现对应的商品栏，同时我们可以触摸这个商品栏里面的任何一个元素，而当鼠标移动到导航栏外面就会让商品栏消失。

看到这个效果我第一眼想的这不和tab栏切换一样么，把鼠标点击事件变成鼠标移入移出事件不就行了？但我属实还是想的太少，当鼠标移出导航栏想要去到商品栏时，商品栏会直接消失，那效果就是只能看不能摸。所以我们只能把商品栏写入对应的导航栏里面，就像这样。

对应的图：

接下来的事情就变得简单起来，改改样式，换换内容，把剩下的js代码补充上。

3.轮播图的制作

轮播图的方面，我们可以使用swiper插件直接编写。

网址：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

在效果演示中选择一套自己喜欢的模板套上去，修修改改，比自己写代码要省事不少呢！既然有这种能够加开发的插件，我们当然要用起来！

二、登录、注册页面的制作

这个页面我做的时候是将左边固定定位，右边margin值挤过去的，但是后来验收的时候发现布局其实不够简洁，我们可以直接左右布局，将左边的图片使用百分比布局就好。

1.盒子布局

这个页面的核心内容就是中间的盒子，因为注册登录页面写在同一个页面里，那么他们的局部应该如下图：

让两个盒子并排放置，当我们点击上面的登录/注册时，下面的盒子做动画切换效果。

2.复选框样式更改

有关复选框更改样式，在网上查看到的方法中，有一个方法让我大为震惊！那就是再书写一个盒子，盖在原有的复选框上面。

我当时看到这个方法是满脑子问号，但别说，真实有效。代码见下：

 #checkbox {width: 20px;height: 20px;display: inline-block;color: #ff6900;margin: 0;  font-size: 14px;}input[type=checkbox]{width: 20px;height: 20px;margin-top: 2px;position: relative;}input[type=checkbox]::after {position: absolute;top: 0;color: #000;width: 20px;height: 20px;display: inline-block;visibility: visible;padding-left: 0px;text-align: center;content: ' ';// border-radius: 3px;}input[type=checkbox]:checked::after {content: "✓";color: #fff;font-size: 10px;line-height: 20px;background-color: rgb(255, 105, 0)  ;}

三、页面跳转

到这里两个页面其实搭建的也差不多了，剩下的事情，就是把两个页面串起来。这时候我们就要用到BOM对象中的location属性了。（忘记的可以去前几篇博客查看相关用法哦~）。

当我们点击登录按钮会跳转到登录板块，点击注册会跳转到注册板块，但问题是登录注册是一个页面呀，所以我们这时候就要传递参数，判断我们到底点击了哪个按钮。

点击前：

点击后：

而中的?login就是我们传递过去的参数。我们将注册登录由a链接换成提交按钮(表单），当我们点击时，获取当前按钮的value值，并将这个值用变量存起来，在跳转时，将跳转地址和参数都传递过去，在注册页面获取刚传递过来的参数值，根据参数来进行操作。看代码！

html代码：

     <form action="#"><input type="submit" value="登录" name="login" id="indexDL"><input type="submit" value="注册" name="register"id="indexZC"></form>

index页面的js：

 var indexDL = this.document.getElementById('indexDL');var indexZC = this.document.getElementById('indexZC');var temp1 = null;var temp2 = null;indexDL.addEventListener('click', function () {temp1 = indexDL.name;var newurl = 'login.html';// window.location.href = newurl;// window.location.assign(newurl);window.event.returnValue = falsewindow.location.href = 'login.html' + '?' + temp1;//  console.log(temp1);});indexZC.addEventListener('click', function () {temp2 = indexZC.name;window.event.returnValue = false;window.location.href = 'login.html' + '?' + temp2;});

作用是传递参数。

login页面的js：

    var temp3  = window.location.search.substr(1);if(temp3 === 'register'){ZC.click();   }

作用是剪切字符串，并且判断是否为我们想要的参数。

总结：第一个html+css+JavaScript的完整案例，在写的时候痛苦满满，但是通过这个案例还是学到了不少新的知识点，最重要的一点就是要记得，使用浮动后一定要清除浮动！

第一个完整页面来啦~小米官网相关推荐

前端实战：仿写小米官网第一天
前端实战的第一天小米官网目前效果: 实现功能: 导航栏,首页切换,无淡入淡出效果的轮播图,搜索功能,产品展示栏下滑代码(便于记录,将js.css和html糅合在了一起): <!DOCTYP ...
实战小米官网静态页面1：导航栏部分
小米官网静态页面: 导航栏部分: 这里用id选择器,猫脸动画:class选择器(复习!) F12 导航栏分了左右两个部分: 下图18行少了个v,记得补上,是navCenter 设置好网页的边距图片原 ...
小米官网前端页面还原
小米官网前端页面还原网页效果图片 HTML css 初始化样式外部样式文件网页效果图片 HTML <!DOCTYPE html> <html lang="en&quo ...
哇~会动的页面来了！ -----小米官网
目录前言一.首页.登录页面整体布局 1. 首页布局 2. 登录页面布局二.页面具体效果实现分析 1. 首页head部分下拉列表经过下载 app时出现二维码 2. 首页 nav-head ...
仿照小米官网项目具体操作与细节
本项目已上传github 有需要的可以下载点这里前往下载小米官网项目具体操作 1.gulp的搭建一 , 打开node控制台命令行输入 cd 加文件夹路径进入当前文件夹命令行输入 cnpm ...
小米官网是不是用php开发的,小米官网抢手机排队功能，后台语言是什么
我猜这种后台编程语言处理并发量的能力一定很强! 回复内容: 我猜这种后台编程语言处理并发量的能力一定很强! 主要支撑的是Go. 详细参考:http://www.csdn.net/article/201 ...
HTML+CSS小米官网首页 (1页侧拉菜单)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
Web前端仿小米官网实战总结
Web前端仿小米官网实战总结自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...
小米官网项目制作——javascript知识分享上
目录前言一.整体架构二.弹出的盒子 1.定位盒子 2.弹出效果 3.其他细节三.下拉,展开的切换菜单 1.放置盒子 2.切换盒子 3.添加索引 4.侧边展开的盒子四.轮播图 1.本体的部件 ...

第一个完整页面来啦~小米官网

一、首页的制作

1.下载APP的制作

2.导航栏的制作

3.轮播图的制作

二、登录、注册页面的制作

1.盒子布局

2.复选框样式更改

三、页面跳转

第一个完整页面来啦~小米官网相关推荐

最新文章

热门文章