<!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="icon" href="../favicon-90c2e618ff.ico">
<link rel="stylesheet" href="./meizu.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="topbox">
<div class="topbox1">
<div class="logo">
<a href="">
<img src="../微信图片_20220623020124.png" alt="logo">
</a>
</div>
<ul>
<li><a href="" herf="#">手机</a>
<div class="xiala1">
<div class="juzhong">
<ul>
<a href="">
<li>
<img src="../Cgbj0GFD_OWAbnQ-AAnrj3u6JUw104.png@240x240.jpg" alt="">
<span>魅族18X</span>
<em>¥1899</em>
</li>
</a>
<a href="">
<li>
<img src="../魅族18S.png" alt="">
<span>魅族18S</span>
<em>¥2699</em>
</li>
</a>
<a href="">
<li>
<img src="../Cgbj0WFETByAWsR_AAVjlvuU3OQ275.png@240x240.jpg" alt="">
<span>魅族18 S Pro</span>
<em>¥6666</em>
</li>
</a>
<a href="">
<li>
<img src="../Cgbj0WA_TmqASi3IAAs2X6gKi1M053.png@240x240.jpg" alt="">
<span>魅族18</span>
<em>¥6666</em>
</li>
</a>
<a href="">
<li>
<img src="../Cgbj0GA_TnOAHYZ6AApG3wQY6vI268.png@240x240.jpg" alt="">
<span>魅族18 Pro</span>
<em>¥1899</em>
</li>
</a>
<a href="">
<li>
<img src="../Cgbj0F6zwMuANEeWAAw6yQFAJXM097.png@240x240.jpg" alt="">
<span>魅族17</span>
<em>¥6666</em>
</li>
</a>
<a href="">
<li>
<img src="../Cgbj0F6zwUCAZXioAAqyPRV4XK4045.png@240x240.jpg" alt="">
<span>魅族17 Pro</span>
<em>¥6666</em>
</li>
</a>
</ul>
</div>
</div>
</li>
<li>
<a href="" herf="#">声学</a>
<div class="xiala1">
<div class="juzhong">
<ul>
<a href="">
<li>
<img src="../Cgbj0GKGCUaAOBuWAAM7b03i-Xc558.png@240x240.jpg" alt="">
<span>魅蓝 Blus Air 真无线耳机</span>
<em>¥6666</em>
</li>
</a>
<a href="">
<li>
<img src="../Cgbj0WF71CCAb7ysAAYaq1oetKc690.png@240x240.jpg" alt="">
<span>魅蓝 Blus+ 主动降噪耳机</span>
<em>¥6666</em>
</li>
</a>
<a href="">
<li>
<img src="../Cgbj0WE5p9OAS06fAATJ75w3M74692.png@240x240.jpg" alt="">
<span>魅蓝 Blus 主动降噪耳机</span>
<em>¥6666</em>
</li>
</a>
<a href="">
<li>
<img src="../Cgbj0WFNm6CAQWo1AALl7FZKaN4346.png@240x240.jpg" alt="">
<span>魅蓝 HiFi 解码耳放</span>
<em>¥6666</em>
</li>
</a>
<a href="">
<li>
<img src="../Cgbj0WKGCZCAHqYOAAK-tBVe_lM406.png@240x240.jpg" alt="">
<span>魅蓝 LP31 有线耳机</span>
<em>¥6666</em>
</li>
</a>
<a href="">
<li>
<img src="../Cgbj0WKGCXSALP1UAAJ1VUcPSAc234.png@240x240.jpg" alt="">
<span>魅蓝 HiFi 解码耳放 Pro¥129</span>
<em>¥6666</em>
</li>
</a>
<a href="">
<li>
<img src="../Cgbj0GGvMEGAK8VXAAMwbBP63d8563.png@240x240.jpg" alt="">
<span>魅蓝 LP21C 有线耳机</span>
<em>¥6666</em>
</li>
</a>
</ul>
</div>
</div>
</li>
<li>
<a href="" herf="#">配件</a>
<div class="xiala1">
<div class="juzhong">
<ul>
<a href="">
<li>
<img src="../Cgbj0WHMILuAa5VBAARrd6gpl38315.png@240x240.jpg" alt="">
<span>30W GaN Mini 充电器</span>
<em>¥6666</em>
</li>
</a>
<a href="">
<li>
<img src="../Cgbj0GJlJI-AIsXlAAZxzI1nn98234.png@240x240.jpg" alt="">
<span>lifeme 无线领夹麦克风</span>
<em>¥6666</em>
</li>
没有合适的资源?快使用搜索试试~ 我知道了~
本次设计魅族官网主要运用了HTML和CSS,为方便检查代码,style采用link进行引入,总体设计思想采用大盒子包括小盒子进行。多处使用了float: left;/ float: right;进行左/右浮动。多出使用了定位元素position: relative;——position: absolute;使用了多个:hover效果来实现变化。能够巩固熟悉浮动、相对定位,绝对定位、下拉列表、hover效果、整体缩放等知识点的用法。
资源推荐
资源详情
资源评论










收起资源包目录





































































































共 185 条
- 1
- 2
资源评论

桑榆..
- 粉丝: 3
- 资源: 1

上传资源 快速赚钱
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助

会员权益专享
安全验证
文档复制为VIP权益,开通VIP直接复制
