当前位置: 首页 > news >正文

大学生HTML期末大作业——HTML+CSS+JavaScript购物商城(草莓) - 指南

大学生HTML期末大作业——HTML+CSS+JavaScript购物商城(草莓) - 指南

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

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

文章目录

一、 网站题目

购物商城 草莓 移动端1 14页 含JQ

二、 网站描述

总结了一些学生网页制作的经验:一般的网页必须融入以下知识点: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编辑软件进行运行及修改编辑等操控)。
其中:
首页、其他html为二级页面;就是(1) html记录包含:其中index.html
(2) css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3) js文件包含:js搭建动态轮播特效, 表单提交, 点击事件等等。

四、 网站效果

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

五、️ 网站代码

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title></title><link rel="stylesheet" href="css/style.css" /><link rel="stylesheet" href="css/article.css" /><link rel="stylesheet" href="css/swiper-bundle.min.css" /><style>/* 轮播样式 */.swiper-container {width: 100%;height: 100%;--swiper-navigation-color: #D9D4D3;/* 单独设置按钮颜色 */}.banner-img{width:100%;height:16rem;}.swiper-button-prev {left: 2rem;}.swiper-button-next {right: 2rem;}</style></head><body><!-- 头部 --><div class="head"><!-- 头部-logo --><div class="first-logo"><div class="logo"><img src="./img/logo.png" /></div><div class="conn-mobile"><div>莓农园-长丰草莓批发采购</div><div>联系电话:<span>xxxxxxxxxxx</span></div></div><!-- 导航button按钮 --><div class="navbtn"><img src="img/navbtn.png" /></div></div><!-- 头部-菜单 --><div class="menu"><ul><li><a href="product.html">产品中心</a></li><li><a href="index2.html">首页</a></li><li class="active"><a href="article.html">关于我们</a></li><li><a href="pifa.html">草莓批发</a></li><li><a href="retail.html">零售采购</a></li><li><a href="list.html">加盟代理</a></li><li><a href="price.html">草莓采购</a></li><li><a href="zhishi.html">草莓知识</a></li></ul></div><div class="product-menu"><ul><li><div>红颜草莓</div><ul><li>大果</li><li>中果</li><li>小果</li></ul></li><li><div>红颜草莓</div><ul><li>大果</li><li>中果</li><li>小果</li></ul></li><li><div>红颜草莓</div><ul><li>大果</li><li>中果</li><li>小果</li></ul></li><li><div>红颜草莓</div><ul><li>大果</li><li>中果</li><li>小果</li></ul></li></ul></div><!-- 头部-轮播图 --><div class="swiper-container" id="swiper-banner"><div class="swiper-wrapper" id="swiper-wrapper"><div class="swiper-slide"><img src="img/banner.jpg" class="banner-img" /></div><div class="swiper-slide"><img src="img/banner2.jpg" class="banner-img" /></div><div class=";swiper-slide"><img src="img/banner3.jpg" class="banner-img" /></div><div class="swiper-slide"><img src="img/banner4.jpg" class="banner-img" /></div></div><!-- <div class="swiper-button-prev"></div><div class="swiper-button-next"></div> --></div><!-- 头部-搜索框 --><div class="search"><div class="first-line"><div class="search-child"><img src="img/marquee.png" /><div>网站公告:莓农园卡加上啊哈嘎哈嘎嘎</div></div><div class="search-child"><div><input type="text" placeholder="请输入关键词" value="" /></div><img src="img/search.png" /></div></div></div></div><!-- 中间部分 --><div class="content"><!-- 左边盒子 --><h2 class="le">草莓批发价格<span>当前位置:主页>草莓批发价格>2021110月长丰草莓批发价格</span></h2><div class="left"><h3>2021110月长丰草莓批发价格</h3><time><span>时间:2021.1.10&nbsp;&nbsp;</span><span>&nbsp;&nbsp;作者:东大地</span></time><p>"毒草莓"事件影响港闸草莓种植大户今年受损严重</p><p>“种了七八年草莓,这样的事还是头—回遇到。"5月21日,记者来到港闸区万顷良田,新天地合作社的负责人陈亚明—脸凝重,受到北京等地“海草莓"事件的影响,今年他的草莓种植遭遇重大损失。</p><img src="img/pf1.png" /><p>港闸区万顷良田工程实施后,陈亚明成为首批承包者,租种了2000多亩农田,成立了幸福街道新天地蔬果生产合作社。历经过种种挫折,但他没想到,“这—次却栽在了—个莫名其妙的传言上”。</p><p>作为万顷良田的种植大户,陈亚明的草莓种植面积超过300亩,正常情况下,草莓亩产量有五六千斤,总产量约900吨。</p><p>万顷良田建有江苏最大的连栋智能温室大棚、蔬菜基地农药残留快检室,是省无公害农产品基地。因为声名在外,之前陈亚明的草莓—直不愁销路,往往每年12月到次年四五月草莓销售旺季,各地订单会纷至沓来,草莓种植户们也能赚上—笔。</p><p>“我们这里的批发价七八元钱一斤,到了上海、北京等地零售,能卖到二三十元一斤,精包装的四五十元一斤也没问题"。然而,今年行情却急转直下。</p><p>陈亚明介绍,去年12月草莓上市后,团购业务疲软,起价就不高,“—斤只有五六元钱左右”,春节的销售不旺,原本指望能趁五—假期赚上一笔,不料,受到北京"毒草莓"传闻的重挫,4月份—过,大市场、大超市纷纷停购草莓,导致草莓持续滞销,“连—元—斤也没人要”。草莓都是成熟果,必须</p><div class="end"><p>上一篇:2020119日草莓批发价格</p><p>下—篇:2020119日草莓批发价格<span>【返回列表】</span></p></div></div><!-- 右边第一个盒子 --><div class="right-first"><h2>热点资讯</h2><ul><li>问题1111111111</li><li>问题1111111111</li><li>问题1111111111</li><li>问题1111111111</li><li>问题1111111111</li></ul></div><!-- 右边第二个盒子 --><div class="right-second"><h2>零售采购</h2><dl><dt><img src="img/caomei1.png" /></dt><dd>问题1111111111111111</dd><dd class="color">85<span>购买</span></dd></dl><dl><dt><img src="img/caomei1.png" /></dt><dd>问题1111111111111111</dd><dd class="color">85<span>购买</span></dd></dl><dl><dt><img src="img/caomei1.png" /></dt><dd>问题1111111111111111</dd><dd class="color">85<span>购买</span></dd></dl><dl><dt><img src="img/caomei1.png" /></dt><dd>问题1111111111111111</dd><dd class="color">85<span>购买</span></dd></dl></div><!-- 右边第三个盒子 --><div class="right-first"><h2>市场行情</h2><ul><li>问题1111111111</li><li>问题1111111111</li><li>问题1111111111</li><li>问题1111111111</li><li>问题1111111111</li></ul></div></div><!-- 尾部 --><style type="text/css">/* 底部样式---整改 */.foot .introduce{display: flex;align-items: center;justify-content: space-between;margin: 2rem 0;}.foot .introduce img{width: 14rem;height: 10rem;}.foot .introduce img:last-child{width: 11rem;}.foot .conn-wx {display: flex;justify-content: space-between;}</style><div class="foot"><div class="foot-menu"><div class="tan"><div class="quick"><div>快速入口</div><ul><li>草莓批发价格</li><li>草莓零售价格</li><li>长丰草莓批发</li><li>长丰草莓代理</li><li>长丰草莓加盟</li></ul></div><div class="quick"><div>热门频道</div><ul><li>草莓资讯</li><li>草莓知识</li><li>莓农新闻</li><li>草莓种植</li><li>草莓加盟</li></ul></div><div class="quick"><div>热点咨讯</div><ul><li>草莓资讯</li><li>草莓知识</li><li>市场行情</li></ul></div></div><div class="introduce"><img src="img/logo-bottom.png" /><img src="img/code.png" /></div><ul class="conn-wx"><li>联系电话:xxxxxxxxxxx</li><li>微信:xxxxxxxxxxx</li></ul></div><div class="beian">CopyRight 2019-2021 合肥莓农商贸</div></div></div></body><script src="js/swiper-bundle.min.js"></script><script src="js/jquery-3.1.1.min.js"></script><script src="js/all.js"></script></html>

六、️‍ 如何学习进步

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

七、‍☠️ 更多干货

关注我 学习更多知识~

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

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

更多主题网页设计模板

http://www.hskmm.com/?act=detail&tid=23128

相关文章:

  • P6782 [Ynoi2008] rplexq
  • AT_agc040_b [AGC040B] Two Contests
  • AT_arc084_b [ABC077D] Small Multiple 题目分析
  • 287. 寻找重复数
  • 福州市 2025 国庆集训 Day2 前三题题解
  • 2025 年马赛克厂家 TOP 企业品牌推荐排行榜,陶瓷,游泳池,喷墨,冰裂,拼花,防滑,复古,家装马赛克推荐这十家公司!
  • oppoR9m刷Linux系统: 手动备份系统与基带IMEI/NVRAM/QCN
  • 原来你是这样的claude code aciton:没想象中好
  • 实用指南:【Python】正则表达式
  • FlareOn1 -- 5get_it
  • 2025 年阀门厂家 TOP 企业品牌推荐排行榜,管道阀门,气动,调节,电动执行器,生产,电磁,不锈钢,进口,耐高温阀门推荐这十家公司
  • 深入解析:Ceph 分布式存储学习笔记(二):池管理、认证和授权管理与集群配置(下)
  • tcp与udp 协议 - 摘星
  • 赛前训练4 extra 字典树
  • CF1450E Capitalism
  • 二分图最大匹配 匈牙利算法
  • 2025 年脱硫剂厂家 TOP 企业品牌推荐排行榜,氧化铁,羟基氧化铁,常温氧化铁,沼气,天然气,煤气,煤层气,液化气,二氧化碳,氨气脱硫剂公司推荐
  • 2025 年砝码厂家 TOP 企业品牌推荐排行榜,不锈钢,标准,校准,天平,无磁,锁型,蓬莱,铸铁,定制,单双钩砝码公司推荐!
  • Java 在Word 文档中添加批注:高效文档协作的利器 - 指南
  • 2025雨棚生产厂家 TOP 企业品牌推荐排行榜,西安,陕西,西北推拉雨棚,推拉,移动,活动,户外,电动伸缩雨棚推荐这十家公司!
  • 关于整除分块
  • 2025 年木工机械设备厂家 TOP 企业品牌推荐排行榜,深度剖析木工机械设备推荐这十家公司!
  • Python语言自动玩游戏的消消乐游戏程序代码3QZQ
  • Python语言自动玩游戏的数字拼图游戏程序代码ZXQMQZQ
  • 如何找出集合的两个子集使得和相等?
  • Python语言自动玩游戏的俄罗斯方块游戏程序代码QZQ
  • Spring AI(七)Spring AI 的RAG搭建集合火山向量模型+阿里云Tair(企业版)
  • Python语言自动玩游戏的数字拼图游戏程序代码QZQ
  • 赛前训练4 字符串哈希
  • 英语