当前位置:首页 » 《我的小黑屋》 » 正文

Web大学生网页作业成品——在线购物商城网页设计与实现(HTML+CSS+JS)(4个页面)

1 人参与  2024年12月15日 18:00  分类 : 《我的小黑屋》  评论

点击全文阅读


??? 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,画面精明,排版整洁,内容丰富,主题鲜明,非常适合初学者学习使用。???

文章目录

一、作品介绍 ?二、作品演示 ☁️三、代码目录 ?四、网站代码 ?HTML部分代码 五、如何学习网页制作 ❤️六、源码获取 ?


一、作品介绍 ?

?️本套采用HTML+CSS,使用Javacsript代码实现图片轮播切换,共有4个页面

二、作品演示 ☁️

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录 ?

在这里插入图片描述

四、网站代码 ?

HTML部分代码

<div class="header"><div class="ww"><div class="logo">在线购物商城</div><div class="search"><input type="text" placeholder="请输入要搜索的商品..."><button>搜索</button></div></div></div><div class="nav"><div class="ww"><ul><li class="ac"><a href="index.html">首页</a></li><li><a href="goods.html">商品列表</a></li><li><a href="business.html">热门商家</a></li><li><a href="login.html">我要登录</a></li></ul></div></div><div class="imgs"><img src="./images/img1.jpg" alt=""><img src="./images/img2.png" alt="" class="hide"></div><div class="main"><div class="ww"><div class="main_item"><div class="item_tit">新品推荐</div><div class="item_list"><div class="item_one"><div class="item_img"><img src="./images/p1.jpg" alt=""></div><div class="item_name">Apple iPhone14  Pro Max(A2896) 全网通5G手机【晒单赠移动电源】</div><div class="item_price">¥9249.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p2.jpg" alt=""></div><div class="item_name">三星(SAMSUNG)S23 系列手机</div><div class="item_price">¥3241.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p3.jpg" alt=""></div><div class="item_name">索尼(SONY)PlayStation VR2 PS5专用 虚拟现实头盔头戴式设备</div><div class="item_price">¥2249.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p4.jpg" alt=""></div><div class="item_name">戴尔(Dell)灵越5430 14英寸 2.5K轻薄笔记本电脑(银色)</div><div class="item_price">¥4249.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p5.jpg" alt=""></div><div class="item_name">松下(Panasonic)家用全自动意式咖啡机NC-EA801HSQ(灰色)</div><div class="item_price">¥4999.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p6.jpg" alt=""></div><div class="item_name">九阳(Joyoung)家用多功能高速破壁机L18-P771(黑+银)</div><div class="item_price">¥1799.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p7.jpg" alt=""></div><div class="item_name">产地日本 进口日立 (HITACHI)615升 六门冰箱 R-WX650KC(XW)(水晶白)</div><div class="item_price">¥29249.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p8.jpg" alt=""></div><div class="item_name">格力(GREE)冷静王 1匹 变频空调 26GW/(26549)FNhAc-B1(WIFI)(皓雪白)</div><div class="item_price">¥3799.00</div></div></div></div><div class="main_item"><div class="item_tit">热销榜单</div><div class="item_list"><div class="item_one"><div class="item_img"><img src="./images/p9.jpg" alt=""></div><div class="item_name">华为(HUAWEI)Mate50 RS 保时捷设计 12+512G 鸿蒙旗舰手机</div><div class="item_price">¥12699.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p10.jpg" alt=""></div><div class="item_name">微软(Microsoft)Xbox Series X 游戏机(国行版)</div><div class="item_price">¥4399.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p11.jpg" alt=""></div><div class="item_name">Apple MacBook Pro 16英寸笔记本 【2023款】</div><div class="item_price">¥19249.00</div></div><div class="item_one"><div class="item_img"><img src="./images/p12.jpg" alt=""></div><div class="item_name">索尼(SONY)65英寸 QD-OLED 安卓智能电视 XR-65A95K(石板黑)</div><div class="item_price">¥23999.00</div></div></div></div></div></div>

五、如何学习网页制作 ❤️

?很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深印象,不知道如何提升自己,可以去看一些视频教程,跟着视频一起学习代码,切记一定要自己手动敲一遍代码,不然就算当时看视频学会也会很容易忘记。

六、源码获取 ?

?1、 ~ 关注我,点赞博文~ 每天带你涨知识!
?2、看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
?3、源码获取公众号,点点下方公众号进行获取吧! 网页搜索编号:E0037
在这里插入图片描述


点击全文阅读


本文链接:http://zhangshiyu.com/post/201736.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1