食品商城网站设计—食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作

优质内容贡献

已于 2022-06-19 11:13:29 修改

阅读量1.2k

点赞数 2

分类专栏： HTML5期末大作业 html网页设计作业 web大学生个人网站作业模文章标签： css javascript html 购物商城

于 2022-06-17 10:14:27 首次发布

本文链接：https://blog.csdn.net/qq_524614081/article/details/122349316

版权

这是一个关于HTML5期末大作业的分享，详细介绍了如何使用HTML+CSS+JavaScript制作一个8页的食品商城购物网站。内容涵盖作品展示、文件目录、代码实现和源码获取途径。

摘要由CSDN通过智能技术生成

HTML5期末大作业：食品商城网站设计——食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作

文章目录

HTML5期末大作业：食品商城网站设计——食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作
一、作品展示
二、文件目录
三、代码实现
四、获取更多源码

一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery1.42.min.js" type="text/javascript"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<script src="js/publicNav.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
<script type="text/javascript" src="js/showCartBox.js"></script>
<link href="css/base.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!--顶部top-->
<div class="topMenu">
  <div class="indexCont">
    <ul class="fl tW tL" style="width:190px;">
      <li class="b1"><i></i><a href="javascript:;">收藏我买网</a></li>
      <li class="b2"><i></i><a href="javascript:;">移动客户端</a></li>
    </ul>
    <div class="fr tW">
      <ul class="fl">
        <li class="login" style="white-space:nowrap;height:32px;line-height:32px;"> <b>您好，欢迎您来到顺丰优选</b> <a href="javascript:;">登录</a> <a href="javascript:;">注册</a> <a href="userOrder.html">我的订单</a> </li>
      </ul>
      <ul id="tMenu" class="fr tW tmCont">
        <li class="webnav"> <strong class="top_icon"><a href="javascript:;"> 我的素品 </a></strong>
          <div class="top_hidebox wdsp">
            <div class=""> <a href="userOrder.html">我的订单</a> </div>
            <div> <a href="javascript:;">我的积分</a> </div>
            <div> <a href="javascript:;">我的收藏</a> </div>
            <div> <a href="javascript:;">账户余额</a> </div>
            <div> <a href="javascript:;">我的选项卡</a> </div>
            <div> <a href="javascript:;">我的优惠券</a> </div>
          </div>
        </li>
        <li class="webnav"> <strong class="top_icon"><a href="javascript:;"> 服务中心 </a></strong>
          <div class="top_hidebox">
            <div class=""> <a href="javascript:;">购物指南</a> </div>
            <div> <a href="javascript:;">配送服务</a> </div>
            <div> <a href="javascript:;">支付方式</a> </div>
            <div> <a href="javascript:;">售后服务</a> </div>
            <div> <a href="javascript:;">客服邮箱</a> </div>
            <div> <a href="javascript:;">投诉与建议</a> </div>
          </div>
        </li>
        <li class="webnavdh" style="background:none"> <strong class="top_icon"><a href="javascript:;"> 网站导航 </a></strong>
          <div class="top_hidebox">
            <ul class="dh-list">
              <li class="dh_title"> <a  href="javascript:;"style="padding-left:0;">生鲜食品</a> <a href="javascript:;">酒水饮料</a> <a  href="javascript:;">粮油副食</a> <a href="javascript:;">休闲食品</a> <a  href="javascript:;">营养养生</a> </li>
              <li class="line"></li>
              <li class="dh_wenzi">
                <h4>饼干点心</h4>
                <a class="dh_oneTle"href="javascript:;">服饰</a