html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例企业网站制作

STU网页优选

已于 2024-05-24 13:24:39 修改

阅读量447

点赞数 5

分类专栏： web课程与设计文章标签： web web课程与设计 web前端

于 2024-05-24 13:24:31 首次发布

本文链接：https://blog.csdn.net/qq_38512499/article/details/128579893

版权

web课程与设计专栏收录该内容

2050 篇文章 76 订阅

订阅专栏

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>品优购-正品低价、品质保障、配送及时、轻松购物！</title>
  <meta name="description" content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
  <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
  <!-- 引入icon图标 -->
  <link rel="shortcut icon" href="favicon.ico">
  <!-- 引入外部css样式文件 -->
  <!-- 先引入兼容的css样式文件，再引入初始化样式文件，再引入第三方样式文件，再引入模板页面css样式，再引入当前页面css文件 -->
  <!-- 引入兼容css文件 -->
  <link rel="stylesheet" href="../css/normalize.css">
  <!-- 引入初始化样式文件 -->
  <link rel="stylesheet" href="../css/base.css">
  <!-- 引入模板页面样式文件 -->
  <link rel="stylesheet" href="../css/module.css">
  <!-- 引入当前页面样式文件 -->
  <link rel="stylesheet" href="../css/index.css">
</head>
<body>
  <!-- 头部的快捷导航栏部分开始 -->
  <div class="shortcut">
    <div class="w">
      <div class="shortcut_wel fl">
        <span>品优购欢迎您!</span>
        <a href="#" class="user_login">请登录</a>
        <a href="#" class="col_rd">免费注册</a>
      </div>
      <div class="shortcut_nav fr">
        <ul>
          <li><a href="#">我的订单</a></li>
          <li class="line"></li>
          <li><a href="#">我的品优购</a><i class="iconfont">&#xe6a6;</i></li>
          <li class="line"></li>
          <li><a href="#">品优购会员</a></li>
          <li class="line"></li>
          <li><a href="#">企业采购</a></li>
          <li class="line"></li>
          <li><a href="#">关注品优购</a><i class="iconfont">&#xe6a6;</i></li>
          <li class="line"></li>
          <li>客户服务<i class="iconfont">&#xe6a6;</i></li>
          <li class="line"></li>
          <li>网站导航<i class="iconfont">&#xe6a6;</i></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 头部的快捷导航栏部分结束 -->


  <!-- 头部部分开始 -->
  <div class="nav_top">
    <div class="w pr">
      <div class="logo">
        <h1>
          <a href="#">品优购</a>
        </h1>
      </div>
      <div class="search">
        <input type="text" placeholder="语言开发">
        <input type="button" value="搜索">
      </div>
      <div class="cart">
        <i class="iconfont car">&#xe698;</i>
        <a href="#" class="myCar">我的购物车</a>
        <i class="iconfont">&#xe6a7;</i>
        <span class="buy_num">8</span>
      </div>
      <div class="hotwrods">
        <ul>
          <li><a href="#" class="col_rd">女神美颜季</a></li>
          <li><a href="#">洗手节</a></li>
          <li><a href="#">满99减50</a></li>
          <li><a href="#">畅享9p</a></li>
          <li><a href="#">荣耀平板</a></li>
          <li><a href="#">老年鞋</a></li>
          <li><a href="#">满千减百</a></li>
        </ul>
      </div>
      <div class="nav_top_nav">
        <ul>
          <li><a href="#">秒杀</a></li>
          <li><a href="#">优惠券</a></li>
          <li><a href="#">PLUS会员</a></li>
          <li><a href="#">闪购</a></li>
          <li><a href="#">拍卖</a></li>
          <li><a href="#">品优购服饰</a></li>
          <li><a href="#">品优购超市</a></li>
          <li><a href="#">品优购生鲜</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 头部部分结束 -->


  <!-- main部分开始 -->
  <div class="main w pr">
    <div class="main_nav fl">
      <h3>全部商品分类</h3>
      <ul>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
        <li><a href="#">家用电器 <i class="iconfont fr">&#xe6a7;</i></a></li>
      </ul>
    </div>
    <div class="main_content fr">
      <div class="slider_list fl pr">
        <ul>
          <li><a href="#"><img src="../upload/banner.jpg" alt=""></a></li>
          <li><a href="#"><img src="../upload/banner.jpg" alt=""></a></li>
          <li><a href="#"><img src="../upload/banner.jpg" alt=""></a></li>
          <li><a href="#"><img src="../upload/banner.jpg" alt=""></a></li>
          <li><a href="#"><img src="../upload/banner.jpg" alt=""></a></li>
          <li><a href="#"><img src="../upload/banner.jpg" alt=""></a></li>
        </ul>
        <div class="arrow_l"></div>
        <div class="arrow_r"></div>
        <div class="radius">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
      <div class="newsflash fr">
        <div class="news">
          <div class="news_title">
             <h3 class="fl">品优购快报</h3>
             <a href="#" class="fr">更多<i class="iconfont">&#xe6a7;</i></a>
          </div>
          <div class="news_info">
            <p><a href="#"><strong>[特惠]</strong> 备战开学季 全民半价购数码</a></p>
            <p><a href="#"><strong>[特惠]</strong> 备战开学季 全民半价购数码</a></p>
            <p><a href="#"><strong>[特惠]</strong> 备战开学季 全民半价购数码</a></p>
            <p><a href="#"><strong>[特惠]</strong> 备战开学季 全民半价购数码</a></p>
            <p><a href="#"><strong>[特惠]</strong> 备战开学季 全民半价购数码</a></p>
          </div>
          <div class="lifeservice">
            <ul>
              <li><a href="#"><em></em><span class="text">话费</span></a></li>
              <li><a href="#"><em></em><span class="text">话费</span></a></li>
              <li><a href="#"><em></em><span class="text">话费</span></a></li>
              <li><a href="#"><em></em><span class="text">话费</span></a></li>
              <li><a href="#"><em></em><span class="text">话费</span></a></li>
              <li><a href="#"><em></em><span class="text">话费</span></a></li>
              <li><a href="#"><em></em><span class="text">话费</span></a></li>
              <li><a href="#"><em></em><span class="text">话费</span></a></li>
              <li><a href="#"><em></em><span class="text">话费</span></a></li>
              <li><a href="#"><em></em><span class="text">话费</span></a></li>
              <li><a href="#"><em></em><span class="text">话费</span></a></li>
              <li><a href="#"><em></em><span class="text">话费</span></a></li>
            </ul>
          </div>
        </div>
        <a href="#">
          <img src="../upload/ad.jpg" alt="">
        </a>
      </div>
    </div>
  </div>
  <!-- main部分结束 -->

  <!-- 今日推荐部分开始 -->
  <div class="today_recom w clearfix">
    <div class="recom fl">
      <i class="iconfont">&#xe627;</i>
      <span>今日推荐</span>
    </div>
    <div class="recom_pro fr">
      <ul>
        <li>
          <div class="pro_text fl">
            <h3>优质好货</h3>
            <span class="youhui">满300减200</span>
            <span class="free">满500减500</span>
            <!-- <a href="#">团购</a> -->
          </div>
          <div class="pro_img fl">
            <a href="#">
              <img src="../upload/jd.png" alt="">
            </a>
          </div>
        </li>
         <li>
          <div class="pro_text fl">
            <h3>优质好货</h3>
            <span class="youhui">满300减200</span>
            <span class="free">满500减500</span>
            <a href="#">团购</a>
          </div>
          <div class="pro_img fl">
            <a href="#">
              <img src="../upload/jd.png" alt="">
            </a>
          </div>
        </li>
        <li>
          <div class="pro_text fl">
            <h3>优质好货</h3>
            <span class="youhui">满300减200</span>
            <span class="free">满500减500</span>
            <a href="#">团购</a>
          </div>
          <div class="pro_img fl">
            <a href="#">
              <img src="../upload/jd.png" alt="">
            </a>
          </div>
        </li>
        <li>
          <div class="pro_text fl">
            <h3>优质好货</h3>
            <span class="youhui">满300减200</span>
            <span class="free">满500减500</span>
            <a href="#">团购</a>
          </div>
          <div class="pro_img fl">
            <a href="#">
              <img src="../upload/jd.png" alt="">
            </a>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- 今日推荐部分结束 -->


  <!-- 传智播客有趣区部分开始 -->
  <div class="itcast w">
    <h3>传智播客•有趣区</h3>
    <div class="itcast_pro clearfix">
      <div class="pro_books fl">
        <a href="#">
          <img src="../upload/interest01.png" alt="">
        </a>
      </div>
      <div class="pro_brand fl clearfix">
        <div class="good_pro fl">
          <h4>好东西</h4>
          <a href="#" class="keybrod"><img src="../upload/interest02.png" alt="" ></a>
          <a href="#"><img src="../upload/interest03.png" alt="" ></a>
        </div>
        <div class="brand_list fl">
          <h4>品牌街</h4>
          <a href="#" class="keybrod">
            <img src="../upload/interest04.png" alt="">
          </a>
          <ul>
            <li><a href="#"><img src="../upload/interest05.png" alt=""></a></li>
            <li><a href="#"><img src="../upload/interest06.png" alt=""></a></li>
          </ul>
        </div>
        <div class="brand_logo fl">
          <ul>
            <li><a href="#"><img src="../upload/brand01.png" alt=""></a></li>
            <li><a href="#"><img src="../upload/brand02.png" alt=""></a></li>
            <li><a href="#"><img src="../upload/brand03.png" alt=""></a></li>
            <li><a href="#"><img src="../upload/brand13.png" alt=""></a></li>
            <li><a href="#"><img src="../upload/brand04.png" alt=""></a></li>
            <li><a href="#"><img src="../upload/brand05.png" alt=""></a></li>
            <li><a href="#"><img src="../upload/brand06.png" alt=""></a></li>
            <li><a href="#"><img src="../upload/brand07.png" alt=""></a></li>
            <li><a href="#"><img src="../upload/brand08.png" alt=""></a></li>
            <li><a href="#"><img src="../upload/brand09.png" alt=""></a></li>
            <li><a href="#"><img src="../upload/brand10.png" alt=""></a></li>
            <li><a href="#"><img src="../upload/brand11.png" alt=""></a></li>
            <li><a href="#"><img src="../upload/brand12.png" alt=""></a></li>
            <li><a href="#"><img src="../upload/brand13.png" alt=""></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 传智播客有趣区部分结束 -->


  <!-- 产品展示区域开始 -->
  <div class="product w">
    <div class="product_title clearfix">
      <h3 class="fl">家用电器</h3>
      <div class="product_title_list fr">
        <ul>
          <li><a href="#" class="col_rd">热门</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
        </ul>
      </div>
    </div>
    <div class="product_info clearfix">
      <div class="product_info_left fl">
        <div class="info_left_list clearfix">
          <ul>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
          </ul>
        </div>
        <div class="info_left_img">
          <a href="#"><img src="../upload/floor-1-1.png" alt=""></a>
        </div>
      </div>
      <div class="product_info_center fl">
        <ul>
          <li><a href="#"><img src="../upload/floor-1-b01.png" alt=""></a></li>
          <li><a href="#"><img src="../upload/floor-1-b02.png" alt=""></a></li>
          <li><a href="#"><img src="../upload/floor-1-b03.png" alt=""></a></li>
        </ul>
      </div>
      <div class="product_info_right fl">
        <ul>
          <li>
            <a href="#" class="border_line"><img src="../upload/floor-1-2.png" alt=""></a>
            <a href="#"><img src="../upload/floor-1-3.png" alt=""></a>
          </li>
          <li>
            <a href="#"><img src="../upload/floor-1-4.png" alt="" width="219"></a>
          </li>
          <li>
            <a href="#" class="border_line"><img src="../upload/floor-1-5.png" alt=""></a>
            <a href="#"><img src="../upload/floor-1-6.png" alt=""></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="product_brand clearfix">
      <ul>
        <li><a href="#"><img src="../upload/brand_03.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_05.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_07.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_09.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_11.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_13.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_15.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_17.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_19.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_21.png" alt=""></a></li>
      </ul>
    </div>
  </div>
  <div class="product w">
    <div class="product_title clearfix">
      <h3 class="fl">手机通讯</h3>
      <div class="product_title_list fr">
        <ul>
          <li><a href="#" class="col_rd">热门</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
        </ul>
      </div>
    </div>
    <div class="product_info clearfix">
      <div class="product_info_left fl">
        <div class="info_left_list clearfix">
          <ul>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
          </ul>
        </div>
        <div class="info_left_img">
          <a href="#"><img src="../upload/floor-1-1.png" alt=""></a>
        </div>
      </div>
      <div class="product_info_center fl">
        <ul>
          <li><a href="#"><img src="../upload/floor-1-b01.png" alt=""></a></li>
          <li><a href="#"><img src="../upload/floor-1-b02.png" alt=""></a></li>
          <li><a href="#"><img src="../upload/floor-1-b03.png" alt=""></a></li>
        </ul>
      </div>
      <div class="product_info_right fl">
        <ul>
          <li>
            <a href="#" class="border_line"><img src="../upload/floor-1-2.png" alt=""></a>
            <a href="#"><img src="../upload/floor-1-3.png" alt=""></a>
          </li>
          <li>
            <a href="#"><img src="../upload/floor-1-4.png" alt="" width="219"></a>
          </li>
          <li>
            <a href="#" class="border_line"><img src="../upload/floor-1-5.png" alt=""></a>
            <a href="#"><img src="../upload/floor-1-6.png" alt=""></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="product_brand clearfix">
      <ul>
        <li><a href="#"><img src="../upload/brand_03.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_05.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_07.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_09.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_11.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_13.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_15.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_17.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_19.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_21.png" alt=""></a></li>
      </ul>
    </div>
  </div>
  <div class="product w">
    <div class="product_title clearfix">
      <h3 class="fl">电脑数码</h3>
      <div class="product_title_list fr">
        <ul>
          <li><a href="#" class="col_rd">热门</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
          <li class="line"></li>
          <li><a href="#">大家电</a></li>
        </ul>
      </div>
    </div>
    <div class="product_info clearfix">
      <div class="product_info_left fl">
        <div class="info_left_list clearfix">
          <ul>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
            <li><a href="#">节能补贴</a></li>
          </ul>
        </div>
        <div class="info_left_img">
          <a href="#"><img src="../upload/floor-1-1.png" alt=""></a>
        </div>
      </div>
      <div class="product_info_center fl">
        <ul>
          <li><a href="#"><img src="../upload/floor-1-b01.png" alt=""></a></li>
          <li><a href="#"><img src="../upload/floor-1-b02.png" alt=""></a></li>
          <li><a href="#"><img src="../upload/floor-1-b03.png" alt=""></a></li>
        </ul>
      </div>
      <div class="product_info_right fl">
        <ul>
          <li>
            <a href="#" class="border_line"><img src="../upload/floor-1-2.png" alt=""></a>
            <a href="#"><img src="../upload/floor-1-3.png" alt=""></a>
          </li>
          <li>
            <a href="#"><img src="../upload/floor-1-4.png" alt="" width="219"></a>
          </li>
          <li>
            <a href="#" class="border_line"><img src="../upload/floor-1-5.png" alt=""></a>
            <a href="#"><img src="../upload/floor-1-6.png" alt=""></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="product_brand clearfix">
      <ul>
        <li><a href="#"><img src="../upload/brand_03.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_05.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_07.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_09.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_11.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_13.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_15.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_17.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_19.png" alt=""></a></li>
        <li><a href="#"><img src="../upload/brand_21.png" alt=""></a></li>
      </ul>
    </div>
  </div>
  <!-- 产品展示区域结束 -->


  <!-- 底部部分开始 -->
  <div class="footer">
    <div class="w">
      <div class="mod_service">
        <ul class="clearfix">
          <li class="clearfix">
            <h3>正品保障</h3>
            <div class="service_text fl">
              <h4>正品保障</h4>
              <span>正品保障，提供发票</span>
            </div>
          </li>
          <li class="clearfix">
            <h3>极速物流</h3>
            <div class="service_text fl">
              <h4>正品保障</h4>
              <span>正品保障，提供发票</span>
            </div>
          </li>
          <li class="clearfix">
            <h3>无忧售后</h3>
            <div class="service_text fl">
              <h4>正品保障</h4>
              <span>正品保障，提供发票</span>
            </div>
          </li>
          <li class="clearfix">
            <h3>特殊服务</h3>
            <div class="service_text fl">
              <h4>正品保障</h4>
              <span>正品保障，提供发票</span>
            </div>
          </li>
          <li class="clearfix">
            <h3>帮助中心</h3>
            <div class="service_text fl">
              <h4>正品保障</h4>
              <span>正品保障，提供发票</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="mod_service_item clearfix">
        <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>
          <dd><a href="#">联系客服</a></dd>
        </dl>
        <dl>
          <dt>配送方式</dt>
          <dd><a href="#">上门自提</a></dd>
          <dd><a href="#">211限时达</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>
          <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>
          <dd><a href="#">取消订单</a></dd>
        </dl>
        <dl>
          <dt>特色服务</dt>
          <dd><a href="#">夺宝岛</a></dd>
          <dd><a href="#">DIY装机</a></dd>
          <dd><a href="#">延保服务</a></dd>
          <dd><a href="#">品优购E卡</a></dd>
          <dd><a href="#">品优购通信</a></dd>
        </dl>
        <dl>
          <dt>帮助中心</dt>
          <dd class="ac">
            <img src="../images/wx_cz.jpg" alt="">
            <span>品优购客户端</span>
          </dd>
        </dl>
      </div>
      <div class="mod_copyright">
        <ul class="clearfix">
          <li><a href="#">关于我们</a></li>
          <li class="line"></li>
          <li><a href="#">关于我们</a></li>
          <li class="line"></li>
          <li><a href="#">关于我们</a></li>
          <li class="line"></li>
          <li><a href="#">关于我们</a></li>
          <li class="line"></li>
          <li><a href="#">关于我们</a></li>
          <li class="line"></li>
          <li><a href="#">关于我们</a></li>
          <li class="line"></li>
          <li><a href="#">关于我们</a></li>
          <li class="line"></li>
          <li><a href="#">关于我们</a></li>
          <li class="line"></li>
          <li><a href="#">关于我们</a></li>
          <li class="line"></li>
          <li><a href="#">关于我们</a></li>
          <li class="line"></li>
          <li><a href="#">关于我们</a></li>
          <li class="line"></li>
          <li><a href="#">关于我们</a></li>
        </ul>
        <p>地址：广州市天河区吉山街道珠吉路58号津安创意园103室 邮编：10086 电话：020-8888888 传真：020-8888888 邮箱：876899126@guang.com</p>
        <p>&copy;粤 ICP 备 08001421 号穗公网安备 110200200809</p>
      </div>
    </div>
  </div>
  <!-- 底部部分结束 -->
