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

HTMLCSSJS【购物商城】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计 文章目录一、 网站题目二、 网站描述三、 网站介绍四、 网站效果五、️ 网站代码六、️‍ 如何学习进步七、‍☠️ 更多干货 文章目录一、 网站题目 购物商城 草莓 移动端1 14页 含JQ二、 网站描述 总结了一些学生网页制作的经验一般的网页需要融入以下知识点divcss布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点网页的风格主题也很全面如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题学生、新手可参考下方页面的布局和设计和HTML源码有用点赞(๑•̀ㅂ•́)و✧ 一套A的网页应该包含 (具体可根据个人要求而定)页面分为页头、菜单导航栏最好可下拉、中间内容板块、页脚四大部分。所有页面相互超链接可到三级页面有5-10个页面组成。页面样式风格统一布局显示正常不错乱使用DivCss技术。菜单美观、醒目二级菜单可正常弹出与跳转。要有JS特效如定时切换和手动切换图片轮播。页面中有多媒体元素如gif、视频、音乐表单技术的使用。页面清爽、美观、大方不雷同。不仅要能够把用户要求的内容呈现出来还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。三、 网站介绍网站布局方面计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面计划采用最新的网页编程语言HTML5CSS3JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器已达到打开后就能即时看到网站的效果。网站素材方面计划收集各大平台好看的图片素材并精挑细选适合网页风格的图片然后使用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实现动态轮播特效, 表单提交, 点击事件等等。四、 网站效果五、️ 网站代码!DOCTYPEhtmlhtmlheadmeta charsetutf-8meta nameviewportcontentinitial-scale1.0, maximum-scale1.0, user-scalableno/title/titlelink relstylesheethrefcss/style.css/link relstylesheethrefcss/article.css/link relstylesheethrefcss/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/headbody!--头部--divclasshead!--头部-logo--divclassfirst-logodivclasslogoimg src./img/logo.png//divdivclassconn-mobilediv莓农园-长丰草莓批发采购/divdiv联系电话spanxxxxxxxxxxx/span/div/div!--导航button按钮--divclassnavbtnimg srcimg/navbtn.png//div/div!--头部-菜单--divclassmenuullia hrefproduct.html产品中心/a/lilia hrefindex2.html首页/a/liliclassactivea hrefarticle.html关于我们/a/lilia hrefpifa.html草莓批发/a/lilia hrefretail.html零售采购/a/lilia hreflist.html加盟代理/a/lilia hrefprice.html草莓采购/a/lilia hrefzhishi.html草莓知识/a/li/ul/divdivclassproduct-menuullidiv红颜草莓/divulli大果/lili中果/lili小果/li/ul/lilidiv红颜草莓/divulli大果/lili中果/lili小果/li/ul/lilidiv红颜草莓/divulli大果/lili中果/lili小果/li/ul/lilidiv红颜草莓/divulli大果/lili中果/lili小果/li/ul/li/ul/div!--头部-轮播图--divclassswiper-containeridswiper-bannerdivclassswiper-wrapperidswiper-wrapperdivclassswiper-slideimg srcimg/banner.jpgclassbanner-img//divdivclassswiper-slideimg srcimg/banner2.jpgclassbanner-img//divdivclass;swiper-slideimg srcimg/banner3.jpgclassbanner-img//divdivclassswiper-slideimg srcimg/banner4.jpgclassbanner-img//div/div!--divclassswiper-button-prev/divdivclassswiper-button-next/div--/div!--头部-搜索框--divclasssearchdivclassfirst-linedivclasssearch-childimg srcimg/marquee.png/div网站公告莓农园卡加上啊哈嘎哈嘎嘎/div/divdivclasssearch-childdivinput typetextplaceholder请输入关键词value//divimg srcimg/search.png//div/div/div/div!--中间部分--divclasscontent!--左边盒子--h2classle草莓批发价格span当前位置主页草莓批发价格2021年1月10月长丰草莓批发价格/span/h2divclasslefth32021年1月10月长丰草莓批发价格/h3timespan时间2021.1.10nbsp;nbsp;/spanspannbsp;nbsp;作者东大地/span/timep受毒草莓事件影响港闸草莓种植大户今年受损严重/pp“种了七八年草莓这样的事还是头—回遇到。5月21日记者来到港闸区万顷良田新天地合作社的负责人陈亚明—脸凝重受到北京等地“海草莓事件的影响今年他的草莓种植遭遇重大损失。/pimg srcimg/pf1.png/p港闸区万顷良田工程实施后陈亚明成为首批承包者租种了2000多亩农田成立了幸福街道新天地蔬果生产合作社。历经过种种挫折但他没想到“这—次却栽在了—个莫名其妙的传言上”。/pp作为万顷良田的种植大户陈亚明的草莓种植面积超过300亩正常情况下草莓亩产量有五六千斤总产量约900吨。/pp万顷良田建有江苏最大的连栋智能温室大棚、蔬菜基地农药残留快检室是省无公害农产品基地。因为声名在外之前陈亚明的草莓—直不愁销路往往每年12月到次年四五月草莓销售旺季各地订单会纷至沓来草莓种植户们也能赚上—笔。/pp“我们这里的批发价七八元钱一斤到了上海、北京等地零售能卖到二三十元一斤精包装的四五十元一斤也没问题。然而今年行情却急转直下。/pp陈亚明介绍去年12月草莓上市后团购业务疲软起价就不高“—斤只有五六元钱左右”春节的销售不旺原本指望能趁五—假期赚上一笔不料受到北京毒草莓传闻的重挫4月份—过大市场、大超市纷纷停购草莓导致草莓持续滞销“连—元—斤也没人要”。草莓都是成熟果必须/pdivclassendp上一篇:2020年1月19日草莓批发价格/pp下—篇:2020年1月19日草莓批发价格span【返回列表】/span/p/div/div!--右边第一个盒子--divclassright-firsth2热点资讯/h2ulli问题1111111111/lili问题1111111111/lili问题1111111111/lili问题1111111111/lili问题1111111111/li/ul/div!--右边第二个盒子--divclassright-secondh2零售采购/h2dldtimg srcimg/caomei1.png//dtdd问题1111111111111111/ddddclasscolor85元span购买/span/dd/dldldtimg srcimg/caomei1.png//dtdd问题1111111111111111/ddddclasscolor85元span购买/span/dd/dldldtimg srcimg/caomei1.png//dtdd问题1111111111111111/ddddclasscolor85元span购买/span/dd/dldldtimg srcimg/caomei1.png//dtdd问题1111111111111111/ddddclasscolor85元span购买/span/dd/dl/div!--右边第三个盒子--divclassright-firsth2市场行情/h2ulli问题1111111111/lili问题1111111111/lili问题1111111111/lili问题1111111111/lili问题1111111111/li/ul/div/div!--尾部--style typetext/css/* 底部样式---整改 */.foot.introduce{display:flex;align-items:center;justify-content:space-between;margin:2rem0;}.foot.introduce img{width:14rem;height:10rem;}.foot.introduce img:last-child{width:11rem;}.foot.conn-wx{display:flex;justify-content:space-between;}/styledivclassfootdivclassfoot-menudivclasstandivclassquickdiv快速入口/divulli草莓批发价格/lili草莓零售价格/lili长丰草莓批发/lili长丰草莓代理/lili长丰草莓加盟/li/ul/divdivclassquickdiv热门频道/divulli草莓资讯/lili草莓知识/lili莓农新闻/lili草莓种植/lili草莓加盟/li/ul/divdivclassquickdiv热点咨讯/divulli草莓资讯/lili草莓知识/lili市场行情/li/ul/div/divdivclassintroduceimg srcimg/logo-bottom.png/img srcimg/code.png//divulclassconn-wxli联系电话xxxxxxxxxxx/lili微信xxxxxxxxxxx/li/ul/divdivclassbeianCopyRight2019-2021合肥莓农商贸/div/div/div/bodyscript srcjs/swiper-bundle.min.js/scriptscript srcjs/jquery-3.1.1.min.js/scriptscript srcjs/all.js/script/html六、️‍ 如何学习进步看书、看博客、学课程或者看视频等模仿着书上或者博客的代码进行复现复现不重要思考才是关键思考学习别人思路后脱离书本和博客完全自己实现功能自己实现一些 DEMO看别人项目代码与别人讨论提升代码能力在别人的框架和要求下写代码实现业务自己负责别人设计的模块的实现独立设计业务模块并开发实现负责大项目框架设计和拆分带领别人进行开发其他高阶的架构和管理工作已经不仅仅是代码能力了七、‍☠️ 更多干货 关注我 学习更多知识~ 支持我请 点赞 好评 收藏 三连带来更多文章~ 有需要完整源码的同学可以留言、后台私信我说明要什么主题模板~ 更多主题网页设计模板