手把手带你一起写迅雷官网

手把手带你一起写迅雷官网

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

点我进群     一起学习交流!(群里有许多的学习资料,需要的直接下载就可以了)


QQ群:722384575

一、学习目标

项目准备
导航
轮播图
CSS3特效
Tab切换

二、项目准备
下载图片
下载iconfont
初始化css文件

手把手带你一起写迅雷官网_第1张图片
手把手带你一起写迅雷官网_第2张图片
手把手带你一起写迅雷官网_第3张图片
三、导航条部分
效果如下:
在这里插入图片描述
HTML部分:
手把手带你一起写迅雷官网_第4张图片

CSS部分:
手把手带你一起写迅雷官网_第5张图片
四、视频部分
效果如下:



HTML部分如下:
手把手带你一起写迅雷官网_第6张图片
CSS部分如下:
手把手带你一起写迅雷官网_第7张图片
手把手带你一起写迅雷官网_第8张图片
五、轮播图部分
效果如下:


手把手带你一起写迅雷官网_第9张图片
手把手带你一起写迅雷官网_第10张图片

HTML部分
手把手带你一起写迅雷官网_第11张图片
CSS部分

手把手带你一起写迅雷官网_第12张图片

手把手带你一起写迅雷官网_第13张图片
JavaScript部分:
手把手带你一起写迅雷官网_第14张图片

六、CSS3特效部分
效果如下:
手把手带你一起写迅雷官网_第15张图片

手把手带你一起写迅雷官网_第16张图片
手把手带你一起写迅雷官网_第17张图片
手把手带你一起写迅雷官网_第18张图片
七、TAB切换部分
效果如下:
手把手带你一起写迅雷官网_第19张图片

手把手带你一起写迅雷官网_第20张图片

手把手带你一起写迅雷官网_第21张图片JavaScript部分
手把手带你一起写迅雷官网_第22张图片

你可能感兴趣的:(【Web,practice】,html,html5,css3,javascript,css)