2023.07.15 | admin | 149次围观
HTML期末作业-网上购物食品超市HTML模板(HTML+CSS+JavaScript)
网上购物食品超市HTML模板，全套模板，包括首页、注册、登录、找回密码、用户中心、产品预定、收货地址、我的订单、我的收藏、消费记录、用户信息、账户管理、消息中心、我的报表、我的分销、商品专区、发布商品、评价管理、公共产品库、发货管理、运费模板、发布公告、订单专区、店铺专区、公司资质、产品列表、产品详情等网站模板页面。
效果演示(功能齐全)
文件目录
代码实现
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" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.3.min.js" type="text/javascript">script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript">script>
<script src="js/common_js.js" type="text/javascript">script>
<script src="js/footer.js" type="text/javascript">script>
<title>网站首页title>
head>
<body>
<head>
<div id="header_top">
<div id="top">
<div class="Inside_pages">
<div class="Collection"><a href="#" class="green">请登录a> <a href="#" class="green">免费注册a>div>
<div class="hd_top_manu clearfix">
<ul class="clearfix">
<li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="#">首页a>li>
<li class="hd_menu_tit" data-addclass="hd_menu_hover"> <a href="#">我的小充a> li>
<li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="#">消息中心a>li>
<li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="#">商品分类a>li>
<li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="#">我的购物车<b>(23)b>a>li>
ul>
div>
div>
div>
<div id="header" class="header page_style">
<div class="logo"><a href="index.html"><img src="images/logo.png" />a>div>
<div id="mian">
<div class="clearfix marginbottom">
<script>$("#allSortOuterbox").slide({ titCell:".Menu_list li",mainCell:".menv_Detail", });script>
<div class="link_style clearfix">
<div class="title">友情链接div>
<div class="link_name">
<a href="#"><img src="products/logo/34.jpg" width="100"/>a>
<a href="#"><img src="products/logo/34.jpg" width="100"/>a>
<a href="#"><img src="products/logo/34.jpg" width="100"/>a>
<a href="#"><img src="products/logo/34.jpg" width="100"/>a>
<a href="#"><img src="products/logo/34.jpg" width="100"/>a>
<a href="#"><img src="products/logo/34.jpg" width="100"/>a>
<a href="#"><img src="products/logo/34.jpg" width="100"/>a>
<a href="#"><img src="products/logo/34.jpg" width="100"/>a>
<a href="#"><img src="products/logo/34.jpg" width="100"/>a>
<a href="#"><img src="products/logo/34.jpg" width="100"/>a>
<a href="#"><img src="products/logo/34.jpg" width="100"/>a>
<a href="#"><img src="products/logo/34.jpg" width="100"/>a>
<a href="#"><img src="products/logo/34.jpg" width="100"/>a>
div>
div>
div>
<div class="fri-link-bg clearfix">
<div class="fri-link">
<div class="logo left margin-r20"><img src="images/fo-logo.jpg" width="152" height="81" />div>
<div class="left"><img src="images/qd.jpg" width="90" height="90" />
<p>扫描下载APPp>
div>
<div class="">
<dl>
<dt>新手上路dt>
<dd><a href="#">售后流程a>dd>
<dd><a href="#">购物流程a>dd>
<dd><a href="#">订购方式a> dd>
<dd><a href="#">隐私声明 a>dd>
<dd><a href="#">推荐分享说明 a>dd>
dl>
<dl>
<dt>配送与支付dt>
<dd><a href="#">保险需求测试a>dd>
<dd><a href="#">专题及活动a>dd>
<dd><a href="#">挑选保险产品a> dd>
<dd><a href="#">常见问题 a>dd>
dl>
<dl>
<dt>售后保障dt>
<dd><a href="#">保险需求测试a>dd>
<dd><a href="#">专题及活动a>dd>
<dd><a href="#">挑选保险产品a> dd>
<dd><a href="#">常见问题 a>dd>
dl>
<dl>
<dt>支付方式dt>
<dd><a href="#">保险需求测试a>dd>
<dd><a href="#">专题及活动a>dd>
<dd><a href="#">挑选保险产品a> dd>
<dd><a href="#">常见问题 a>dd>
dl>
<dl>
<dt>帮助中心dt>
<dd><a href="#">保险需求测试a>dd>
<dd><a href="#">专题及活动a>dd>
<dd><a href="#">挑选保险产品a> dd>
<dd><a href="#">常见问题 a>dd>
dl>
<dl>
<dt>帮助中心dt>
<dd><a href="#">保险需求测试a>dd>
<dd><a href="#">专题及活动a>dd>
<dd><a href="#">挑选保险产品a> dd>
<dd><a href="#">常见问题 a>dd>
dl>
<dl>
<dt>帮助中心dt>
<dd><a href="#">保险需求测试a>dd>
<dd><a href="#">专题及活动a>dd>
<dd><a href="#">挑选保险产品a> dd>
<dd><a href="#">常见问题 a>dd>
dl>
div>
div>
div>
<div class="fixedBox">
<ul class="fixedBoxList">
<li class="fixeBoxLi user"><a href="#"> <span class="fixeBoxSpan">span> <strong>消息中心strong>a> li>
<li class="fixeBoxLi cart_bd" style="display:block;" id="cartboxs">
<p class="good_cart">9p>
<span class="fixeBoxSpan">span> <strong>购物车strong>
<div class="cartBox">
<div class="bjfff">div><div class="message">购物车内暂无商品，赶紧选购吧div> div>li>
<li class="fixeBoxLi Service "> <span class="fixeBoxSpan">span> <strong>客服strong>
<div class="ServiceBox">
<div class="bjfffs">div>
<dl onclick="javascript:;">
<dt><img src="images/Service1.png">dt>
<dd><strong>QQ客服1strong>
<p class="p1">9:00-22:00p>
<p class="p2"><a href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=DGG三端同步&menu=yes">点击交谈a>p>
dd>
dl>
<dl onclick="javascript:;">
<dt><img src="images/Service1.png">dt>
<dd> <strong>QQ客服1strong>
<p class="p1">9:00-22:00p>
<p class="p2"><a href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=DGG三端同步&menu=yes">点击交谈a>p>
dd>
dl>
div>
li>
<li class="fixeBoxLi code cart_bd " style="display:block;" id="cartboxs">
<span class="fixeBoxSpan">span> <strong>微信strong>
<div class="cartBox">
<div class="bjfff">div>
<div class="QR_code">
<p><img src="images/erweim.jpg" width="180px" height="180px" />p>
<p>微信扫一扫，关注我们p>
div>
div>
li>
<li class="fixeBoxLi Home"> <a href="./"> <span class="fixeBoxSpan">span> <strong>收藏夹strong> a> li>
<li class="fixeBoxLi BackToTop"> <span class="fixeBoxSpan">span> <strong>返回顶部strong> li>
ul>
div>
body>
html>
做好的网页效果,如何通过发链接给别人看? 1.1解决部署上线~> 部署上线工具(永久免费使用)
1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件搜索引擎主题网站模板，免费下载安装，简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取
2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)
1.1部署流程
1.2 哇~ 部署成功
哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~
前端~零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~
源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉ 1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉ 3.以上内容技术相关问题可以相互学习搜索引擎主题网站模板，可关注↓公Z号 获取更多源码 !
版权声明
本文仅代表作者观点。
本文系作者授权发表，未经许可，不得转载。
发表评论