大学生HTML期末大作业——HTML+CSS+JavaScript购物商城（宠物）

HTML+CSS+JS【购物商城】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

  • 💥 文章目录
  • 一、🏁 网站题目
  • 二、🚩 网站描述
  • 三、🎌 网站介绍
  • 四、🏴 网站效果
  • 五、🏳️ 网站代码
  • 六、🏳️‍🌈 如何学习进步
  • 七、🏴‍☠️ 更多干货

💥 文章目录

一、🏁 网站题目

💪💪💪 购物商场 宠物 24页 含登录注册

二、🚩 网站描述

🏅 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞(๑•̀ㅂ•́)و✧）

🥇 一套A+的网页应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
所有页面相互超链接，可到三级页面，有5-10个页面组成。
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
菜单美观、醒目，二级菜单可正常弹出与跳转。
要有JS特效，如定时切换和手动切换图片轮播。
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
页面清爽、美观、大方，不雷同。
不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、🎌 网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📃网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📜网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📄网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📰网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）🎥 html文件包含：其中index.html是首页、其他html为二级页面；
（2）📺 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📷 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等。

四、🏴 网站效果








五、🏳️ 网站代码

<!DOCTYPEhtml><html><head><meta charset="UTF-8"><meta name="author"content="order by dede58.com"/><title>北极熊商城-个人订单</title><link rel="stylesheet"type="text/css"href="./css/style.css"></head><body><!--start header--><header><divclass="top center"><divclass="left fl"><ul><li><a href="">北极熊商城</a></li><li>|</li><li><a href="">北极熊系统</a></li><li>|</li><li><a href="">北极熊聊</a></li><li>|</li><li><a href="">北极熊阅读</a></li><li>|</li><li><a href="">北极熊服务</a></li><li>|</li><li><a href="">北极熊商城移动版</a></li><li>|</li><li><a href="">问题反馈</a></li><li>|</li><li><a href="">Select Region</a></li><divclass="clear"></div></ul></div><divclass="right fr"><divclass="gouwuche fr"><a href="">我的订单</a></div><divclass="fr"><ul><li><a href="./login.html"target="_blank">登录</a></li><li>|</li><li><a href="./register.html"target="_blank">注册</a></li><li>|</li><li><a href="./self_info.html">个人中心</a></li></ul></div><divclass="clear"></div></div><divclass="clear"></div></div></header><!--end header--><!--start banner_x--><divclass="banner_x center"><a href="./index.html"target="_blank"><divclass="logo fl"></div></a><a href=""><divclass="ad_top fl"></div></a><divclass="nav fl"><ul><li><a href="./liebiao.html"target="_blank">北极熊狗狗</a></li><li><a href="">金毛</a></li><li><a href="">哈士奇</a></li><li><a href="">萨摩耶</a></li><li><a href="">阿拉斯加</a></li><li><a href="">拉布拉多</a></li><li><a href="">中华田园犬</a></li><li><a href="">更多</a></li><li><a href="">狗狗社区</a></li></ul></div><divclass="search fr"><form action=""method="post"><divclass="text fl"><input type="text"class="shuru"placeholder="灰桃阿拉斯加现货"></div><divclass="submit fl"><input type="submit"class="sousuo"value="搜索"/></div><divclass="clear"></div></form><divclass="clear"></div></div></div><!--end banner_x--><!--self_info--><divclass="grzxbj"><divclass="selfinfo center"><divclass="lfnav fl"><divclass="subddzx"><ul><li><a href=""style="color:#ff6700;font-weight:bold;">我的订单</a></li><li><a href="">意外保</a></li><li><a href="">团购订单</a></li><li><a href="">评价晒单</a></li></ul></div><divclass="subddzx"><ul><li><a href="./self_info.html">我的个人中心</a></li><li><a href="">消息通知</a></li><li><a href="">优惠券</a></li><li><a href="">收货地址</a></li></ul></div></div><divclass="rtcont fr"><divclass="ddzxbt">交易订单</div><divclass="ddxq"><divclass="ddspt fl"><img src="image/hjh_05.png"alt=""></div><divclass="ddbh fl">订单号:1705205643098724</div><divclass="ztxx fr"><ul><li>已发货</li><li>￥1800.00</li><li>2018/11/1713:30</li><li><a href="">订单详情></a></li><divclass="clear"></div></ul></div><divclass="clear"></div></div><divclass="ddxq"><divclass="ddspt fl"><img src="image/hjh_01.png"alt=""></div><divclass="ddbh fl">订单号:170526435444865</div><divclass="ztxx fr"><ul><li>已发货</li><li>￥9000.00</li><li>2018/11/1713:30</li><li><a href="">订单详情></a></li><divclass="clear"></div></ul></div><divclass="clear"></div></div></div><divclass="clear"></div></div></div><!--self_info--><footerclass="mt20 center"><divclass="mt20">北极熊商城|熊聊|北极熊天猫店|北极熊淘宝直营店|北极熊网盟|北极熊移动|隐私政策|Select Region</div><div>xiong.com 京ICP证xxxxxx号 京ICP备xxxxxx号 京网文[2018]0000-0001号</div><div>违法和不良信息举报电话：xxxxxxxxxx</div></footer></body></html>

六、🏳️‍🌈 如何学习进步

  1. 看书、看博客、学课程或者看视频等
  2. 模仿着书上或者博客的代码，进行复现，复现不重要，思考才是关键
  3. 思考学习别人思路后，脱离书本和博客，完全自己实现功能
  4. 自己实现一些 DEMO，看别人项目代码，与别人讨论，提升代码能力
  5. 在别人的框架和要求下，写代码实现业务
  6. 自己负责别人设计的模块的实现
  7. 独立设计业务模块并开发实现
  8. 负责大项目框架设计和拆分，带领别人进行开发
  9. 其他高阶的架构和管理工作，已经不仅仅是代码能力了

七、🏴‍☠️ 更多干货

🌝 关注我 学习更多知识~

🌝 支持我，请 点赞 + 好评 + 收藏 三连，带来更多文章~

🌝 有需要完整源码的同学可以留言、后台私信我（说明要什么主题模板）~

🌝 更多主题网页设计模板