0
点赞
收藏
分享

微信扫一扫

手把手带你写米课官网

手把手带你写米课官网

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

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

二、学习目标
手把手带你写米课官网_html5

三、项目准备

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

手把手带你写米课官网_html_02

手把手带你写米课官网_css_03
手把手带你写米课官网_html5_04
四、导航部分
PC端:
手把手带你写米课官网_html_05
iPad端:
手把手带你写米课官网_html_06
移动端:
手把手带你写米课官网_css3_07
HTML部分:
手把手带你写米课官网_html5_08
CSS部分:

手把手带你写米课官网_html_09
手把手带你写米课官网_javascript_10
手把手带你写米课官网_html5_11

手把手带你写米课官网_html5_12

响应式布局:PC端

手把手带你写米课官网_css3_13
iPad端
手把手带你写米课官网_css3_14

移动端:
手把手带你写米课官网_css_15
五、登录部分
效果如下:PC端
手把手带你写米课官网_html_16
iPad端:
手把手带你写米课官网_javascript_17
移动端:
手把手带你写米课官网_javascript_18
HTML部分:
手把手带你写米课官网_css3_19
CSS部分:
手把手带你写米课官网_javascript_20
手把手带你写米课官网_css_21
六、新课速递
效果如下:PC端
手把手带你写米课官网_html_22
iPad端
手把手带你写米课官网_css3_23
移动端
手把手带你写米课官网_html5_24
HTML部分:
手把手带你写米课官网_css3_25
CSS部分:
手把手带你写米课官网_html5_26
手把手带你写米课官网_html_27
七、最热门课程
效果如下:PC端
手把手带你写米课官网_html_28
iPad端
手把手带你写米课官网_javascript_29
移动端
手把手带你写米课官网_html_30
HTML部分:
手把手带你写米课官网_css3_31
CSS部分:
手把手带你写米课官网_css_32
手把手带你写米课官网_javascript_33
PC端:
手把手带你写米课官网_css3_34
iPad端:
手把手带你写米课官网_html_35
移动端
手把手带你写米课官网_css3_36

八、热门标签
手把手带你写米课官网_html5_37
iPad端
手把手带你写米课官网_html5_38

移动端
手把手带你写米课官网_javascript_39
HTML部分:
手把手带你写米课官网_html_40
CSS部分:
手把手带你写米课官网_html_41
PC端
手把手带你写米课官网_html5_42
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 = '';
}
}
}


举报

相关推荐

0 条评论