admin管理员组

文章数量:1531410

运用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改变其样式属性

最后制作完成苹果官网首页

本文标签： 首页官网苹果简单html

版权声明：本文标题：运用HTML+CSS+JS简单制作苹果官网首页 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1725930357a1049746.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。