手把手带你写米课官网

最新推荐文章于 2024-04-17 00:40:24 发布

王同学要努力

最新推荐文章于 2024-04-17 00:40:24 发布

阅读量808

点赞数 2

分类专栏：【Web】文章标签： html html5 css3 css javascript

本文链接：https://blog.csdn.net/m0_46374969/article/details/115215554

版权

【Web】专栏收录该内容

28 篇文章 120 订阅

订阅专栏

手把手带你写米课官网

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

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

二、学习目标
在这里插入图片描述

三、项目准备

下载图片
下载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 = '';
        }
    }
}