HTML期末大作业-小米商城
2024-04-11 11:41:27
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>部分网页截图
HTML期末大作业-小米商城相关推荐
- HTML5期末大作业：网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品 常见网页设计作业题材有 个人. 美食 ...
- HTML期末大作业~仿小米商城网页设计模板(HTML+CSS+JavaScript)
HTML期末大作业~基于HTML+CSS+JavaScript仿小米商城(功能齐全) 关于HTML期末网页制作,大作业A+水平 ~仿小米商城网页作业HTML+CSS+JavaScript实现,共有登录 ...
- HTML5期末大作业：X米网站设计——小米商城手机(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 学生dreamweaver网页设计作业成品
HTML5期末大作业:X米网站设计--小米商城手机(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 学生dreamweaver网页设计作业成品 常见网页设计作业题材有 个人 ...
- 网页设计-仿小米商城-前端期末大作业
网页设计-仿小米商城-前端期末大作业 (点我下载资源) 点我下载资源
- HTML期末大作业 仿小米商城网页设计与制作(HTML+CSS+JavaScript) JavaScript期末大作业 web前端期末大作业 dw静态网页
HTML期末大作业~基于HTML+CSS+JavaScript仿小米商城(功能齐全) 关于HTML期末网页制作,大作业A+水平 ~仿小米商城网页作业HTML+CSS+JavaScript实现,共有登录 ...
- HTML5期末大作业：商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
HTML5期末大作业:商城网站设计--小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码 常见网页设计 ...
- HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码...
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
- HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码
HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...
- HTML5期末大作业：动漫网站设计——迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成
HTML5期末大作业:动漫网站设计--迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成 临近期末, 你还在为 ...
最新文章
- 一文讲解特征工程 | 经典外文PPT及中文解析
- OVS DPDK--介绍（一）
- 微信之父张小龙：产品经理的必备书单(转)
- 怎么将织梦图集模型编辑器改为文章编辑器？
- java中自造类是什么意思_JAVA问题，什么时候需要，Class类型的？
- linux raid配置
- TCC事务补偿机制实现分布式事务控制介绍
- ES6-使用let关键字定义变量
- SLAM Cartographer（4）对象Node
- 四脚轻触开关pcb封装_轻触开关的规格尺寸与型号选择
- 转 Androidpn里的Xmpp的理解(消息推送)
- 计算机中的进制位运算
- WAP网站源代码--WAP新闻(文章)系统调试实战
- 跟踪slab分配堆栈流程的方法（perf、systemtap）
- 关系分析可视化插件-Cytoscape
- 开发工具-Hijson
- Hadoop面试题（一）
- 使用mbedtls库实现ftps协议
- PROFINET的时钟同步（一）
- requested an insecure resource的解决方法