HTML+CSS+JavaScript网页设计与制作实例 -Apple商城网页（6个页面）

本文链接：https://blog.youkuaiyun.com/WebDesign_Mu/article/details/144208914

一、网站描述

基于 HTML、CSS 和 JavaScript 等技术的综合应用，实现对Apple商城的仿写。该网站包含八个静态页面，分别是落地页、首页、简介、新闻、产品中心等。

二、网页作品技术

    HTML：用于构建网页的结构和内容，通过标签和属性来定义页面的各个部分。
    CSS：用于美化网页的外观和布局，通过选择器和属性来设置页面的样式。
    JavaScript：用于实现网页的交互效果和动态功能，如表单验证、菜单展开等。
    图片处理：使用图片处理软件对图片进行优化和处理，以提高图片的质量和加载速度。可以调整图片的大小、格式、色彩等参数，使其更适合在网页上显示。
    多媒体元素：使用HTML5的video技术进行播放学校宣传片视频。

三、作品演示

多媒体元素、鼠标悬浮图标动效

超链接跳转、产品中心产品动效

产品类型跳转页面

四、代码目录

五、代码演示

首页页面结构html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./css/style.css">
<title>苹果官网</title>
  <!-- 公众号-木番薯科技-获取源码 -->
</head>
<!-- 首页 -->
<body>
<!-- 头部 导航栏 -->
<div class="header">
    <div class="main">
        <div class="logo">
         <a href="home.html">
            <img src="images/logo.png" height="60">
         </a>
      </div>
        <div class="nav">
            <a href="index.html">首页</a>
            <a href="about.html">简介</a>
            <a href="new.html">新闻</a>
            <a href="product.html">产品中心</a>
        </div>
    </div>
</div>
<!-- 导航栏结束 -->
<div class="dt">
   <img src="images/banner.jpg">
</div>

<div class="about">
   <div class="main">
       <div class="about_jian">
           <h3>苹果公司简介<br><span></span></h3>
           <p>苹果公司（Apple Inc. ）是美国一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·盖瑞·沃兹尼亚克和罗纳德·杰拉尔德·韦恩（Ron Wayne）等人于1976年4月1日创立，并命名为美国苹果电脑公司（Apple Computer Inc.），2007年1月9日更名为苹果公司，总部位于加利福尼亚州的库比蒂诺。</p>
           <a href="about.html">查看更多</a>
       </div>
   </div>
</div>

<div class="main">
    <div class="title">
        <h1>哪款 iPhone 适合你？</h1>
    </div>
    
    <div class="sj">
        <ul>
            <li>
              <em><img src="images/4.jpg"></em>
              <h3>iPhone 13</h3>
              <h6>RMB 5199 起</h6>
              <img src="images/15.jpg">
              <h5>实打实的实力</h5>
              <h4>6.1 或 5.4 英寸</h4>
              <p>OLED 全面屏2</p>
              <img src="images/icon.png"style="padding:25px 0 0 0;" >
              <p>超快的 5G3</p>
              <img src="images/16.jpg" style="padding:25px 0 0 0;">
              <p>A15 仿生芯片
              <br><br></p>
              <img src="images/17.jpg" style="padding:25px 0 0 0;">
              <p>先进的双摄系统
              <br>(超广角、广角)</p>
           </li>
           <li>
              <em><img src="images/1.jpg"></em>
              <h3>iPhone 12 Pro</h3>
              <h6>RMB 8499 起</h6>
              <img src="images/icon_03.jpg">
              <h5>iPhone 巅峰之作。</h5>
              <h4>6.1 英寸或 6.7 英寸</h4>
              <p>OLED 全面屏2</p>
              <img src="images/icon.png" style="padding:25px 0 0 0;">
              <p>5G 蜂窝网络3</p>
              <img src="images/icon1.png" style="padding:25px 0 0 0;">
              <p>A14 仿生芯片
              <br>iPhone 迄今最快的芯片</p>
              <img src="images/icon2.png" style="padding:25px 0 0 0;">
              <p>Pro 级三摄系统
              <br>(超广角、广角、长焦)</p>
           </li>
           
           <li>
              <em><img src="images/2.jpg"></em>
              <h3>iPhone 12</h3>
              <h6>RMB 5499 起</h6>
              <img src="images/icon_05.jpg">
              <h5>实打实的实力。</h5>
              <h4>5.4 英寸或 6.1 英寸</h4>
              <p>OLED 全面屏2</p>
              <img src="images/icon.png" style="padding:25px 0 0 0;">
              <p>5G 蜂窝网络3</p>
              <img src="images/icon1.png" style="padding:25px 0 0 0;">
              <p>A14 仿生芯片
              <br>iPhone 迄今最快的芯片</p>
              <img src="images/icon3.png" style="padding:25px 0 0 0;">
              <p>先进的双摄系统
              <br>(超广角、广角)</p>
           </li>
           
           <li>
              <em><img src="images/3.jpg"></em>
              <h3>iPhone SE</h3>
              <h6>RMB 3299 起</h6>
              <img src="images/icon_07.jpg">
              <h5>称心称手，超值入手。</h5>
              <h4>4.7 英寸</h4>
              <p>LCD 显示屏</p>
              <img src="images/icon6.png" style="padding:25px 0 0 0;">
              <p>4G LTE 蜂窝网络3</p>
              <img src="images/icon4.png" style="padding:25px 0 0 0;">
              <p>A13 仿生芯片
              <br><br></p>
              <img src="images/icon5.png" style="padding:25px 0 0 0;">
              <p>单摄系统
              <br>(广角)</p>
           </li>
        </ul>
    </div>
    
</div>


<div class="hc">
   <h1>在 Apple 购买，<br>好处多多。</h1>
   <p>你可以选择适合自己的付款方式，通过 Apple Trade In 换购计划享受折抵优惠，<br>快速搞定各项设置，还可以和 Specialist 专家沟通交流。</p>
   <h3>iOS 14
这种新感觉，
一点不陌生。</h3>
</div>


<div class="new">
    <div class="main">
        <div class="title">
           <h1>最新消息</h1>
        </div>
        
        <ul>
           <li>
              <a href="new.html">
              <img src="images/x.jpg">
              <h3>Apple 零售店取货服务现已在中国大陆推出</h3>
              <p>2021 年 6 月 30 日</p>
              </a>
           </li>
           <li>
              <a href="new.html">
              <img src="images/x1.jpg">
              <h3>Apple Tower Theatre 现已在洛杉矶市中心开幕</h3>
              <p>2021 年 6 月 24 日</p>
              </a>
           </li>
           <li>
              <a href="new.html">
              <img src="images/x2.jpg">
              <h3>Apple 推出 Today at Apple 创想营，为年轻创...</h3>
              <p>2021 年 6 月 22 日</p>
              </a>
           </li>
        </ul>
        
    </div>
</div>

<div class="footer">
    <div class="main">
       <p>更多选购方式：查找你附近的 Apple Store 零售店及更多门店，或者致电 400-666-8800。</p>
       <p style="border:none;">Copyright © 2021 苹果官网. 保留所有权利。隐私政策 | 使用条款 | 销售政策 | 法律信息 | 网站地图</p>
    </div>
</div>
</body>
</html>