<!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>
<!-- 引入分层的css 文件 -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/banner.css">
<link rel="stylesheet" href="css/content.css">
<link rel="stylesheet" href="css/indexMain.css">
<link rel="stylesheet" href="css/hot-sell.css">
<link rel="stylesheet" href="css/phone.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/copyright.css">
</head>
<body>
<!-- header 区域开始 -->
<div class="header">
<div class="inner-c header-c">
<!-- header 的左侧 -->
<div class="header-left">
<!-- 导航区域 -->
<ul class="nav">
<li><a href="index.html">魅族官网</a></li>
<li><a href="#">魅族商城</a></li>
<li><a href="#">Flyme</a></li>
<li><a href="#">专卖店</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<!-- header 的右侧 -->
<div class="header-right">
<a href="#" class="collect">我的收藏<i></i></a>
<a href="#" class="order">我的订单</a>
<a href="#" class="login">登录</a>
<a href="#" class="register">注册</a>
</div>
</div>
</div>
<!-- header 区域结束 -->
<!-- banner 区域开始 -->
<div class="banner">
<div class="inner-c banner-c">
<!-- logo部分 -->
<h1 class="logo">
<a href="index.html" class="meizu-logo-img">魅族科技</a>
</h1>
<!-- banner-nav部分 -->
<div class="nav">
<ul class="banner-nav">
<li class="phone"><a href="#"></a>PRO手机</li>
<li><a href="index.html"></a>魅蓝手机</li>
<li><a href=""></a>MX手机</li>
<li><a href=""></a>精选配件</li>
<li><a href=""></a>智能硬件</li>
</ul>
</div>
</div>
</div>
<!-- banner 区域结束 -->
<!-- 主要内容 content 区域开始 -->
<div class="content">
<div class="main-content">
<div class="inner-c">
<!-- main 区域 -->
<div class="main">
<div class="aside">
<ul class="classify">
<li>
<h2>全部商品分类</h2>
</li>
<li>
<h2>手机</h2>
</li>
<li>
<h2>智能硬件</h2>
</li>
<li>
<h2> 耳机 / 音箱</h2>
</li>
<li>
<h2> 路由器 / 移动电源</h2>
</li>
<li>
<h2>保护套 / 后盖 / 贴膜</h2>
</li>
<li>
<h2>数据线 / 电源适配器</h2>
</li>
<li>
<h2>周边配件</h2>
</li>
</ul>
</div>
<div class="img-banner">
<ul>
<li><a href="#"><img src="images/banner.jpg" alt=""></a></li>
</ul>
<div class="btn">
<span class="left-btn"></span>
<span class="right-btn"></span>
</div>
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</div>
</div>
</div>
<!-- main 区域结束 -->
<!-- 热卖推荐 区域开始 -->
<div class="inner-c">
<div class="hot-sell">
<div class="short-button">
<a href=""><img src="../meizu/images/1450855246-61162.png" alt=""><p>M码通道</p></a>
<a href=""><img src="../meizu/images/1450855279-64872.png" alt=""><p>以旧换新</p></a>
<a href=""><img src="../meizu/images/1450855198-58056.png" alt=""><p>魅族意外保</p></a>
<a href=""><img src="../meizu/images/1451960447-93534.png" alt=""><p>回购单查询</p></a>
</div>
<a href=""><img src="../meizu/images/1469442560-64371.jpg" alt=""></a>
<a href=""><img src="../meizu/images/Cix_s1fuEgmAc5NwAABEl576SHY123.jpg" alt=""></a>
<a href=""><img src="../meizu/images/CnQOjVfhDa2AKtdyAAAtKjihE5E114.jpg" alt=""></a>
<a href=""><img src="../meizu/images/Cix_s1f66-eAGausAABXAszHWuE990.png" alt=""></a>
</div>
</div>
<!-- 热卖区域结束 -->
<!-- 手机区域开始 -->
<div class="phone">
<div class="inner-c">
<div class="title">
<h2>手机</h2>
<span class="more">更多</span>
</div>
<div class="meilan">
<a href=""><img src="../meizu/images/CnQOjVf6EfOAKlj2AAvhVMfnh40856_180x180.png" alt="魅蓝note3">
<span class="hot">热卖</span>
<p class="name">魅蓝note3</p>
<p class="date">11日-12日 限量开售</p>
<p class="price">￥ 799</p>
</a>
<a href=""><img src="../meizu/images/CnQOjVf8Qm2AGJwmAAf5c4NUNpI085_180x180.png" alt="魅蓝3">
<p class="name">魅蓝3</p>
<p class="date">11日-12日 公开版限量开售</p>
<p class="price">￥ 599</p>
</a>
<a href=""><img src="../meizu/images/Cix_s1f6EZaAMxvjAA2l_exLROk326_180x180.png" alt="魅蓝3s">
<span class="hot">热卖</span>
<p class="name">魅蓝3s</p>
<p class="date">11日-12日 限量开售</p>
<p class="price">￥ 699</p>
</a>
<a href=""><img src="../meizu/images/CnQOjVf4y6iAe-3RAAbqolcyaco939_180x180.png" alt="魅蓝 metal">
<span class="cheap">特惠</span>
<p class="name">魅蓝 metal</p>
<p class="date">领券立减100元</p>
<p class="price">￥ 999</p>
</a>
<a href=""><img src="../meizu/images/CnQOjVffSHOAaRkmAA0Rkx2XjKE222_180x180.png" alt="魅蓝 E">
<span class="hot">热卖</span>
<p class="name">魅蓝 E</p>
<p class="date">全网通 多彩金属机身</p>
<p class="price">￥ 1299</p>
</a>
</div>
</div>
</div>
<!-- 手机区域结束 -->
</div>
<!-- content 区域结束 -->
<!-- footer 区域开始 -->
<div class="footer">
<div class="inner-c">
<div class="service">
<dl>
<dt>帮助说明</dt>
<dd>
<a href="#">支付方式</a>
<a href="#">配送说明</a>
<a href="#">售后服务</a>
<a href="#">付款帮助</a>
</dd>
</dl>
<dl>
<dt>Flyme</dt>
<dd>
<a href="#">开放平台</a>
<a href="#">固件下载</a>
<a href="#">软件商店</a>
<a href="#">查找手机</a>
</dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd>
<a href="#">关于魅族</a>
<a href="#">加入我们</a>
<a href="#">联系我们</a>
<a href="#">法律声明</a>
</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd>
<a href="#">新浪微博</a>
<a href="#">腾讯微博</a>
<a href="#">QQ空间</a
魅族官网主页手机展示内容
需积分: 0 190 浏览量
2024-03-14
11:13:23
上传
评论
收藏 309KB ZIP 举报
meizu.zip （33个子文件） 
meizu css 
indexMain.css 2KB content.css 190B footer.css 2KB phone.css 2KB reset.css 859B header.css 1KB copyright.css 328B hot-sell.css 825B base.css 317B banner.css 829B
index.html 9KB images 
tempsnip2.png 802B footer-copy-1.png 2KB trust-icon.png 2KB
Cix_s1fuEgmAc5NwAABEl576SHY123.jpg 17KB CnQOjVf8Qm2AGJwmAAf5c4NUNpI085_180x180.png 22KB new.png 638B CnQOjVf6EfOAKlj2AAvhVMfnh40856_180x180.png 28KB CnQOjVffSHOAaRkmAA0Rkx2XjKE222_180x180.png 30KB banner.jpg 106KB logo.png 1KB tempsnip.png 349B 1450855246-61162.png 2KB 1450855198-58056.png 2KB gotop-arrow.png 1KB Cix_s1f6EZaAMxvjAA2l_exLROk326_180x180.png 31KB Cix_s1f66-eAGausAABXAszHWuE990.png 22KB CnQOjVf4y6iAe-3RAAbqolcyaco939_180x180.png 17KB 1450855279-64872.png 1KB CnQOjVfhDa2AKtdyAAAtKjihE5E114.jpg 11KB 1469442560-64371.jpg 11KB right.PNG 363B 1451960447-93534.png 2KB资源评论