</body>
</html>

2.CSS样式代码 🏠


/*品优购首页样式文件*/

/*main部分样式开始*/
.main {
  height: 465px;
  /*background: pink;*/
}
.main .main_nav {
  position: absolute;
  left: 0;
  top: -47px;
  width: 209px;
  height: 512px;
  background: #c81623;
}
.main_nav h3 {
  height: 47px;
  background: #b1191a;
  font-size: 18px;
  font-weight: normal;
  color: #fff;
  line-height: 47px;
  text-align: center;
}
/*.main_nav ul {
  padding-left: 12px;
}*/
.main_nav ul li {
  padding: 0 12px;
  font-size: 14px;
  line-height: 31px;
}
.main_nav li a {
  display: block;
  height: 31px;
  color: #fff;
}
.main_nav ul li:hover {
  background: #fff;
}
.main_nav li:hover a {
  color: #c81623;
}



.main .main_content {
  width: 979px;
  height: 455px;
  /*background: blue;*/
  margin-top: 10px;
}
.main_content .slider_list {
  width: 721px;
  height: 455px;
}
.slider_list>ul>li {
  position: absolute;
}
.slider_list .arrow_l,
.slider_list .arrow_r {
  display: none;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 41px;
  height: 69px;
  background: url('../images/icon-slides.png') no-repeat;
}
.slider_list .arrow_l {
  background-position: -85px 0;
}
.slider_list .arrow_r {
  right: 0;
  background-position: right 0;
}
.slider_list .arrow_l:hover,
.slider_list .arrow_r:hover {
  background-color: rgba(0,0,0,.3);
}
.main_content .slider_list:hover .arrow_l,
.main_content .slider_list:hover .arrow_r {
  display: block;
}
.slider_list .radius {
  position: absolute;
  left: 50%;
  bottom: 10px;
  margin-left: -135px;
  width: 259px;
  height: 28px;
  padding-left: 11px;
  background: rgba(0,0,0,.4);
  border-radius: 14px;
}
.radius ul li {
  float: left;
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,.8);
  border-radius: 50%;
  margin: 4px 11px;
}
.radius ul li:hover {
  background: pink;
}
.newsflash .news {
  width: 248px;
  height: 372px;
  border: 1px solid #e4e4e4;
  margin-bottom: 5px;
  overflow: hidden;
}
.news .news_title {
  height: 32px;
  padding: 0 15px;
  border-bottom: 1px dashed #e8e8e7;
  line-height: 32px;
}
.news_title h3 {
  font-size: 14px;
  color: #333;
  font-weight: normal;
}
.news .news_info {
  padding-left: 15px;
  padding-top: 12px;
}
.news_info p {
  height: 25px;
}
.lifeservice ul {
  width: 252px;
}
.lifeservice ul li {
  float: left;
  border-top: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
.lifeservice li a {
  display: block;
  width: 62px;
  height: 70px;
  text-align: center;
  overflow: hidden;
  /*text-indent: 10px;*/
}
.lifeservice ul li em {
  display: block;
  width: 26px;
  height: 26px;
  /*margin: 8px auto;*/
  margin-top: 8px;
  margin-left: 21px;
  margin-bottom: 8px;
  background: url('../images/icons.png') no-repeat -19px -16px;
}
.lifeservice ul li:nth-child(2) em {
  background-position: -79px -16px;
}
.lifeservice ul li:nth-child(3) em {
  background-position: -142px -16px;
}
.lifeservice ul li:nth-child(4) em {
  background-position: -205px -16px;
}
/*.lifeservice li .text {
  margin-left: 0px;
}*/
/*main部分样式结束*/


/*今日推荐部分样式开始*/
.today_recom {
  margin-top: 10px;
  background: #ebebeb;
}
.today_recom .recom {
  width: 206px;
  height: 132px;
  padding-top: 31px;
  background: #5c5251;
  color: #fff;
  font-size: 18px;
  text-align: center;
}
.recom .iconfont {
  display: block;
  color: #fff;
  font-size: 58px;
  font-weight: 600;
  margin-bottom: 10px;
}
.today_recom .recom_pro {
  padding: 10px 0;
  background: #ebebeb;
}
.recom_pro ul li {
  float: left;
  width: 205px;
  height: 113px;
  padding: 15px 21px;
  border-right: 1px solid #ddd;
}
.recom_pro ul li:last-child {
  border-right: none;
}
/*.recom_pro .pro_text {
  width: 87px;
}*/
.pro_text h3 {
  font-size: 16px;
  /*font-weight: normal;*/
  color: #333;
}
.pro_text .youhui {
  display: block;
  width: 87px;
  height: 18px;
  background: #00a0e8;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 14px;
  color: #fff;
  line-height: 18px;
  text-align: center;
}
.pro_text a {
  display: block;
  width: 57px;
  height: 18px;
  font-size: 14px;
  background: #5fb200;
  margin-top: 20px;
  color: #fff;
  text-align: center;
  border-radius: 9px;
}
/*今日推荐部分样式结束

/*传智播客有趣区样式部分开始*/
.itcast {
  margin-top: 22px;
}
.itcast h3 {
  height: 34px;
  color: #333;
  font-size: 18px;
  font-weight: normal;
  line-height: 34px;
}
.itcast .itcast_pro {
  border: 1px solid #ededed;
  border-left: none;
}
.pro_brand .good_pro {
  width: 226px;
}
.good_pro h4,
.brand_list h4 {
  height: 39px;
  margin: 0 17px;
  border-bottom: 1px dashed #eee;
  font-size: 14px;
  color: #333;
  line-height: 39px;
  text-align: center;
}
.good_pro .keybrod,
.brand_list .keybrod {
  display: block;
  border-bottom: 1px solid #eee;
}
.pro_brand .brand_list {
  width: 405px;
  /*height: 300px;*/
  background: #f7f7f7;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}
.brand_list ul li {
  float: left;
}
.pro_brand .brand_logo {
  width: 152px;
  padding: 10px 0 10px 10px;
}
.brand_logo ul li {
  float: left;
  height: 57px;
  overflow: hidden;
  border-bottom: 1px dashed #dfdfdf;
  line-height: 57px;
}
/*.brand_logo ul li img {
  width: 100%;
}*/
.brand_logo ul li:nth-child(odd) {
  width: 75px;
  border-right: 1px dashed #dfdfdf;
}
.brand_logo ul li:nth-child(odd) img {
  margin-right: 1px;
}
.brand_logo ul li:nth-child(even) {
  width: 76px;
}
.brand_logo ul li:nth-child(1),
.brand_logo ul li:nth-child(2) {
  height: 44px;
  line-height: 44px;
 }
 .brand_logo ul li:nth-child(13),
.brand_logo ul li:nth-child(14) {
  height: 46px;
  border-bottom: none;
  line-height: 46px;
}
/*传智播客有趣区样式部分结束*/


/*产品展示区域样式开始*/
.product {
  margin-top: 20px;
}
.product .product_title {
  padding: 10px 0;
  border-bottom: 2px solid #c7171f;
}
.product_title h3 {
  font-size: 18px;
  font-weight: normal;
  color: #c81724;
}
.product_title ul li {
  float: left;
}
.product_title li.line {
  width: 1px;
  height: 12px;
  background: #999;
  margin: 3px 16px;
}
.product_info .product_info_left {
  width: 209px;
  /*height: 200px;*/
  background: #f9f9f9;
}
.product_info_left .info_left_list {
  padding: 0 12px;
}
.info_left_list ul li {
  float: left;
  width: 86px;
  height: 32px;
  border-bottom: 1px solid #ededed;
  line-height: 32px;
  text-align: center;
}
.info_left_list ul li:nth-child(odd) {
  margin-right: 10px;
}
.product_info_left .info_left_img {
  padding: 17px 0;
}
.product_info .product_info_center {
  width: 329px;
  overflow: hidden;
}
.product_info_center ul {
  width: 987px;
}
.product_info_center ul li {
  float: left;
}
.product_info_right ul li {
  float: left;
  width: 219px;
  border-right: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  /*height: 360px;*/
}
.product_info_right .border_line {
  display: block;
  border-bottom: 1px solid #eee;
}
.product .product_brand {
  margin-top: 20px;
  padding: 13px 0;
  background: #f7f7f7;
  text-align: center;
}
.product_brand ul li {
  float: left;
  width: 119px;
  border-right: 1px dashed #cecece;
}
.product_brand ul li:last-child {
  border-right: none;
}
/*产品展示区域样式结束*/

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习🔥 在这里插入图片描述

STU网页优选

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例企业网站制作

⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
复制链接

扫一扫