web大作业
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Web前端实验
题目：大作业
班级：计G191
学号：2019322027
姓名：刘祎
指导教师：温春水
信息工程学院
1.程序设计思路
这次主要是想做一个类似于苹果得页面，所以参考了苹果官网，在苹果官网得基础上增加了小米商城得一些思路，以及加入了轮播图，侧边栏等功能。这次主要以”块”的方式实现布局，通过把每一部分进行定位，先用一个大的div把所有div装起来，然后每部分用小div实现定位，用相对布局和绝对布局实现对侧边栏，轮播图和其他图片的准确定位。以及对每个按钮进行超链接化，方便加入新的网站和元素。由于是参考苹果官网，所以也保留了简洁，没有过多的元素，使页面看起来更加扁平化
2.功能实现
网站实现了每个按钮的超链接化，进行跳转。网站也加入了鼠标悬停高亮显示。侧边栏部分加入了客服，购物车等内容，也加入了轮播图展示功能，用户可在后台自定义4张较宽图片用于展示，后期也可以对接数据库使图片在线随时更换。
3.代码调试
重要代码
对整个页面进行清除边距操作
*
{
margin: 0px;
padding: 0px;
list-style: none;
}
轮播图的移动
@keyframes
img1{
0%{
left: 0px;
}
25%{
left: -1230px;
}
50%{
left: -2460px;
}
75%{
left: -3690px;
}
100%{
left: 0px;
}
鼠标悬停高亮效果
.menu
a:hover{
color: white;
}
全部代码
html>