使⽤html+css+js制作⼩⽶⾸页⽂章⽬录
使⽤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'>
<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>
</div>
</div>
</div>
<!-- 头部的外部容器 -->
<div class="header-wrapper clearfix">
<div class="header w">
<!-- create logo -->
<h1 class='logo'title='xiaomi'>
⼩⽶官⽹
<a class='home'href="/">
</a>
<a class='mi'href="/">
</a>
</h1>
<!-- 创建中间导航条的容器 -->
<div class="nav-wrapper">
<!-- 创建导航条 -->
<ul class="nav clearfix">
<li class='all-goods-wrapper'>
<a class='all-goods'href="javascript:;">全部商品分类</a>
<a class='all-goods'href="javascript:;">全部商品分类</a>
<!-- 创建⼀个左侧导航栏菜单 -->
<ul class='left-menu'>
<li>
<a class='a-left-menu'href="#">⼿机电话卡
<i class="fa fa-angle-right"aria-hidden="true"></i></a>
</li>
<li>
html网页设计css<a class='a-left-menu'href="#">电视盒⼦
<i class="fa fa-angle-right"aria-hidden="true"></i></a>
</li>
<li>
<a class='a-left-menu'href="#">笔记本平板
<i class="fa fa-angle-right"aria-hidden="true"></i></a>
</li>
<li>
<a class='a-left-menu'href="#">家电插线板
<i class="fa fa-angle-right"aria-hidden="true"></i></a>
</li>
<li>
<a class='a-left-menu'href="#">出⾏穿戴
<i class="fa fa-angle-right"aria-hidden="true"></i></a>
</li>
<li>
<a class='a-left-menu'href="#">智能路由器
<i class="fa fa-angle-right"aria-hidden="true"></i></a>
</li>
<li>
<a class='a-left-menu'href="#">电源配件
<i class="fa fa-angle-right"aria-hidden="true"></i></a>
</li>
<li>
<a class='a-left-menu'href="#">健康⼉童
<i class="fa fa-angle-right"aria-hidden="true"></i></a>
</li>
<li>
<a class='a-left-menu'href="#">⽿机⾳箱
<i class="fa fa-angle-right"aria-hidden="true"></i></a>
</li>
<li>
<a class='a-left-menu'href="#">⽣活箱包<i class="fa fa-angle-right"
aria-hidden="true"></i></a>
</li>
</ul>
</li>
<li><a href="javascript:;">⼩⽶⼿机</a></li>
<li><a href="javascript:;">Redmi红⽶</a></li>
<li><a href="javascript:;">电视</a></li>
<li><a href="javascript:;">笔记本</a></li>
<li><a href="javascript:;">家电</a></li>
<li><a href="javascript:;">路由器</a></li>
<li><a href="javascript:;">智能硬件</a></li>
<li><a href="javascript:;">服务</a></li>
<li><a href="javascript:;">社区</a></li>
<!-- 创建弹出层 -->
<div class="good-info">
</div>
</ul>
</div>
<!-- 创建搜索框的容器 -->
<div class='search-wrapper'>
<form class="search"action="#">
<input class="search-inp"type="text">
<button class="search-btn">
<button class="search-btn">
<i class="fa fa-search"aria-hidden="true"></i>
</button>
</form>
</div>
</div>
</div>
<!-- 中间显⽰部分 -->
<div class="banne-wrapper w">
<div class="banner">
<ul class='img-list'id='img-list'>
<li>
<a href="#">
<img id='img1'src="./img/banner1.jpg"alt="banner1" style='display: block;'>
</a>
</li>
<li>
<a href="#">
<img id='img1'src="./img/banner2.jpg"alt="banner2" style='display: none;'>
</a>
</li>
<li>
<a href="#">
<img id='img1'src="./img/banner3.jpg"alt="banner3" style='display: none;'>
</a>
</li>
<li>
<a href="#">
<img id='img1'src="./img/banner4.jpg"alt="banner4" style='display: none;'>
</a>
</li>
<li>
<a href="#">
<img id='img1'src="./img/banner5.jpg"alt="banner5" style='display: none;'>
</a>
</li>
</ul>
<!-- ⼩点点 -->
<div class="point">
<a id='pointc'class='hover'href="javscript:;"></a>
<a id='pointc'href="javscript:;"></a>
<a id='pointc'href="javscript:;"></a>
<a id='pointc'href="javscript:;"></a>
<a id='pointc'href="javscript:;"></a>
</div>
<!-- ⼩箭头 -->
<div class="arrow">
<a class='pre-arrow'id='pre-arrow'href="javscript:;"></a>
<a class='next-arrow'id='next-arrow'href="javscript:;"></a>
</div>
</div>
</div>
<!-- 固定定位的⼯具条回到顶部的元素 -->
<div class="to-top">
<a href="javascript:;"><i class="fa fa-phone"></i></a>
<a href="javascript:;"><i class="fa fa-user-o"></i></a>
<a href="javascript:;"><i class="fa fa-wrench"></i></a>
<a href="javascript:;"><i class="fa fa-headphones"></i></a>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。