web前端大作业（苹果网站网页设计模拟）.zip_web前端开发网页作业资源-CSDN文库

共12个文件

png：11个

md：1个

版权申诉

Web设计

网页设计

网页大作业

表白网页

个人博客

120 浏览量 2024-01-02 21:23:05 上传评论收藏 1.66MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

web前端大作业（苹果网站网页设计模拟）.zip （12个子文件）

项目源码

10.png 121KB

9.png 94KB

3.png 514KB

1.png 8KB

11.png 57KB

6.png 93KB

5.png 92KB

4.png 221KB

8.png 64KB

7.png 115KB

README.md 16KB

2.png 354KB

# web web前端大作业（苹果网站网页设计模拟）目录一、程序设计思路二、设计题目三、编程环境和工具四、功能实现五、结构设计六、代码调试七、运行效果八、存在问题九、实验总结一、程序设计思路在网络飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在网络应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便利，本课程的设计目的是通过实践使同学们经历网页制作的全过程。通过设计达到掌握网页设计、制作的技巧。为了熟练掌握WebStorm 软件的的操作和应用，了解和熟悉网页设计的基础知识和实现技巧。根据老师的要求，给出网页设计方案，利用合适图文素材设计制作符合要求的网页设计作品。二、设计题目苹果网站网页设计三、编程环境和工具 JetBrains WebStorm 软件以及QQ浏览器四、功能实现 1、页面布局 2、显示广告轮播 3、搜索框 4、侧边栏跳转 5、链接跳转五、结构设计 https://github.com/duchangchang/web/blob/main/1.png 六、代码调试首页代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #sy{ width: 1400px; height: 1200px; } .top1{ width: 1398px; height: 150px; background: url("../photo/p1.jpg"); } .top2{ width: 1398px; height: 50px; background-color: darkgrey; } .left{ width: 200px; height: 500px; background-color:lightslategrey; display: inline-block; margin-top: 20px; } .right{ width: 1090px; height: 490px; display: inline-block; margin-left: 10px; } img{ width: 1000px; height: 470px; margin-right: 0px; } .list{ list-style: none; position: relative; } .item{ position: absolute; } .item.active{ z-index: 10; } .shu{ list-style: none; position: relative; left: 450px; top: 400px; z-index: 1000; } .point{ width: 15px; height: 15px; background-color:gainsboro; border-radius: 100%; float: left; margin-right: 50px; border-style: solid; border-width: 1px; border-color: black; cursor: pointer; /*把鼠标变成小手*/ } .point.active { background-color: rgba(255, 255, 255, 0.2); z-index: 100; } .bottom1{ width: 1400px; height: 800px; margin-top: 20px; background-color: gainsboro; } .ph1,.ph2,.ph3,.ph4,.ph5,.ph6,.w1,.w2,.w3,.w4,.w5,.w6{ width: 350px; height: 250px; margin: 0px 20px 0px 50px; } .b1,.b2,.b3,.b4,.b5,.b6{ width: 400px; height: 400px; float: left; } .bottom2{ width: 1400px; height: 300px; background-color: gainsboro; font-size: 20px; font-style: inherit; } .kj1{ width: 290px; height: 300px; margin-left: 200px; background-color: darkgray; float: left; } .kj2,.kj3,.kj4{ width: 240px; height: 300px; background-color: darkgray; float: left; } .kj11{ margin-left: 40px; float: left; } .bottom3{ width: 1400px; height: 100px; background-color: lightgray; } .bt{ padding-top: 10px; margin-left: 10px; } .wz1{ width: 200px; height: 30px; padding-top: 10px; margin-left: 1100px; float: right; } .dhl{ height: 40px; padding-top: 5px; margin-left: 450px; } .dhl1{ width: 400px; height: 30px; } .dhl2{ width: 50px; height: 30px; } .fll{ width: 200px; height: 490px; background-color:lightslategrey; margin-top: 10px; } #fz1,#fz2,#fz3,#fz4,#fz5{ width: 200px; height: 50px; float: left; background-color: lightslategrey; } #fz1:hover{ background-color: dimgray; } #fz2:hover{ background-color: dimgray; } #fz3:hover{ background-color: dimgray; } #fz4:hover{ background-color: dimgray; } #fz5:hover{background-color: dimgray; } .fl{ margin-left: 10px; font-size: 30px; font-weight: 600; color: midnightblue; float: left; } .fl1,.fl2,.fl3,.fl4,.fl5{ margin-left: 25px; font-size: 20px; font-weight: 600; color: black; } </style> </head> <body> <div id="sy"> <div class="top1"> <div class="wz1"> <a href="../跳转页面/登录.html" >登录 </a>   | <a href="../跳转页面/注册.html">注册 </a>   | <a href="kf">客服 </a>   | <a href="gd">更多</a>    </div> </div> <div class="top2"> <div class="dhl"> <input class="dhl1" type="text" placeholder="请输入"> <input class="dhl2" type="submit" value="搜索"> </div> </div> <div class="left"> <div class="fll"> <div id="fz"><P class="fl">全部商品分类</P></div> <div id="fz1"><P class="fl1">Mac              ></P></div> <div id="fz2"><P class="fl2">iPad              ></P></div> <div id="fz3"><P class="fl3">Watch          ></P></div> <div id="fz4"><P class="fl4">iphone         ></P></div> <div id="fz5"><P class="fl5">配件              ></P></div> </div> </div> <div class="right"> <ul class="shu"> <li class="point active" data-index= '0'></li> <li class="point" data-index= '1'></li> <li class="point" data-index= '2'></li> <li class="point" data-index= '3'></li> </ul> <ul class="list"> <li class="item active"><img src="../photo/p2.jpg"></li> <li class="item"><img src="../photo/p3.jpg"></li> <li class="item"><img src="../photo/p5.jpg"></li> <li class="item"><img src="../photo/p6.jpg"></li> </ul> </div> <div class="bottom1"> <div class="b1"> <img class="ph1" src="../photo/p4.jpg"> <div class="w1"> <h2>iPad Pro</h2> <h4>你的下一台电脑，何必是电脑</h4> <a href="../跳转页面/Mac.html">进一步了解</a>   <a href="iPad.html">购买</a> </div> </div> <div class="b2"> <img class="ph2" src="../photo/p7.jpg"> <div class="w2"> <h2>iPad Pro</h2> <h4>你的下一台电脑，何必是电脑</h4> <a href="../跳转页面/iPad

评论收藏

内容反馈

版权申诉