文章目录
使用html+css+js制作小米首页
其中
index.html
是小米官网页面的基本结构
font-awesome
是图标样式
base.css
是公共样式
index.css
是页面中元素的样式
pic_switch.js
是实现切换轮播图的功能
文件夹路径结构
1.html制作小米官网页面结构(index.html
)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米,redmi,小米10,Redmi 10X,小米MIX Alpha,小米商城</title>
<link rel="stylesheet" href="./css/css_reset.css">
<link rel="stylesheet" href="./fa/css/font-awesome.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">
<!-- 网站收藏图标(在标题栏和收藏栏)
网站图片一般都存储在网站的根目录下,名字一般都叫做favicon.ico
制作也很方便,直接搜索
-->
<link rel="icon" href="./favicon.ico">
<script type="text/javascript" src="./js/pic_switch.js"></script>
</head>
<body style='height:1100px ;'>
<!-- top-nav -->
<div class="topbar-wrapper">
<!-- container -->
<div class="topbar w clearfix">
<div class='topbar'>
<ul class='topbar-left'>
<li><a href="javascript:;">小米商城</a></li>
<li class="line">|</li>
<li><a href="javascript:;">MIUI</a></li>
<li class="line">|</li>
<li><a href="javascript:;">LoT</a></li>
<li class="line">|</li>
<li><a href="javascript:;">云服务</a></li>
<li class="line">|</li>
<li><a href="javascript:;">金融</a></li>
<li class="line">|</li>
<li><a href="javascript:;">商品</a></li>
<li class="line">|</li>
<li><a href="javascript:;">小爱开放平台</a></li>
<li class="line">|</li>
<li><a href="javascript:;">企业团购</a></li>
<li class="line">|</li>
<li><a href="javascript:;">资质证明</a></li>
<li class="line">|</li>
<li><a href="javascript:;">协议规则</a></li>
<li class="line">|</li>
<li><a class='app' href="javascript:;">下载app
<!-- 添加弹出层 -->
<div class="qrcode">
<img src="./img/小米.png" alt="小米二维码">
<span>小米商城app</span>
</div>
</a></li>
<li class="line">|</li>
<li><a href="javascript:;">智能生活</a></li>
<li class="line">|</li>
<li><a href="javascript:;">select location</a></li>
<li class="line">|</li>
</ul>
<div class='shopping-cart'>
<a href="javascript:;"><i class='fa fa-cart-arrow-down'></i> 购物车(100)</a>
</div>
<ul class='user-info'>
<li><a href="javascript:;">登陆</a></li>
<li class="line">|</li>
<li><a href="javascript:;">注册</a></li>
<li class="line">|</li>
<li><a href="javascript:;">消息通知</a></li>
<li class="line">|</li>
</ul