<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米商城</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/fonts.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/index.js"></script>
<link rel="stylesheet" href="./css/slick.css">
<link rel="stylesheet" href="./css/slick-theme.css">
<script src="./js/slick.min.js"></script>
</head>
<body>
<!-- 顶部栏 -->
<div class="topBar">
<div class="container">
<div class="topBar_list">
<a href="#">小米商城</a>
<span>|</span>
<a href="#">MIUI</a>
<span>|</span>
<a href="#">loT</a>
<span>|</span>
<a href="#">云服务</a>
<span>|</span>
<a href="#">金融</a>
<span>|</span>
<a href="#">有品</a>
<span>|</span>
<a href="#">小爱开放平台</a>
<span>|</span>
<a href="#">政企服务</a>
<span>|</span>
<a href="#">资质证照</a>
<span>|</span>
</div>
<div class="shop">
<a href="#">
<i class="iconfont" style="font-size: 14px;"></i>
购物车(0)
</a>
</div>
<div class="login">
<a href="#">登录</a>
<span>|</span>
<a href="#">注册</a>
<span>|</span>
<a href="#">消息通知</a>
</div>
</div>
</div>
<!-- 导航栏 -->
<div class="header">
<div class="container">
<div class="site-logo">
<a href="#">
<img src="images/logo.png">
</a>
</div>
<div class="site-list">
<ul class="clearfix">
<li class="site-category">
<a href="">
<img src="images/mifen.gif">
</a>
<!-- 侧边栏 -->
<div class="category-list">
<ul class="box-01">
<li>
<a href="#">
手机 电话卡
<span class="iconfont"></span>
</a>
<ul class="box-01-1">
<li><a href="">小米手机</a></li>
</ul>
</li>
<li>
<a href="#">
电视 盒子
<span class="iconfont"></span>
</a>
<ul class="box-01-1">
<li><a href="">小米手机</a></li>
</ul>
</li>
<li>
<a href="#">
笔记本 平板
<span class="iconfont"></span>
</a>
<ul class="box-01-1">
<li><a href="">小米手机</a></li>
</ul>
</li>
<li>
<a href="#">
家电 插线板
<span class="iconfont"></span>
</a>
<ul class="box-01-1">
<li><a href="">小米手机</a></li>
</ul>
</li>
<li>
<a href="#">
出行 穿戴
<span class="iconfont"></span>
</a>
<ul class="box-01-1">
<li><a href="">小米手机</a></li>
</ul>
</li>
<li>
<a href="#">
智能 路由器
<span class="iconfont"></span>
</a>
<ul class="box-01-1">
<li><a href="">大米手机</a></li>
</ul>
</li>
<li>
<a href="#">
电源 配件
<span class="iconfont"></span>
</a>
<ul class="box-01-1">
<li><a href="">白米手机</a></li>
</ul>
</li>
<li>
<a href="#">
健康 儿童
<span class="iconfont"></span>
</a>
<ul class="box-01-1">
<li><a href="">玉米手机</a></li>
</ul>
</li>
<li>
<a href="#">
耳机 音响
<span class="iconfont"></span>
</a>
<ul class="box-01-1">
<li><a href="">黑米手机</a></li>
</ul>
</li>
<li>
<a href="#">
生活 箱包
<span class="iconfont"></span>
</a>
<ul class="box-01-1">
<li><a href="">红米手机</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li>
<a href="#">小米手机</a>
</li>
<li>
<a href="#">红米</a>
</li>
<li>
<a href="#">电视</a>
</li>
<li>
<a href="#">笔记本</a>
</li>
<li>
<a href="#">家电</a>
</li>
<li>
<a href="#">新品</a>
</li>
<
仿小米商城页面和简单效果
最新推荐文章于 2023-04-20 21:09:43 发布
该博客介绍了如何利用CSS和JavaScript技术,特别是结合slick插件和jQuery的hover方法,来复刻小米商城的页面布局及交互效果,包括轮播图和商品导航栏的弹出功能。
摘要由CSDN通过智能技术生成