模板特点
- 响应式设计: 采用
Viewport设置和弹性布局,能完美适配各种尺寸的手机屏幕。 - 现代化UI: 包含导航栏、轮播图、产品/内容卡片、底部导航等常见模块。
- 可复用性强: 模块化设计,您可以直接复制粘贴并修改内容来创建自己的页面。
- 使用原生技术: 仅使用 HTML, CSS, 和少量原生 JavaScript，无需引入复杂框架,便于学习和部署。
- 图标支持: 使用了流行的 Font Awesome 图标库,让界面更生动。
模块说明
- 顶部导航栏: 包含 Logo、搜索框和用户头像。
- 轮播图: 用于展示重要信息或活动，使用原生 JavaScript 实现自动轮播。
- 快捷入口: 常用功能的图标导航。
- 内容卡片: 用于展示列表信息，如商品、文章等。
- 底部导航: 移动端常见的 Tab 切换导航。
如何使用
- 下载源码: 将下面的完整 HTML 代码复制到一个新的
.html文件中（index.html）。 - : 直接在 HTML 文件中修改文本、图片链接和颜色等。
- 预览效果: 在浏览器中打开该 HTML 文件，然后使用浏览器的“开发者工具”（按 F12）切换到“设备模拟器”模式，即可预览手机端效果,或者直接将文件发送到手机上打开。
完整 HTML 源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">我的移动端网页</title>
<!-- 引入 Font Awesome 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 全局重置和基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 0 15px;
}
/* 1. 顶部导航栏 */
.header {
background-color: #fff;
padding: 10px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 100;
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: #ff6b6b;
}
.search-box {
flex-grow: 1;
margin: 0 15px;
position: relative;
}
.search-box input {
width: 100%;
padding: 8px 35px 8px 15px;
border: 1px solid #ddd;
border-radius: 20px;
font-size: 0.9rem;
outline: none;
}
.search-box i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
color: #999;
}
.user-avatar {
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #4ecdc4;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
/* 2. 轮播图 */
.carousel {
position: relative;
height: 180px;
overflow: hidden;
margin-top: 10px;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease-in-out;
height: 100%;
}
.carousel-item {
min-width: 100%;
height: 100%;
}
.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}
.indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.indicator.active {
background-color: #fff;
}
/* 3. 快捷入口 */
.shortcuts {
display: flex;
justify-content: space-around;
padding: 20px 0;
background-color: #fff;
margin-top: 10px;
}
.shortcut-item {
text-align: center;
cursor: pointer;
}
.shortcut-item i {
font-size: 2rem;
color: #ff6b6b;
margin-bottom: 5px;
}
.shortcut-item span {
font-size: 0.8rem;
color: #666;
}
/* 4. 内容区 */
.content-section {
margin-top: 20px;
background-color: #fff;
padding: 15px 0;
}
.section-title {
padding: 0 15px;
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.section-title a {
color: #999;
font-size: 0.9rem;
text-decoration: none;
}
.card-list {
display: flex;
flex-wrap: wrap;
padding: 0 5px;
}
.card {
width: calc(50% - 10px);
margin: 5px;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.2s;
cursor: pointer;
}
.card:hover {
transform: translateY(-5px);
}
.card-img {
width: 100%;
height: 120px;
object-fit: cover;
}
.card-body {
padding: 10px;
}
.card-title {
font-size: 0.9rem;
font-weight: bold;
margin-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-desc {
font-size: 0.8rem;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 5. 底部导航 */
.footer-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #fff;
box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
display: flex;
justify-content: space-around;
padding: 5px 0;
}
.footer-nav-item {
text-align: center;
cursor: pointer;
flex: 1;
padding: 5px;
}
.footer-nav-item i {
font-size: 1.2rem;
color: #666;
margin-bottom: 3px;
}
.footer-nav-item span {
font-size: 0.7rem;
color: #666;
}
.footer-nav-item.active i,
.footer-nav-item.active span {
color: #ff6b6b;
}
/* 为了防止底部导航遮挡内容，给 body 添加一个 padding-bottom */
body {
padding-bottom: 60px; /* 底部导航高度 */
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="header">
<div class="container">
<div class="header-content">
<div class="logo">LOGO</div>
<div class="search-box">
<input type="text" placeholder="搜索你想要的商品">
<i class="fas fa-search"></i>
</div>
<div class="user-avatar">U</div>
</div>
</div>
</header>
<main>
<!-- 轮播图 -->
<section class="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<img src="https://via.placeholder.com/400x180/ff6b6b/ffffff?text=Banner+1" alt="Banner 1">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/400x180/4ecdc4/ffffff?text=Banner+2" alt="Banner 2">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/400x180/45b7d1/ffffff?text=Banner+3" alt="Banner 3">
</div>
</div>
<div class="carousel-indicators">
<span class="indicator active" data-index="0"></span>
<span class="indicator" data-index="1"></span>
<span class="indicator" data-index="2"></span>
</div>
</section>
<!-- 快捷入口 -->
<section class="shortcuts">
<div class="shortcut-item">
<i class="fas fa-th-large"></i>
<span>分类</span>
</div>
<div class="shortcut-item">
<i class="fas fa-fire"></i>
<span>热卖</span>
</div>
<div class="shortcut-item">
<i class="fas fa-gift"></i>
<span>优惠</span>
</div>
<div class="shortcut-item">
<i class="fas fa-tags"></i>
<span>新品</span>
</div>
<div class="shortcut-item">
<i class="fas fa-crown"></i>
<span>会员</span>
</div>
</section>
<!-- 内容区 -->
<section class="content-section">
<div class="container">
<div class="section-title">
<span>热门推荐</span>
<a href="#">查看更多 <i class="fas fa-chevron-right"></i></a>
</div>
<div class="card-list">
<div class="card">
<img src="https://via.placeholder.com/200x120/ff9ff3/ffffff?text=商品1" alt="商品图片" class="card-img">
<div class="card-body">
<h3 class="card-title">时尚潮流T恤</h3>
<p class="card-desc">舒适纯棉，多色可选，限时特惠</p>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/200x120/54a0ff/ffffff?text=商品2" alt="商品图片" class="card-img">
<div class="card-body">
<h3 class="card-title">智能蓝牙耳机</h3>
<p class="card-desc">高清音质，长续航，降噪功能</p>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/200x120/5f27cd/ffffff?text=商品3" alt="商品图片" class="card-img">
<div class="card-body">
<h3 class="card-title">简约运动水杯</h3>
<p class="card-desc">大容量，保温保冷，便携设计</p>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/200x120/00d2d3/ffffff?text=商品4" alt="商品图片" class="card-img">
<div class="card-body">
<h3 class="card-title">多功能充电宝</h3>
<p class="card-desc">快充技术，20000毫安，安全可靠</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- 底部导航 -->
<nav class="footer-nav">
<div class="footer-nav-item active">
<i class="fas fa-home"></i>
<span>首页</span>
</div>
<div class="footer-nav-item">
<i class="fas fa-th"></i>
<span>分类</span>
</div>
<div class="footer-nav-item">
<i class="fas fa-shopping-cart"></i>
<span>购物车</span>
</div>
<div class="footer-nav-item">
<i class="fas fa-user"></i>
<span>我的</span>
</div>
</nav>
<!-- 轮播图脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const carouselInner = document.querySelector('.carousel-inner');
const indicators = document.querySelectorAll('.indicator');
let currentIndex = 0;
const totalItems = indicators.length;
// 自动轮播
let autoSlideInterval = setInterval(nextSlide, 3000);
function nextSlide() {
currentIndex = (currentIndex + 1) % totalItems;
updateCarousel();
}
function prevSlide() {
currentIndex = (currentIndex - 1 + totalItems) % totalItems;
updateCarousel();
}
function updateCarousel() {
carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`;
// 更新指示器
indicators.forEach((indicator, index) => {
if (index === currentIndex) {
indicator.classList.add('active');
} else {
indicator.classList.remove('active');
}
});
// 重置自动轮播
clearInterval(autoSlideInterval);
autoSlideInterval = setInterval(nextSlide, 3000);
}
// 点击指示器切换
indicators.forEach((indicator, index) => {
indicator.addEventListener('click', function() {
currentIndex = index;
updateCarousel();
});
});
// 触摸滑动支持 (可选)
let startX = 0;
let endX = 0;
carouselInner.addEventListener('touchstart', function(e) {
startX = e.touches[0].clientX;
clearInterval(autoSlideInterval);
});
carouselInner.addEventListener('touchmove', function(e) {
endX = e.touches[0].clientX;
});
carouselInner.addEventListener('touchend', function() {
if (startX - endX > 50) {
nextSlide(); // 向左滑动
} else if (endX - startX > 50) {
prevSlide(); // 向右滑动
} else {
updateCarousel(); // 恢复自动轮播
}
});
});
</script>
</body>
</html>
下载与部署
- 创建文件: 在您的电脑上新建一个文本文档。
- 复制粘贴: 将上面完整的 HTML 代码复制到这个文本文档中。
- 保存文件: 将文件另存为
index.html（或任何你喜欢的名字，但后缀必须是.html）。 - 打开预览:
- 方法一 (电脑): 用 Chrome、Firefox 等浏览器直接打开这个
index.html文件，然后按F12打开开发者工具,点击左上角的手机图标切换到移动设备视图。 - 方法二 (手机): 将
index.html文件通过微信、QQ 等发送到手机上,点击链接或下载后在手机浏览器中打开。
- 方法一 (电脑): 用 Chrome、Firefox 等浏览器直接打开这个
如何进行个性化修改？
- 修改 Logo: 找到
<div class="logo">LOGO</div>，将LOGO替换成你的文字或换成<img>- 修改轮播图: 找到
<img src="..." alt="...">，将src属性中的链接替换成你自己的图片地址。- 修改快捷入口: 修改
<i class="fas fa-th-large"></i>中的fa-th-large为其他 Font Awesome 图标类名，并修改<span>分类</span>中的文字。- 修改商品卡片: 修改
.card内部的<img>、<h3>和<p>标签中的内容。- 修改颜色: 在
<style>标签中，找到类似color: #ff6b6b;或background-color: #fff;的样式进行修改。- 修改底部导航: 修改
.footer-nav-item中的<i>和<span>内容，并可以通过.active类来控制哪个选项是激活状态。 - 修改轮播图: 找到
希望这个模板能帮助到你！
（图片来源网络，侵删）
（图片来源网络，侵删）
