1.今天老师让我们介绍自己做的小米官网,和同学们比起来,我写的就有点不够看了,不过我的位置排在靠后位置,所以有很长的时间进行进行修改。最后的效果虽然不如好同学的,但也算是中规中矩
2.介绍的时候,思路不够清晰,讲的可能不尽如人意,也就中规中矩吧。程序思想还不够入脑,所以很乱,讲完自己都不知道说了什么。
3.最后的结果还是有些许不足,后面还要调整。
<!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>Document</title>
<link rel="stylesheet" href="./小米.css">
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="./js/swiper-master 2/package/swiper-bundle.min.css" />
<script src="./js/swiper-master 2/package/swiper-bundle.min.js"></script>
</head>
<body>
<header>
<div id="h">
<div class="h">
<ul>
<li>
<a href="#">小米官网</a><span class="s1">|</span>
</li>
<li>
<a href="#">小米商城</a><span class="s1">|</span>
</li>
<li>
<a href="#">MIUI</a><span class="s1">|</span>
</li>
<li>
<a href="#">ioT</a><span class="s1">|</span>
</li>
<li>
<a href="#">云服务</a><span class="s1">|</span>
</li>
<li>
<a href="#">天星数科</a><span class="s1">|</span>
</li>
<li>
<a href="#">有品</a><span class="s1">|</span>
</li>
<li>
<a href="#">小爱开放平台</a><span class="s1">|</span>
</li>
<li>
<a href="#">企业团购</a><span class="s1">|</span>
</li>
<li>
<a href="#">资质证照</a><span class="s1">|</span>
</li>
<li>
<a href="#">协议规则</a><span class="s1">|</span>
</li>
<li style="width:70px">
<a href="#">下载app</a><span class="s1">|</span>
<div class="p">
<div class="R">
<img src="./download.png" alt="" />
<p>小米商城app</p>
</div>
</div>
</li>
<li>
<a href="#">Select Location</a>
</li>
</ul>
</div>
<div class="h2">
<div><a href="#">
<i class="icon ion-ios-cart" style="margin-right:5px ;"></i>购物车<span>(0)</span></a>
</div>
<div class="p1">购物车中还没有商品,赶紧选购吧!</div>
</div>
<!-- 右边到头 -->
<div class="h1">
<ul>
<li>
<a href="#">登录</a><span class="s1">|</span>
</li>
<li>
<a href="#">注册</a><span class="s1">|</span>
</li>
<li>
<a href="#">消息通知</a>
</li>
</ul>
</div>
</div>
</header>
<section>
<div class="mm">
<a class="m" href="#"></a>
<a href="#">
<div class="t1"></div>
</a>
<div class="t">
<input type="text">
<button><i class="icon ion-search"></i></button>
</div>
<ul>
<li style="width: 100px;"><a href="#">Xiaomi手机</a>
<div class="p2"></div>
</li>
<li style="width: 100px;"><a href="#">Redmi红米</a>
<div class="p3"></div>
</li>
<li style="width: 40px;"><a href="#">电视</a>
<div class="p4"></div>
</li>
<li style="width: 60px;"><a href="#">笔记本</a>
<div class="p5"></div>
</li>
<li style="width: 40px;"><a href="#">平板</a>
<div class="p6"></div>
</li>
<li style="width: 40px;"><a href="#">家电</a>
<div class="p7"></div>
</li>
<li style="width: 60px;"><a href="#">路由器</a>
<div class="p8"></div>
</li>
<li style="width: 80px;"><a href="#">服务中心</a>
<div class="p9"></div>
</li>
<li style="width: 40px;"><a href="#">社区</a>
<div class="p10"></div>
</li>
</ul>
</div>
</section>
<main>
<div class="g">
<div class="gg">
<ul>
<li><a href="#">手机<span>></span></a>
<div class="g1"></div>
</li>
<li><a href="#">电视<span>></span></a>
<div class="g2"></div>
</li>
<li><a href="#">笔记本</a>
<a href="#">平板<span>></span></a>
<div class="g3"></div>
</li>
<li><a href="#">出行</a>
<a href="#">穿戴<span>></span></a>
<div class="g4"></div>
</li>
<li><a href="#">耳机</a>
<a href="#">音箱<span>></span></a>
<div class="g5"></div>
</li>
<li><a href="#">家电<span>></span></a>
<div class="g6"></div>
</li>
<li><a href="#">智能</a>
<a href="#">路由器<span>></span></a>
<div class="g7"></div>
</li>
<li><a href="#">电源</a>
<a href="#">配件<span>></span></a>
<div class="g8"></div>
</li>
<li><a href="#">健康</a>
<a href="#">儿童<span>></span></a>
<div class="g9"></div>
</li>
<li><a href="#">生活</a>
<a href="#">箱包<span>></span></a>
<div class="g10"></div>
</li>
</ul>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#"><img src="./小米影像.png" alt="" /></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./小米手环.png" alt="" /></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="./xiaomi.png" alt="" /></a>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<script>
var mySwiper = new Swiper(".swiper", {
autoplay: true,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</div>
</main>
<footer>
<div class="ff">
<ul>
<li>
<a href="#">
<i class="icon ion-clock"></i>
<p>保障服务</p>
</a>
</li>
<li>
<a href="#">
<i class="icon ion-ios-people"></i>
<p>企业团购</p>
</a>
</li>
<li>
<a href="#">
<i class="icon ion-ios-world"></i>
<p>F码通道</p>
</a>
</li>
<li>
<a href="#">
<i class="icon ion-clipboard"></i>
<p>米粉卡</p>
</a>
</li>
<li>
<a href="#">
<i class="icon ion-card"></i>
<p>以旧换新</p>
</a>
</li>
<li>
<a href="#">
<i class="icon ion-android-cart"></i>
<p>话费充值</p>
</a>
</li>
</ul>
<a href="#">
<div class="f">
</div>
</a>
<a href="#">
<div class="f1">
</div>
</a>
<a href="#">
<div class="f2">
</div>
</a>
</div>
</footer>
<ul class="b">
<li><a href="#"><i class="icon ion-ipad"></i>
<p>手机APP</p>
</a>
</li>
<li><a href="#"><i class="icon ion-ios-personadd-outline"></i>
<P>个人中心</P>
</a>
</li>
<li><a href="#"><i class="icon ion-wrench"></i>
<p>售后服务</p>
</a>
</li>
<li><a href="#"><i class="icon ion-headphone"></i>
<p>人工客服</p>
</a>
</li>
<li><a href="#"><i class="icon ion-ios-cart-outline"></i>
<p>购物车</p>
</a>
</li>
</ul>
<div class="a">
</div>
</body>
</html>