Web开发纯前端实现科技企业官网首页
Posted zstar_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web开发纯前端实现科技企业官网首页相关的知识，希望对你有一定的参考价值。
前言
本篇博文简单实现一个科技类产品官网的主页，图片素材来自于苹果官网。
相关教程参考自https://www.bilibili.com/video/BV117411n7R1
功能概述
1、 在首页中，包含导航、轮播图、产品展示、特色介绍、产品介绍、用户信息获取和尾部等模块
2、 页面使用伪类实现交互效果
3、 在产品介绍中，有transition过渡效果
4、 使用网格布局(Grid)布局完成页面的自适应
用到的组件库
- Anime:用来实现动画效果
- Glide：实现轮播图效果
- Isotope：实现产品展示中动态展示图片的效果
- scrollReveal：实现滚动下拉时各元素渐入动画效果
- smooth-scroll：实现点击菜单栏平滑滚动到相应模块的效果
视频演示效果
视频中未演示页面自适应效果。
苹果科技官网演示视频
核心代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./static/libs/scrollReveal/scrollreveal.min.js"></script>
<!-- 设置图标 -->
<link rel="icon" href="./static/images/icon.jpg" type="image/x-icon">
<!-- 引入font-awesome依赖 -->
<link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet" />
<link rel="stylesheet" href="./static/libs/glide/glide.core.min.css" />
<link rel="stylesheet" href="./static/libs/glide/glide.theme.min.css" />
<link rel="stylesheet" href="./style.css" />
<title>Apple官网</title>
</head>
<body>
<!-- 网页头部 -->
<header>
<div class="logo">苹果科技官网</div>
<nav>
<a href="#home">首页</a>
<!-- <a href="#about-us">关于我们</a> -->
<a href="#showcases">产品展示</a>
<a href="#service">特色介绍</a>
<a href="#team-intro">产品介绍</a>
<a href="#company-activities">用户信息</a>
<a href="#"><i class="fas fa-search"></i></a>
</nav>
<div class="burger">
<div class="burger-line1"></div>
<div class="burger-line2"></div>
<div class="burger-line3"></div>
</div>
</header>
<div id="home" class="glide">
<!-- 轮播图区域 -->
<div class="glide__track" data-glide-el="track">
<div class="glide__slides">
<!-- 轮播图一 -->
<div class="glide__slide">
<div class="slide-caption left"></div>
<!-- 轮播图阴影遮罩 -->
<div class="backdrop"></div>
<img src="./static/images/phone1.jpg" />
</div>
<!-- 轮播图二 -->
<div class="glide__slide">
<div class="slide-caption left"></div>
<!-- 轮播图阴影遮罩 -->
<div class="backdrop"></div>
<img src="./static/images/phone2.jpg" />
</div>
<!-- 轮播图三 -->
<div class="glide__slide">
<div class="slide-caption left"></div>
<!-- 轮播图阴影遮罩 -->
<div class="backdrop"></div>
<img src="./static/images/phone3.jpg" />
</div>
</div>
<div class="glide__arrows" data-glide-el="controls">
<!-- 轮播图左侧按钮 -->
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">
<i class="fa fa-angle-left"></i>
</button>
<!-- 轮播图右侧按钮 -->
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">
<i class="fa fa-angle-right"></i>
</button>
<!-- 轮播图圆点 -->
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
<button class="glide__bullet" data-glide-dir="=2"></button>
</div>
</div>
</div>
</div>
<div class="content-wrapper">
<!-- 产品展示 -->
<!-- 根据不同的类别进行分组展示 -->
<section id="showcases" class="showcases section-bg">
<h2 class="title1">产品展示</h2>
<div class="filter-btns">
<button class="filter-btn active" data-filter="*">全部</button>
<button class="filter-btn" data-filter=".web">iPhone</button>
<button class="filter-btn" data-filter=".mobile">iPad</button>
<button class="filter-btn" data-filter=".science">mac</button>
</div>
<div class="cases">
<div class="case-item web">
<img src="./static/images/img1.jpg" alt="">
</div>
<div class="case-item web">
<img src="./static/images/img2.jpg" alt="">
</div>
<div class="case-item web">
<img src="./static/images/img3.jpg" alt="">
</div>
<div class="case-item web">
<img src="./static/images/img4.jpg" alt="">
</div>
<div class="case-item mobile">
<img src="./static/images/img6.jpg" alt="">
</div>
<div class="case-item science">
<img src="./static/images/img8.jpg" alt="">
</div>
<div class="case-item web">
<img src="./static/images/img5.jpg" alt="">
</div>
<div class="case-item mobile">
<img src="./static/images/img7.jpg" alt="">
</div>
</div>
</section>
<!-- 特色介绍 -->
<!-- 图标网站 https://www.thinkcmf.com/font/font_awesome/icons.html -->
<section id="service" class="service">
<h2 class="title1">特色介绍</h2>
<p class="intro">
苹果公司是美国的一家电子科技公司
</p>
<div class="services">
<div class="service-item">
<i class="fas fa-star"></i>
<h4 class="service-title">公司规模</h4>
<p class="service-content">
总市值达5600亿美元，位居全球第一。
</p>
</div>
<div class="service-item">
<i class="fas fa-chart-line"></i>
<h4 class="service-title">整合营销</h4>
<p class="service-content">
根据客户提出的需求进行评估，估算出相应的时间与费用。
</p>
</div>
<div class="service-item">
<i class="fas fa-shopping-cart"></i>
<h4 class="service-title">电子商务</h4>
<p class="service-content">
根据企业需求，开发不同的销售渠道，通过网上直销。
</p>
</div>
<div class="service-item">
<i class="fas fa-desktop"></i>
<h4 class="service-title">产品研发</h4>
<p class="service-content">
根据用户需求，完成软硬件产品开发。
</p>
</div>
<div class="service-item">
<i class="fas fa-anchor"></i>
<h4 class="service-title">创新能力</h4>
<p class="service-content">
把握时代的风口，不断打造现象级产品。
</p>
</div>
<div class="service-item">
<i class="fas fa-user-check"></i>
<h4 class="service-title">团队人数</h4>
<p class="service-content">
公司所有全职员工人数累积达240万。
</p>
</div>
</div>
</section>
<!--产品介绍 -->
<section id="team-intro" class="team-intro section-bg">
<h2 class="title1">产品介绍</h2>
<p class="intro">最新产品简介</p>
<div class="activities">
<div class="activity">
<div class="act-image-wrapper">
<img src="./static/images/product1.jpg" alt="">
</div>
<div class="meta">
<p class="data-published">
<i class="far fa-calendar"></i> 2022年6月8日
</p>
<p class="comments">
<i class="far fa-comments"></i> 133
<span>条评论</span>
</p>
</div>
<h2 class="act-title">MacBook Air</h2>
<article>
M2 是新一代 Apple 芯片的开篇之作。它配备 8 核中央处理器，各种日常工作，比如创建文档或演示文稿，都能干脆利落搞定。即使是处理繁重任务，比如用 Xcode 进行开发、在 Logic Pro 中混音，也都不在话下。 M2 配备最多达 10 核图形处理器，图形性能大幅跃升；它的媒体处理引擎，让你可播放和剪辑多达 11 条 4K 视频流和 2 条 8K ProRes 视频流。
</article>
<button class="read-more-btn">阅读更多</button>
</div>
<div class="activity">
<div class="act-image-wrapper">
<img src="./static/images/product2.jpg" alt="">
</div>
<div class="meta">
<p class="data-published">
<i class="far fa-calendar"></i> 2022年6月8日
</p>
<p class="comments">
<i class="far fa-comments"></i> 63
<span>条评论</span>
</p>
</div>
<h2 class="act-title">iPad Air</h2>
<article>
Apple M1 芯片 8 核中央处理器 8 核图形处理器 Apple 神经网络引擎 8GB 内存1200 万像素广角摄像头，ƒ/1.8 光圈 最高可达 5 倍数码变焦 五镜式镜头 Focus Pixels 自动对焦 全景模式 (最高可达 6300 万像素) 智能 HDR 3 拍摄广色域的照片和实况照片 照片地理标记功能 自动图像防抖功能 连拍快照模式 图像拍摄格式：HEIF 和 JPEG。
</article>
<button class="read-more-btn">阅读更多</button>
</div>
<div class="activity">
<div class="act-image-wrapper">
<img src="./static/images/product3.jpg" alt="">
</div>
<div class="meta">
<p class="data-published">
<i class="far fa-calendar"></i> 2022年6月8日
</p>
<p class="comments">
<i class="far fa-comments"></i> 233
<span>条评论</span>
</p>
</div>
<h2 class="act-title">iPhone 13 Pro</h2>
<article>
ProMotion 自适应刷新率技术，最高可达 120Hz HDR 显示 原彩显示 广色域 (P3) 触感触控 2000000:1 对比度 (典型) 1000 尼特最大亮度 (典型); 1200 尼特最大亮度 (HDR) 采用防油渍防指纹涂层 支持多种语言文字同时显示 A15 仿生芯片 全新 6 核中央处理器，具有 2 个性能核心和 4 个能效核心 全新 5 核图形处理器 全新 16 核神经网络引擎。
</article>
<button class="read-more-btn">阅读更多</button>
</div>
</div>
</section>
<!-- 用户信息获取 -->
<section id="company-activities" class="company-activities">
<h2 class="title1">用户信息获取</h2>
<p class="intro">正在寻求帮助？</p>
<div class=以上是关于Web开发纯前端实现科技企业官网首页的主要内容，如果未能解决你的问题，请参考以下文章