手把手带你写米课官网

人生没有白走的路，每一步都算数，大家好，我是小王，今天，手把手教你写一个米课官网原创不易，希望大家多多支持！需要源代码或者素材的评论区留言。大家记得关注我哦！我会不定期的跟大家分享文章。

一、主要内容
项目准备
导航
登录
主体
响应式

二、学习目标

三、项目准备

下载图片
下载iconfont
初始化css文件

四、导航部分
PC端：

iPad端：

移动端：

HTML部分：

CSS部分：

响应式布局：PC端

iPad端

移动端：

五、登录部分
效果如下：PC端

iPad端：

移动端：

HTML部分：

CSS部分：

六、新课速递
效果如下：PC端

iPad端

移动端

HTML部分：

CSS部分：

七、最热门课程
效果如下：PC端

iPad端

移动端

HTML部分：

CSS部分：

PC端：

iPad端：

移动端

八、热门标签

iPad端

移动端

HTML部分：

CSS部分：

PC端

JS代码如下：

//获取元素
var box = document.querySelectorAll('.new-box');
console.log(box);
var list = document.querySelectorAll('.circle>li');
console.log(list);function fun(index){// 拿到数组所有下标for(var i = 0; i < box.length; i++){// console.log(i);// 下标和index相等if(index === i){// 对应的div显示box[i].style.display = 'block';// 对应的li背景颜色变黄list[i].className = 'active-circle';}else{//其他div隐藏box[i].style.display = 'none';// 其他li背景颜色去掉list[i].className = '';}}
}

手把手带你写米课官网相关推荐

【NLP】Pyhon+讯飞开放平台:手把手带你写一个智能语音播报系统
手把手带你写一个智能语音播报系统. 微信扫码登陆讯飞开放平台:https://www.xfyun.cn/ 完成个人认证. 在控制台创建应用,注意应用名称全库查重,很容易跟别人重复. 可查看到pytho ...
手把手带你写一个JavaScript类型判断小工具
业务写了很多,依然不是前端大神,我相信这是很多'入坑'前端开发同学的迷茫之处,个人觉得前端职业发展是有路径可寻的,前期写业务是一个积累过程,后期提炼总结,比如编程思想,父子类的原型继承,还是对象之间的 ...
【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了
微信官网仿写效果 ↑ 移动端响应式效果 ↑ 微信官网首页,简约干净,能学习写好这个首页,就能掌握HTML网页设计前端盒子的布局.嵌套,及css效果的使用... 微信官网首页主要有以下几个需要关注的 ...
2017.10.11 米加特官网重磅改版，华丽上线
2017.10.11 米加特官网重磅改版,华丽上线热烈庆祝米加特地板制造有限公司新版官网于2017年10月21日华丽上线,敬告新老客户! 重要信息已全部更新,欢迎大家在线阅览及给我们提出宝贵意见.米 ...
手把手带你写一个中高级程序员必会的分布式RPC框架
一.概述什么是RPC? 远程服务调用官方:一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的思想通俗一点:客户端在不知道调用细节的情况下,调用存在于远程计算机上的某个对象,就像调 ...
我为什么要写FansUnion个人官网-BriefCMS-电子商务malling等系统
不少朋友一直关注我最近几个月,已经做的和正在做的项目,比如个人官网.BriefCMS.电子上午malling等系统. 但是呢,部分朋友比较好奇,为啥要去写.他们比较疑惑的是,市面上已经有很多类似的系统 ...
手把手教你安装虚拟机（官网下载VMware）
一.官网下载VMware 如果不想看下面的讲解,可以下载作者分享的百度网盘链接,作者下载的是15.5.7版本,Windows操作系统,如果自己的电脑是Linux系统,请看下面的讲解. 链接:https ...
（27）-- 用Bootstrap写的OPPO官网商城
#用Bootstrap写的OPPO官网商城首页 <!DOCTYPE html> <html lang="en"> <head> <meta ...
前端学完HTML+CSS 自己动手写出QQ官网导航栏
HTML+CSS实现QQ头部栏一.找到QQ官网界面在浏览器搜索QQ,找到QQ官网我们做的就是QQ官网的头部内容二.准备 (一).创建一个index.html文件编写html代码 (二).建一个 ...

手把手带你写米课官网

手把手带你写米课官网

手把手带你写米课官网相关推荐

最新文章

热门文章