HTML+CSS+JS计——仿苏苏超市(1页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载

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

这是一个HTML5期末大作业，设计了一个简单的静态网页，模仿苏苏超市。网页采用DIV布局，适用于大学生个人网站制作。包括作品展示、文件目录、代码实现和学习资料四个部分。

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

HTML5期末大作业：苏苏网站设计——仿苏苏超市(1页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍

文章目录

HTML5期末大作业：苏苏网站设计——仿苏苏超市(1页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍
一、作品展示
二、文件目录
三、代码实现
四、学习资料

一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现


<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <script>
        /*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/
    </script>
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="js/banner.js"></script>
</head>

<body>
    <div class="topssbox1">
        <div class="topss">
            <a href="seacher.html">
                <div class="topssbox">
                    <img src="images/s.png" />
                </div>
            </a>
        </div>
    </div>
    <div class="banner">
        <div id="fade_focus">
            <div class="loading"></div>
            <ul>
                <li><img src="images/b1.png" /></li>
                <li><img src="images/b2.png" /></li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
    <div class="typeNav">
        <ul>
            <li>
                <a href="shoplist.html">
        <img src="images/typeicon1.png" />
	    <p>今日特惠</p>
	  </a>
            </li>
            <li>
                <a href="shoplist.html">
        <img src="images/typeicon2.png" />
	    <p>全球购</p>
	  </a>
            </li>
            <li>
                <a href="javascript:void()">
        <img src="images/typeicon3.png" />
	    <p>充值中心</p>
	  </a>
            </li>
            <li>
                <a href="jifen.html">
        <img src="images/typeicon4.png" />
	    <p>我的积分</p>
	  </a>
            </li>
            <li>
                <a href="javascript:void()">
        <img src="images/typeicon5.png" />
	    <p>签到</p>
	  </a>
            </li>
            <li>
                <a href="quanNews1.html">
        <img src="images/typeicon6.png" />
	    <p>优惠券</p>
	  </a>
            </li>
            <li>
                <a href="shoplist.html">
        <img src="images/typeicon7.png" />
	    <p>闪电购</p>
	  </a>
            </li>
            <li>
                <a href="shopType.html">
        <img src="images/typeicon8.png" />
	    <p>分类</p>
	  </a>
            </li>
        </ul>
    </div>
    <div class="clear"></div>
    <div class=