<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="icon" href="images/favicon.ico">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/global.css">
<link rel="stylesheet" href="./css/mi.css">
<script src="./js/style.js"></script>
</head>
<body>
<!-- 头部导航栏 -->
<div class="header">
<div class="wrap clearfix">
<!-- 导航栏左侧 -->
<ul class="header-left">
<li>
<a href="#">小米商城</a><span>|</span></li>
<li>
<a href="#">MIUI</a><span>|</span></li>
<li>
<a href="#">loT</a><span>|</span></li>
<li>
<a href="#">云服务</a><span>|</span></li>
<li>
<a href="#">小爱开放平台</a><span>|</span></li>
<li>
<a href="#">金融</a><span>|</span></li>
<li>
<a href="#">有品</a><span>|</span></li>
<li>
<a href="#">政企服务</a><span>|</span></li>
<li>
<a href="#">SelectLocation</a>
</ul>
<!-- 购物车 -->
<div class="shopping">
<a href="#">
<i class="fa fa-shopping-cart"></i> 购物车 (0)
</a>
<div class="shopping-list">
<span>购物车中还没有商品,赶紧选购吧!</span>
</div>
</div>
<!-- 导航栏右侧 -->
<ul class="header-right">
<li>
<a href="#">登录</a><span>|</span></li>
<li>
<a href="#">注册</a><span>|</span></li>
<li>
<a href="#">消息通知</a>
</li>
</ul>
</div>
</div>
<!-- 顶部品牌列表 -->
<div class="nav">
<div class="wrap">
<div class="nav-left">
<a href="#">
<img src="imgs/footlogo.png">
</a>
</div>
<div class="nav-center">
<ul>
<a href="#"><img style="margin-top:16px ; float: left;" src="imgs/logoAD.gif"></a>
<li class="open">
<a href="#">小米手机</a>
</li>
<li class="open">
<a href="#">红米手机</a>
</li>
<li class="open">
<a href="#">电视</a>
</li>
<li class="open">
<a href="#">笔记本</a>
</li>
<li class="open">
<a href="#">盒子</a>
</li>
<li class="open">
<a href="#">新品</a>
</li>
<li class="router open">
<a href="#">路由器</a>
</li>
<li>
<a href="#">智能硬件</a>
</li>
<li>
<a href="#">服务</a>
</li>
<li>
<a href="#">社区</a>
</li>
<div class="navMenuList">
<div class="nav-center-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="nav-img-box">
<img src="imgs/phone/phone1.png">
<div>
<p>小米8</p>
<p>2499元起</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="imgs/phone/phone10.png">
<div>
<p>小米8 SE</p>
<p>1799元起</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="imgs/phone/phone11.png">
<div>
<p>小米MIX 2S</p>
<p>3299元起</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="imgs/phone/phone13.png">
<div>
<p>小米MIX 2</p>
<p>2599元起</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="imgs/phone/phone14.png">
<div>
<p>小米6X</p>
<p>1399元起</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="imgs/phone/phone3.png">
<div>
<p>小米 MIX 2</p>
<p>1399元起</p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-center-list conceal">
<div class="wrap">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<div class="nav-center-list televisionBar conceal">
<div class="wrap">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<div class="nav-center-list notebook conceal">
<div class="wrap">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<div class="nav-center-list conceal">
<div class="wrap">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<div class="nav-center-list homeMachine conceal">
<div class="wrap">
<ul>
<li>
</li>
<li>
<a href="#">
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<div class="nav-center-list conceal">
<div class="wrap">
<ul>
<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>
</div>
</ul>
</div>
<div class="nav-right">
<input id="sear" type="text" placeholder="手机">
<button><i class="fa fa-search"></i></button>
<div class="search-list">
<ul>
<a href="#">
<li>手机</li>
</a>
<a href="#">
<li>笔记本</li>
</a>
<a href="#">
<li>洗衣机</li>
</a>
<a href="#">
<li>台灯</li>
</a>
<a href="#">
<li>路由器</li>
</a>
<a href="#">
<li>插座</li>
</a>
<a href="#">
<li>灯</li>
</a>
<a href="#">
<li>扫地机器人</li>
</a>
</ul>
</div>
</div>
</div>
</div>
<!-- 轮播图 -->
<div class="banner">
<div class="wrap">
<div class="banner-box">
<div class="slideshow">
<ul class="slideshow-img-wrapper clearfix">
<li class="slideItem slideActive">
<a href="javascript:;">
<img src="./imgs/bigAD1.jpg">
</a>
</li>
<li class="slideItem">
<a href="javascript:;">
<img src="./imgs/mi.jpg">
</a>
</li>
<li class="slideItem">
<a href="javascript:;">
<img src="./imgs/midAD1.jpg">
</a>
</li>
<li class="slideItem">
<a href="javascript:;">
<img src="./imgs/midAD2.jpg">
</a
免费小白可随时下载,html写的小米商城前端页面
需积分: 0 10 浏览量
更新于2022-12-09
收藏 7.67MB RAR 举报
【HTML5】
HTML5是超文本标记语言的最新版本,它在HTML4的基础上增加了许多新的功能和元素,旨在提高网页的互动性、可访问性和兼容性。在"基于HTML的小米商城前端页面"中,HTML5可能用到了以下特性:
1. **语义化标签**:如<header>、<nav>、<section>、<article>、<aside>和<footer>等,它们有助于搜索引擎优化和提高页面结构清晰度。
2. **离线存储**:通过<localStorage>和<sessionStorage>,可以在用户浏览器中存储数据,实现离线浏览或数据缓存。
3. **表单控制增强**:新增了更多的输入类型,如color、date、range等,以及placeholder属性,提供更好的用户体验。
4. **多媒体支持**:原生支持<audio>和<video>标签,无需Flash等插件即可播放音频和视频。
5. **Canvas绘图**:通过JavaScript操作Canvas元素,可以实现动态图形和动画效果。
6. **SVG矢量图**:支持插入SVG图像,提供高质量的图形显示,且可缩放不失真。
【CSS】
CSS(层叠样式表)用于美化HTML页面的外观。在这个项目中,可能应用了以下CSS技术:
1. **响应式布局**:使用媒体查询@media,确保页面在不同设备和屏幕尺寸上都能正常显示。
2. **Flexbox布局**:利用display:flex和相关的属性(justify-content, align-items等),实现灵活的容器布局。
3. **Grid布局**:CSS Grid布局允许创建二维网格系统,使得页面元素布局更加精确和高效。
4. **动画与过渡**:通过transition和animation属性,实现元素的平滑过渡和动画效果。
5. **伪类和伪元素**:如:hover、:active、:focus等,增加交互反馈;::before和::after用于添加额外内容。
6. **CSS预处理器**:如Sass或Less,提供了变量、嵌套规则和函数等功能,提高代码的可维护性。
【JavaScript】
JavaScript作为前端开发的核心语言,可能在项目中起到了以下作用:
1. **DOM操作**:通过JavaScript操作Document Object Model(DOM),动态修改页面内容。
2. **事件处理**:监听用户交互,如点击、滚动等,响应相应事件并执行相应功能。
3. **AJAX异步通信**:实现页面无刷新的数据加载,提升用户体验。
4. **表单验证**:通过JavaScript进行客户端验证,提高表单提交的准确性。
5. **函数封装和模块化**:使用函数和模块化技术,使代码更易于管理和复用。
6. **Promise和async/await**:处理异步操作,提高代码可读性和可维护性。
7. **第三方库和框架**:如jQuery、Vue.js、React.js等,简化开发流程,提供丰富的功能支持。
通过以上分析,"基于HTML的小米商城前端页面"项目涵盖了Web前端开发的基础技术,包括HTML5的新特性、CSS的布局与美化手段以及JavaScript的交互实现,是学习和实践前端开发的优秀实例。这个项目可以作为学生的大作业或课程设计,帮助他们提升实际操作技能,并对网页开发有更深入的理解。

归零嗞
- 粉丝: 4
最新资源
- 开题答辩PPT模板实战版
- (源码)基于Spring Boot框架的在线外卖系统.zip
- 大学信号与系统英文版课后答案
- (源码)基于Java Spring框架的学生公寓管理系统.zip
- (源码)基于SSM框架的微信小程序投票评选管理系统.zip
- (源码)基于Java和Spring框架的多角色学生管理系统.zip
- (源码)基于Spring Boot框架的自媒体社区平台.zip
- (源码)基于Spring和Vue的校园体育赛事管理系统.zip
- (源码)基于SSM框架的蛋糕商城系统.zip
- (源码)基于Spring Boot框架的考研信息查询系统.zip
- (源码)基于Java和Spring Boot的自习室预订系统.zip
- (源码)基于Java和SSM框架的个性化影片推荐系统.zip
- 基于React构建Netflix视频网站教程
- 基于单周期MIPS指令集的CPU设计方案
- (源码)基于Spring Boot框架的订餐小程序后端系统.zip
- (源码)基于Java和SSM框架的汽车在线销售系统.zip