简介：前端领域创作者。扫码或搜索添加文末微信「耀南」：🍗 回复 ”网站模板“，免费送网站模板！
欢迎点赞 👍 收藏 ⭐留言 📝 私信📄
❤ 【小程序模板/PC登录页模板/GPT开源/ 分布式架构系统】
❤ 【web前端静态网页设计/小程序前端成品项目——🔥🔥移动成品项目精品实战案例】
一、网页效果🌌
二、内容简介🧩
通过对Web知识内容的了解，我们掌握了HTML、CSS和JavaScript的基本知识以及利用它们实现一些简单的应用。
接下来我们要使用这些知识实现一个简单的网页设计，利用HTML的a标签做文本内容跳转以及超链接的应用，CSS设计内容样式和图片、动画、视频的大小位置格式，JavaScript实现轮播图效果等。
三、网站介绍📚
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
四、前端介绍🔗：
前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。
前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升。
五、目录结构📂
六、代码💒
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Pod Talk - Free Bootstrap 5 CSS Template</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<!-- CSS FILES -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Sono:wght@200;300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-icons.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link href="css/templatemo-pod-talk.css" rel="stylesheet">
</head>
<body>
<main>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand me-lg-5 me-0" href="index.html">
<img src="images/pod-talk-logo.png" class="logo-image img-fluid" alt="templates">
</a>
<form action="#" method="get" class="custom-form search-form flex-fill me-3" role="search">
<div class="input-group input-group-lg">
<input name="search" type="search" class="form-control" id="search" placeholder="Search Podcast" aria-label="Search">
<button type="submit" class="form-control" id="submit">
<i class="bi-search"></i>
</button>
</div>
</form>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarLightDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pages</a>
<ul class="dropdown-menu dropdown-menu-light" aria-labelledby="navbarLightDropdownMenuLink">
<li><a class="dropdown-item" href="listing-page.html">Listing Page</a></li>
<li><a class="dropdown-item" href="detail-page.html">Detail Page</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
<div class="ms-4">
<a href="#section_3" class="btn custom-btn custom-border-btn smoothscroll">Get started</a>
</div>
</div>
</div>
</nav>
<section class="hero-section">
<div class="container">
<div class="row">
<div class="col-lg-12 col-12">
<div class="text-center mb-5 pb-2">
<h1 class="text-white">Listen to Pod Talk</h1>
<p class="text-white">Listen it everywhere. Explore your fav podcasts.</p>
<a href="#section_2" class="btn custom-btn smoothscroll mt-3">Start listening</a>
</div>
<div class="owl-carousel owl-theme">
<div class="owl-carousel-info-wrap item">
<img src="images/profile/smiling-business-woman-with-folded-hands-against-white-wall-toothy-smile-crossed-arms.jpg" class="owl-carousel-image img-fluid" alt="">
<div class="owl-carousel-info">
<h4 class="mb-2">
Candice
<img src="images/verified.png" class="owl-carousel-verified-image img-fluid" alt="">
</h4>
<span class="badge">Storytelling</span>
<span class="badge">Business</span>
</div>
<div class="social-share">
<ul class="social-icon">
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-twitter"></a>
</li>
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-facebook"></a>
</li>
</ul>
</div>
</div>
<div class="owl-carousel-info-wrap item">
<img src="images/profile/handsome-asian-man-listening-music-through-headphones.jpg" class="owl-carousel-image img-fluid" alt="">
<div class="owl-carousel-info">
<h4 class="mb-2">
William
<img src="images/verified.png" class="owl-carousel-verified-image img-fluid" alt="">
</h4>
<span class="badge">Creative</span>
<span class="badge">Design</span>
</div>
<div class="social-share">
<ul class="social-icon">
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-twitter"></a>
</li>
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-facebook"></a>
</li>
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-pinterest"></a>
</li>
</ul>
</div>
</div>
<div class="owl-carousel-info-wrap item">
<img src="images/profile/cute-smiling-woman-outdoor-portrait.jpg" class="owl-carousel-image img-fluid" alt="">
<div class="owl-carousel-info">
<h4 class="mb-2">Taylor</h4>
<span class="badge">Modeling</span>
<span class="badge">Fashion</span>
</div>
<div class="social-share">
<ul class="social-icon">
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-twitter"></a>
</li>
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-facebook"></a>
</li>
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-pinterest"></a>
</li>
</ul>
</div>
</div>
<div class="owl-carousel-info-wrap item">
<img src="images/profile/man-portrait.jpg" class="owl-carousel-image img-fluid" alt="">
<div class="owl-carousel-info">
<h4 class="mb-2">Nick</h4>
<span class="badge">Acting</span>
</div>
<div class="social-share">
<ul class="social-icon">
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-instagram"></a>
</li>
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-youtube"></a>
</li>
</ul>
</div>
</div>
<div class="owl-carousel-info-wrap item">
<img src="images/profile/woman-posing-black-dress-medium-shot.jpg" class="owl-carousel-image img-fluid" alt="">
<div class="owl-carousel-info">
<h4 class="mb-2">
Elsa
<img src="images/verified.png" class="owl-carousel-verified-image img-fluid" alt="">
</h4>
<span class="badge">Influencer</span>
</div>
<div class="social-share">
<ul class="social-icon">
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-instagram"></a>
</li>
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-youtube"></a>
</li>
</ul>
</div>
</div>
<div class="owl-carousel-info-wrap item">
<img src="images/profile/smart-attractive-asian-glasses-male-standing-smile-with-freshness-joyful-casual-blue-shirt-portrait-white-background.jpg" class="owl-carousel-image img-fluid" alt="">
<div class="owl-carousel-info">
<h4 class="mb-2">Chan</h4>
<span class="badge">Education</span>
</div>
<div class="social-share">
<ul class="social-icon">
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-linkedin"></a>
</li>
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-whatsapp"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="latest-podcast-section section-padding pb-0" id="section_2">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12 col-12">
<div class="section-title-wrap mb-5">
<h4 class="section-title">Lastest episodes</h4>
</div>
</div>
<div class="col-lg-6 col-12 mb-4 mb-lg-0">
<div class="custom-block d-flex">
<div class="">
<div class="custom-block-icon-wrap">
<div class="section-overlay"></div>
<a href="detail-page.html" class="custom-block-image-wrap">
<img src="images/podcast/11683425_4790593.jpg" class="custom-block-image img-fluid" alt="">
<a href="#" class="custom-block-icon">
<i class="bi-play-fill"></i>
</a>
</a>
</div>
<div class="mt-2">
<a href="#" class="btn custom-btn">
Subscribe
</a>
</div>
</div>
<div class="custom-block-info">
<div class="custom-block-top d-flex mb-1">
<small class="me-4">
<i class="bi-clock-fill custom-icon"></i>
50 Minutes
</small>
<small>Episode <span class="badge">15</span></small>
</div>
<h5 class="mb-2">
<a href="detail-page.html">
Modern Vintage
</a>
</h5>
<div class="profile-block d-flex">
<img src="images/profile/woman-posing-black-dress-medium-shot.jpg" class="profile-block-image img-fluid" alt="">
<p>
Elsa
<img src="images/verified.png" class="verified-image img-fluid" alt="">
<strong>Influencer</strong></p>
</div>
<p class="mb-0">Lorem Ipsum dolor sit amet consectetur</p>
<div class="custom-block-bottom d-flex justify-content-between mt-3">
<a href="#" class="bi-headphones me-1">
<span>120k</span>
</a>
<a href="#" class="bi-heart me-1">
<span>42.5k</span>
</a>
<a href="#" class="bi-chat me-1">
<span>11k</span>
</a>
<a href="#" class="bi-download">
<span>50k</span>
</a>
</div>
</div>
<div class="d-flex flex-column ms-auto">
<a href="#" class="badge ms-auto">
<i class="bi-heart"></i>
</a>
<a href="#" class="badge ms-auto">
<i class="bi-bookmark"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="custom-block d-flex">
<div class="">
<div class="custom-block-icon-wrap">
<div class="section-overlay"></div>
<a href="detail-page.html" class="custom-block-image-wrap">
<img src="images/podcast/12577967_02.jpg" class="custom-block-image img-fluid" alt="">
<a href="#" class="custom-block-icon">
<i class="bi-play-fill"></i>
</a>
</a>
</div>
<div class="mt-2">
<a href="#" class="btn custom-btn">
Subscribe
</a>
</div>
</div>
<div class="custom-block-info">
<div class="custom-block-top d-flex mb-1">
<small class="me-4">
<i class="bi-clock-fill custom-icon"></i>
15 Minutes
</small>
<small>Episode <span class="badge">45</span></small>
</div>
<h5 class="mb-2">
<a href="detail-page.html">
Daily Talk
</a>
</h5>
<div class="profile-block d-flex">
<img src="images/profile/handsome-asian-man-listening-music-through-headphones.jpg" class="profile-block-image img-fluid" alt="">
<p>William
<strong>Vlogger</strong></p>
</div>
<p class="mb-0">Lorem Ipsum dolor sit amet consectetur</p>
<div class="custom-block-bottom d-flex justify-content-between mt-3">
<a href="#" class="bi-headphones me-1">
<span>140k</span>
</a>
<a href="#" class="bi-heart me-1">
<span>22.4k</span>
</a>
<a href="#" class="bi-chat me-1">
<span>16k</span>
</a>
<a href="#" class="bi-download">
<span>62k</span>
</a>
</div>
</div>
<div class="d-flex flex-column ms-auto">
<a href="#" class="badge ms-auto">
<i class="bi-heart"></i>
</a>
<a href="#" class="badge ms-auto">
<i class="bi-bookmark"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="topics-section section-padding pb-0" id="section_3">
<div class="container">
<div class="row">
<div class="col-lg-12 col-12">
<div class="section-title-wrap mb-5">
<h4 class="section-title">Topics</h4>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0">
<div class="custom-block custom-block-overlay">
<a href="detail-page.html" class="custom-block-image-wrap">
<img src="images/topics/physician-consulting-his-patient-clinic.jpg" class="custom-block-image img-fluid" alt="">
</a>
<div class="custom-block-info custom-block-overlay-info">
<h5 class="mb-1">
<a href="listing-page.html">
Productivity
</a>
</h5>
<p class="badge mb-0">50 Episodes</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0">
<div class="custom-block custom-block-overlay">
<a href="detail-page.html" class="custom-block-image-wrap">
<img src="images/topics/repairman-doing-air-conditioner-service.jpg" class="custom-block-image img-fluid" alt="">
</a>
<div class="custom-block-info custom-block-overlay-info">
<h5 class="mb-1">
<a href="listing-page.html">
Technician
</a>
</h5>
<p class="badge mb-0">12 Episodes</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0">
<div class="custom-block custom-block-overlay">
<a href="detail-page.html" class="custom-block-image-wrap">
<img src="images/topics/woman-practicing-yoga-mat-home.jpg" class="custom-block-image img-fluid" alt="">
</a>
<div class="custom-block-info custom-block-overlay-info">
<h5 class="mb-1">
<a href="listing-page.html">
Mindfullness
</a>
</h5>
<p class="badge mb-0">35 Episodes</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0">
<div class="custom-block custom-block-overlay">
<a href="detail-page.html" class="custom-block-image-wrap">
<img src="images/topics/delicious-meal-with-sambal-arrangement.jpg" class="custom-block-image img-fluid" alt="">
</a>
<div class="custom-block-info custom-block-overlay-info">
<h5 class="mb-1">
<a href="listing-page.html">
Cooking
</a>
</h5>
<p class="badge mb-0">12 Episodes</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="trending-podcast-section section-padding">
<div class="container">
<div class="row">
<div class="col-lg-12 col-12">
<div class="section-title-wrap mb-5">
<h4 class="section-title">Trending episodes</h4>
</div>
</div>
<div class="col-lg-4 col-12 mb-4 mb-lg-0">
<div class="custom-block custom-block-full">
<div class="custom-block-image-wrap">
<a href="detail-page.html">
<img src="images/podcast/27376480_7326766.jpg" class="custom-block-image img-fluid" alt="">
</a>
</div>
<div class="custom-block-info">
<h5 class="mb-2">
<a href="detail-page.html">
Vintage Show
</a>
</h5>
<div class="profile-block d-flex">
<img src="images/profile/woman-posing-black-dress-medium-shot.jpg" class="profile-block-image img-fluid" alt="">
<p>Elsa
<strong>Influencer</strong></p>
</div>
<p class="mb-0">Lorem Ipsum dolor sit amet consectetur</p>
<div class="custom-block-bottom d-flex justify-content-between mt-3">
<a href="#" class="bi-headphones me-1">
<span>100k</span>
</a>
<a href="#" class="bi-heart me-1">
<span>2.5k</span>
</a>
<a href="#" class="bi-chat me-1">
<span>924k</span>
</a>
</div>
</div>
<div class="social-share d-flex flex-column ms-auto">
<a href="#" class="badge ms-auto">
<i class="bi-heart"></i>
</a>
<a href="#" class="badge ms-auto">
<i class="bi-bookmark"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-12 mb-4 mb-lg-0">
<div class="custom-block custom-block-full">
<div class="custom-block-image-wrap">
<a href="detail-page.html">
<img src="images/podcast/27670664_7369753.jpg" class="custom-block-image img-fluid" alt="">
</a>
</div>
<div class="custom-block-info">
<h5 class="mb-2">
<a href="detail-page.html">
Vintage Show
</a>
</h5>
<div class="profile-block d-flex">
<img src="images/profile/cute-smiling-woman-outdoor-portrait.jpg" class="profile-block-image img-fluid" alt="">
<p>
Taylor
<img src="images/verified.png" class="verified-image img-fluid" alt="">
<strong>Creator</strong>
</p>
</div>
<p class="mb-0">Lorem Ipsum dolor sit amet consectetur</p>
<div class="custom-block-bottom d-flex justify-content-between mt-3">
<a href="#" class="bi-headphones me-1">
<span>100k</span>
</a>
<a href="#" class="bi-heart me-1">
<span>2.5k</span>
</a>
<a href="#" class="bi-chat me-1">
<span>924k</span>
</a>
</div>
</div>
<div class="social-share d-flex flex-column ms-auto">
<a href="#" class="badge ms-auto">
<i class="bi-heart"></i>
</a>
<a href="#" class="badge ms-auto">
<i class="bi-bookmark"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="custom-block custom-block-full">
<div class="custom-block-image-wrap">
<a href="detail-page.html">
<img src="images/podcast/12577967_02.jpg" class="custom-block-image img-fluid" alt="">
</a>
</div>
<div class="custom-block-info">
<h5 class="mb-2">
<a href="detail-page.html">
Daily Talk
</a>
</h5>
<div class="profile-block d-flex">
<img src="images/profile/handsome-asian-man-listening-music-through-headphones.jpg" class="profile-block-image img-fluid" alt="">
<p>
William
<img src="images/verified.png" class="verified-image img-fluid" alt="">
<strong>Vlogger</strong></p>
</div>
<p class="mb-0">Lorem Ipsum dolor sit amet consectetur</p>
<div class="custom-block-bottom d-flex justify-content-between mt-3">
<a href="#" class="bi-headphones me-1">
<span>100k</span>
</a>
<a href="#" class="bi-heart me-1">
<span>2.5k</span>
</a>
<a href="#" class="bi-chat me-1">
<span>924k</span>
</a>
</div>
</div>
<div class="social-share d-flex flex-column ms-auto">
<a href="#" class="badge ms-auto">
<i class="bi-heart"></i>
</a>
<a href="#" class="badge ms-auto">
<i class="bi-bookmark"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-lg-6 col-12 mb-5 mb-lg-0">
<div class="subscribe-form-wrap">
<h6>Subscribe. Every weekly.</h6>
<form class="custom-form subscribe-form" action="#" method="get" role="form">
<input type="email" name="subscribe-email" id="subscribe-email" pattern="[^ @]*@[^ @]*" class="form-control" placeholder="Email Address" required="">
<div class="col-lg-12 col-12">
<button type="submit" class="form-control" id="submit">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 mb-4 mb-md-0 mb-lg-0">
<h6 class="site-footer-title mb-3">Contact</h6>
<p class="mb-2"><strong class="d-inline me-2">Phone:</strong> 010-020-0340</p>
<p>
<strong class="d-inline me-2">Email:</strong>
<a href="#">inquiry@pod.co</a>
</p>
</div>
<div class="col-lg-3 col-md-6 col-12">
<h6 class="site-footer-title mb-3">Download Mobile</h6>
<div class="site-footer-thumb mb-4 pb-2">
<div class="d-flex flex-wrap">
<a href="#">
<img src="images/app-store.png" class="me-3 mb-2 mb-lg-0 img-fluid" alt="">
</a>
<a href="#">
<img src="images/play-store.png" class="img-fluid" alt="">
</a>
</div>
</div>
<h6 class="site-footer-title mb-3">Social</h6>
<ul class="social-icon">
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-instagram"></a>
</li>
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-twitter"></a>
</li>
<li class="social-icon-item">
<a href="#" class="social-icon-link bi-whatsapp"></a>
</li>
</ul>
</div>
</div>
</div>
<div class="container pt-5">
<div class="row align-items-center">
<div class="col-lg-2 col-md-3 col-12">
<a class="navbar-brand" href="index.html">
<img src="images/pod-talk-logo.png" class="logo-image img-fluid" alt="templates">
</a>
</div>
<div class="col-lg-7 col-md-9 col-12">
<ul class="site-footer-links">
<li class="site-footer-link-item">
<a href="#" class="site-footer-link">Homepage</a>
</li>
<li class="site-footer-link-item">
<a href="#" class="site-footer-link">Browse episodes</a>
</li>
<li class="site-footer-link-item">
<a href="#" class="site-footer-link">Help Center</a>
</li>
<li class="site-footer-link-item">
<a href="#" class="site-footer-link">Contact Us</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-12">
<p class="copyright-text mb-0">Copyright © 2036 Talk Pod Company
<br><br>
<a target="_blank" href="#" title="网站模板大全">网站模板大全</a></p>
</div>
</div>
</div>
</footer>
<!-- JAVASCRIPT FILES -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
由于代码篇幅过长 已上传到专栏源码里 点击自行下载即可~
不明白的可以留言 随时在~
结束啦🙇：
更多干货🎁
如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!📣以上内容技术相关问题😈欢迎一起交流学习💌嘉vx+18634371151 👇🏻👇🏻👇🏻
902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
