大学生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>当前位置：主页>草莓批发价格>2021年1月10月长丰草莓批发价格</span>
</h2>
<div class="left">
<h3>2021年1月10月长丰草莓批发价格</h3>
<time>
<span>时间：2021.1.10 </span>
<span> 作者：东大地</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>上一篇:2020年1月19日草莓批发价格</p>
<p>下—篇:2020年1月19日草莓批发价格<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>六、️ 如何学习进步
- 看书、看博客、学课程或者看视频等
- 关键就是模仿着书上或者博客的代码，进行复现，复现不重要，思考才
- 思考学习别人思路后，脱离书本和博客，完全自己建立功能
- 自己建立一些 DEMO，看别人项目代码，与别人讨论，提升代码能力
- 在别人的框架和要求下，写代码实现业务
- 自己负责别人设计的模块的实现
- 独立设计业务模块并构建实现
- 负责大项目框架设计和拆分，带领别人进行编写
- 其他高阶的架构和管理工作，已经不仅仅是代码能力了
七、☠️ 更多干货
关注我 学习更多知识~
支持我，请 点赞 + 好评 + 收藏 三连，带来更多文章~
有需完整源码的同学可以留言、后台私信我（说明要什么主题模板）~
浙公网安备 33010602011771号