Web开发纯前端实现科技企业官网首页
Posted zstar-_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web开发纯前端实现科技企业官网首页相关的知识，希望对你有一定的参考价值。
前言
本篇博文简单实现一个科技类产品官网的主页，图片素材来自于苹果官网。
相关教程参考自https://www.bilibili.com/video/BV117411n7R1
源代码下载：https://download.csdn.net/download/qq1198768105/85630862
功能概述
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=好程序员web前端学习路线分享纯css绘制各种图形