今天这期是本系列的最后一期，通过我缝缝补补几天后还是将一个不错（自我感觉）的小米页面，当然也离不开同学与老师的帮助。
效果图如下：
整体感受下来，最大的难点了也就是在于轮播图的构造了，最后呢也是没能制作出来，最后偷了个懒，用了下老师给我们讲的插件来解决的。
代码如下：
<!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>
小米商城 - Xiaomi 12、Redmi K50、MIX FOLD，小米电视官方网站
</title>
<style>
</style>
<link rel="stylesheet" href="./清除默认格式/reset.css">
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="icon" href="./背景图片/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./topall.css/header.css">
<link rel="stylesheet" href="./topall.css/maintop.css">
<link rel="stylesheet" href="./topall.css/maincenter.css">
<link rel="stylesheet" href="./topall.css/mainbottom.css">
<link rel="stylesheet" href="./topall.css/xuanfu.css">
<!-- 引入轮播插件 -->
<link rel="stylesheet" href="./js/swiper-master 2/package/swiper-bundle.min.css" />
<!-- 引入轮播插件js -->
<script src="./js/swiper-master 2/package/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="./conterall.css/header.css">
<link rel="stylesheet" href="./conterall.css/main.css">
</head>
<body>
<div class="all">
<div class="top-all" style="height: 800px;">
<!-- 顶部导航 -->
<div class="header">
<nav>
<div class="nav-left">
<!-- 左侧导航 -->
<ul>
<li><a href="">小米官网</a></li>
<p>|</p>
<li><a href="">小米商城</a></li>
<p>|</p>
<li><a href="">MIUI</a></li>
<p>|</p>
<li><a href="">loT</a></li>
<p>|</p>
<li><a href="">天星数科</a></li>
<p>|</p>
<li><a href="">有品</a></li>
<p>|</p>
<li><a href="">小爱开放平台</a></li>
<p>|</p>
<li><a href="">企业团购</a></li>
<p>|</p>
<li><a href="">资质证照</a></li>
<p>|</p>
<li><a href="">协议规则</a></li>
<p>|</p>
<li class="l1"><a href="">下载app</a>
<div class="vm2">
<a href="">
<img src="./二维码.png" alt="">
<p>小米商城app</p>
</a>
</div>
<div class="triangle">
</div>
</li>
<p>|</p>
<li><a href="">Select Location</a></li>
</ul>
</div>
<div class="nav-right1">
<div><a href=""><i class="fa fa-shopping-cart s1" aria-hidden="true"></i>购物车(0)</a>
<ul>
<li>
购物车中还没有商品赶紧选购吧
</li>
</ul>
</div>
</div>
<div class="nav-right2">
<ul>
<li><a href="">登录</a></li>
<li><a href="">注册</a></li>
<li><a href="">通知消息</a></li>
</ul>
</div>
</nav>
</div>
<main>
<!-- 主体顶部导航 -->
<div class="maintop">
<div class="maintop-left">
<a href=""><img src="./200w.png" alt=""></a>
</div>
<div class="maintop-center">
<ul>
<li><a href="">Xiaomi手机</a>
<div class="xiala1">
<ul>
<li class="l1"><a href=""><img src="./背景图片/shouji3.png" alt="">
<p>xiaomi civi 1s</p>
<p class="piece">2299元起</p>
</a>
</li>
<li class="l1">
<a href=""><img src="./背景图片/shouji3.png" alt="">
<p>xiaomi civi 1s</p>
<p class="piece">2299元起</p>
</a>
</li>
<li class="l1">
<a href=""><img src="./背景图片/shouji3.png" alt="">
<p>xiaomi civi 1s</p>
<p class="piece">2299元起</p>
</a>
</li>
<li class="l1">
<a href=""><img src="./背景图片/shouji3.png" alt="">
<p>xiaomi civi 1s</p>
<p class="piece">2299元起</p>
</a>
</li>
<li class="l1">
<a href=""><img src="./背景图片/shouji3.png" alt="">
<p>xiaomi civi 1s</p>
<p class="piece">2299元起</p>
</a>
</li>
<li>
<a href=""><img src="./背景图片/shouji3.png" alt="">
<p>xiaomi civi 1s</p>
<p class="piece">2299元起</p>
</a>
</li>
</ul>
</div>
</a>
</li>
最低0.47元/天 解锁文章
扫一扫
486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
