运用HTML+CSS+JS制作苹果官网首页
上次例会所留任务是用上HTML+CSS+JS做一个网页。内容自定。
我想的是做一个苹果官网首页的网页。
大概是这样的:苹果官网首页
我所做的和它相差不多
不同主要表现在这几个方面:
1.点击进入网页,添加了宣传片的视频,并以苹果的logo作为背景填充
2.动画方面我加入了苹果logo的横向动态。
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改变其样式属性
最后制作完成苹果官网首页