HTML期末作业作业-仿小米商城最新更新(2021-06-16)(HTML+CSS+JavaScript),一个页面。
部分网页源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/fonts.css">
<title>小米商城</title>
</head>
<body>
<!-- 顶部栏 -->
<div class="topBar">
<div class="container">
<!-- 顶部栏由三块组成，列表，购物车以及登录 -->
<!-- 顶部栏的列表区 -->
<div class="topBar-list">
<!-- 每个列表可以分为两部分，一个a标签代表链接以及span标签“|”分隔开 -->
<a href="#">小米商城</a>
<span>|</span>
<a href="#">MIUI</a>
<span>|</span>
<a href="#">loT</a>
<span>|</span>
<a href="#">云服务</a>
<span>|</span>
<a href="#">金融</a>
<span>|</span>
<a href="#">有品</a>
<span>|</span>
<a href="#">小爱开放平台</a>
<span>|</span>
<a href="#">政企服务</a>
<span>|</span>
<a href="#">资质证照</a>
<span>|</span>
</div>
<!-- 顶部栏的购物车区 -->
<div class="shop">
<a href="#">
<i class="iconfont" style="font-size: 14px;"></i>
购物车（0）</a>
</div>
<!-- 顶部栏的登录区 -->
<div class="login">
<a href="#">登录</a>
<span>|</span>
<a href="#">注册</a>
<span>|</span>
<a href="#">消息通知</a>
<span>|</span>
</div>
</div>
</div>
<!-- 导航栏 -->
<div class="header">
<div class="container">
<!-- 导航栏由三块组成，图标，列表，以及搜索框 -->
<!-- 导航栏的图标区 -->
<div class="site-logo">
<a href="#">
<img src="img/logo.png" alt="">
</a>
</div>
<!-- 导航栏的列表区 -->
<div class="site-list">
<ul class="clearfix">
<li class="site-category"><a href="#"><img src="./img/mifen.gif" alt=""></a>
<!-- 侧边栏 -->
<div class="category-list">
<ul>
<li><a href="#">手机 电话卡
<span class="iconfont"></span>
</a>
</li>
<li><a href="#">电视 盒子
<span class="iconfont"></span>
</a>
</li>
<li><a href="#">笔记本 显示器 平板
<span class="iconfont"></span>
</a>
</li>
<li><a href="#">家电 插线板
<span class="iconfont"></span>
</a>
</li>
<li><a href="#">出现 穿戴
<span class="iconfont"></span>
</a>
</li>
<li><a href="#">智能 路由器
<span class="iconfont"></span>
</a>
</li>
<li><a href="#">电源 配件
<span class="iconfont"></span>
</a>
</li>
<li><a href="#">健康 儿童
<span class="iconfont"></span>
</a>
</li>
<li><a href="#">耳机 音箱
<span class="iconfont"></span>
</a>
</li>
<li><a href="#">生活 箱包
<span class="iconfont"></span>
</a>
</li>
</ul>
</div>
</li>
<li><a href="#">小米手机</a></li>
<li><a href="#">红米</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<!-- 导航栏的搜索框 -->
<div class="site-search">
<form action="">
<input type="text" name="search" class="search-text" placeholder="耳机">
<input type="submit" class="search-btn iconfont" value="" style="font-size: 24px;">
</form>
</div>
</div>
</div>
<!-- 主页内容区 -->
<div class="site-content">
<div class="container">
<!-- 轮播图 -->
<div class="site-slider">
<a href="#">
<div id="benner">
<div class="img">
<img src="img/11.jpg" class="imga active">
<img src="img/22.jpg" class="imga">
<img src="img/33.jpg" class="imga">
<img src="img/44.jpg" class="imga">
<img src="img/55.jpg" class="imga">
</div>
<ul class="title">
<li class="nr active"></li>
<li class="nr"></li>
<li class="nr"></li>
<li class="nr"></li>
<li class="nr"></li>
</ul>
</div>
</a>
</div>
<!-- 向导 -->
<div class="content-sub">
<!-- 向导左 -->
<div class="content-channel">
<ul class="channel-list clearfix">
<li><a href="#">
<i class="iconfont"></i>
选购手机
</a></li>
<li><a href="#">
<i class="iconfont"></i>
企业团购
</a></li>
<li><a href="#">
<i class="iconfont"></i>
F码通道
</a></li>
<li><a href="#">
<i class="iconfont"></i>
米粉卡
</a></li>
<li><a href="#">
<i class="iconfont"></i>
以旧换新
</a></li>
<li><a href="#">
<i class="iconfont"></i> </i>
话费充值
</a></li>
</ul>
</div>
<!-- 向导右 -->
<div class="content-list">
<ul class="clearfix">
<li><a href=""><img src="img/image1.jpg"></a></li>
<li><a href=""><img src="img/image2.jpg"></a></li>
<li><a href=""><img src="img/image3.jpg"></a></li>
</ul>
</div>
</div>
</div>
<!-- banner图 -->
<div class="content-banner">
<div class="container">
<a href="#">
<img src="./img/banner.jpg">
</a>
</div>
</div>
</div>
<!-- 内容详情 -->
<div class="content-desc">
<div class="container">
<!-- 上层标题 -->
<div class="box-hd">
<h2>手机</h2>
<div class="more">
<a href="#">查看全部
<i class="iconfont"></i>
</a>
</div>
</div>
<!-- 下层内容 -->
<div class="box-bd">
<div class="row clearfix">
<!-- 内容左边大图 -->
<div class="row-l">
<a href="#">
<img src="./img/iphone.jpg">
</a>
</div>
<!-- 内容右边小图分为两大部分，图片，商品描述 -->
<div class="row-r">
<ul>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure1.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
小米10 青春版 5G
</a>
</h3>
<p class="desc">
50倍潜望式变焦/轻薄5G手机
</p>
<p class="price">
<span class="num">1899</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure2.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
小米10
</a>
</h3>
<p class="desc">
骁龙865/1亿像素相机
</p>
<p class="price">
<span class="num">3799</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure3.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi K30 Pro
</a>
</h3>
<p class="desc">
双模5G、 骁龙865、 弹出全面屏
</p>
<p class="price">
<span class="num">2499</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure4.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi K30 Pro 变焦版
</a>
</h3>
<p class="desc">
双模5G、 骁龙865、 弹出全面屏
</p>
<p class="price">
<span class="num">3799</span>元
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure5.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
小米10 Pro
</a>
</h3>
<p class="desc">
骁龙865/50倍变焦
</p>
<p class="price">
<span class="num">4999</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure6.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi K30
</a>
</h3>
<p class="desc">
120 Hz流速屏、 全速热爱
</p>
<p class="price">
<span class="num">1399</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure7.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi K30 5G
</a>
</h3>
<p class="desc">
双模5G、 120Hz流速屏
</p>
<p class="price">
<span class="num">1899</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure8.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi 8
</a>
</h3>
<p class="desc">
5000mAh超长续航
</p>
<p class="price">
<span class="num">799</span>元
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<!-- 上层标题 -->
<div class="box-hd">
<h2>电视</h2>
<div class="more">
<a href="#">查看全部
<i class="iconfont"></i>
</a>
</div>
</div>
<!-- 下层内容 -->
<div class="box-bd">
<div class="row clearfix">
<!-- 内容左边大图 -->
<div class="row-l">
<a href="#">
<img src="./img/1.png">
</a>
</div>
<!-- 内容右边小图分为两大部分，图片，商品描述 -->
<div class="row-r">
<ul>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure1.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
小米10 青春版 5G
</a>
</h3>
<p class="desc">
50倍潜望式变焦/轻薄5G手机
</p>
<p class="price">
<span class="num">1899</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure2.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
小米10
</a>
</h3>
<p class="desc">
骁龙865/1亿像素相机
</p>
<p class="price">
<span class="num">3799</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure3.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi K30 Pro
</a>
</h3>
<p class="desc">
双模5G、 骁龙865、 弹出全面屏
</p>
<p class="price">
<span class="num">2499</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure4.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi K30 Pro 变焦版
</a>
</h3>
<p class="desc">
双模5G、 骁龙865、 弹出全面屏
</p>
<p class="price">
<span class="num">3799</span>元
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure5.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
小米10 Pro
</a>
</h3>
<p class="desc">
骁龙865/50倍变焦
</p>
<p class="price">
<span class="num">4999</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure6.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi K30
</a>
</h3>
<p class="desc">
120 Hz流速屏、 全速热爱
</p>
<p class="price">
<span class="num">1399</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure7.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi K30 5G
</a>
</h3>
<p class="desc">
双模5G、 120Hz流速屏
</p>
<p class="price">
<span class="num">1899</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure8.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi 8
</a>
</h3>
<p class="desc">
5000mAh超长续航
</p>
<p class="price">
<span class="num">799</span>元
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<!-- 上层标题 -->
<div class="box-hd">
<h2>家电</h2>
<div class="more">
<a href="#">查看全部
<i class="iconfont"></i>
</a>
</div>
</div>
<!-- 下层内容 -->
<div class="box-bd">
<div class="row clearfix">
<!-- 内容左边大图 -->
<div class="row-l">
<a href="#">
<img src="./img/2.png">
</a>
</div>
<!-- 内容右边小图分为两大部分，图片，商品描述 -->
<div class="row-r">
<ul>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure1.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
小米10 青春版 5G
</a>
</h3>
<p class="desc">
50倍潜望式变焦/轻薄5G手机
</p>
<p class="price">
<span class="num">1899</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure2.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
小米10
</a>
</h3>
<p class="desc">
骁龙865/1亿像素相机
</p>
<p class="price">
<span class="num">3799</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure3.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi K30 Pro
</a>
</h3>
<p class="desc">
双模5G、 骁龙865、 弹出全面屏
</p>
<p class="price">
<span class="num">2499</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure4.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi K30 Pro 变焦版
</a>
</h3>
<p class="desc">
双模5G、 骁龙865、 弹出全面屏
</p>
<p class="price">
<span class="num">3799</span>元
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure5.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
小米10 Pro
</a>
</h3>
<p class="desc">
骁龙865/50倍变焦
</p>
<p class="price">
<span class="num">4999</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure6.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi K30
</a>
</h3>
<p class="desc">
120 Hz流速屏、 全速热爱
</p>
<p class="price">
<span class="num">1399</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure7.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi K30 5G
</a>
</h3>
<p class="desc">
双模5G、 120Hz流速屏
</p>
<p class="price">
<span class="num">1899</span>元起
</p>
</li>
<li>
<!-- 图片区 -->
<div class="figure">
<a href="#">
<img src="./img/figure8.jpg">
</a>
</div>
<!-- 商品描述 -->
<h3 class="title">
<a href="#">
Redmi 8
</a>
</h3>
<p class="desc">
5000mAh超长续航
</p>
<p class="price">
<span class="num">799</span>元
</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 脚部 -->
<div class="footer">
<div class="container">
<!-- 脚部一共分为两部分，上部分的服务以及其他小字 -->
<div class="footer-service">
<ul class="clearfix">
<li class="first">
<a href="#">
<i class="iconfont"></i>
预约维修服务
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
7天无理由退货
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
15天免费换货
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
满99元包邮
</a>
</li>
<li>
<a href="#">
<i class="iconfont"></i>
520余家售后网点
</a>
</li>
</ul>
</div>
<div class="footer-links clearfix">
<dl class="col-links">
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
<dl class="col-links">
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自助服务</dd>
<dd>相关下载</dd>
</dl>
<dl class="col-links">
<dt>线下门店</dt>
<dd>小米之家</dd>
<dd>服务网点</dd>
<dd>授权体验店</dd>
</dl>
<dl class="col-links">
<dt>关于小米</dt>
<dd>了解小米</dd>
<dd>加入小米</dd>
<dd>投资者关系</dd>
</dl>
<dl class="col-links">
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
<dl class="col-links">
<dt>特色服务</dt>
<dd>F码通道</dd>
<dd>礼物码</dd>
<dd>防伪查询</dd>
</dl>
<div class="col-contact">
<p class="phone">400-100-5678</p>
<p>8:00-18:00（仅收市话费）</p>
<a href="#">
<i class="iconfont"></i>
人工客服
</a>
</div>
</div>
</div>
</div>
</body>
<script src="./js/index.js"></script>
</html>部分网页截图
扫一扫
6505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
