运⽤HTML+CSS+JS简单制作苹果官⽹⾸页运⽤HTML+CSS+JS制作苹果官⽹⾸页
上次例会所留任务是⽤上HTML+CSS+JS做⼀个⽹页。内容⾃定。
我想的是做⼀个苹果官⽹⾸页的⽹页。
⼤概是这样的：
我所做的和它相差不多
不同主要表现在这⼏个⽅⾯:
1.点击进⼊⽹页，添加了宣传⽚的视频，并以苹果的logo作为背景填充
2.动画⽅⾯我加⼊了苹果logo的横向动态。
网页设计html代码大全苹果香蕉梨3.页⾯最下⽅加⼊了JS选项卡 参考苹果的各机型
遇到的问题
1.导航栏居中的问题：开始以为是⽂字居中就可以 但并不是，需要⽤到.shang ul{display: inline-flex;}
2.链接的样式设置：去除下划线.a{text-decoration:none}
3.如图：这是没有进⾏改动的，多个div不在同⼀⾏
添加这样⼀句代码：display:inline-block；后：
4.添加苹果logo动画：⼀开始添加的时候只设置了开始和结束时的代码，因为我想让他⽆序的动
.div1{
width: 50px;
height: 50px;
background-image:url("D:\htm/苹果logo.png");
position: relative;
animation: myfrist 50s infinite alternate;
background-size: 100%;
}
@keyframes myfrist{
0%{left: 0px;top: 0px;}
100%{left: 0px;top: 0px;}
}
但它是⼀动不动的，随后我设置了在⼀段过程中的位置变化：
.div1{
width: 50px;
height: 50px;
background-image:url("D:\htm/苹果logo.png");
position: relative;
animation: myfrist 50s infinite alternate;
background-size: 100%;
}
@keyframes myfrist{
0%{left: 0px;top: 0px;}
50%{left: 100%;top: 0px}
100%{left: 0px;top: 0px;}
}
5.运⽤JS做选项卡：JS我还没有看到这些部分，所以从菜鸟教程教程上了⼀个JS选项卡的实例，通过改动其⾥⾯的内容，做到我想要的。
6.添加苹果宣传⽚：⼀开始添加的时候只是单纯的添加了<vidio src="D:\htm/宣传⽚.mp4"></vidio>标签，然后显⽰不出来
随后加⼊了controls属性，让它具有了控制按钮
加⼊autoplay使其打开⽹页后⾃动播放
再通过CSS改变其样式属性
最后制作完成苹果官⽹⾸页

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。