前端700行代码项目练习-小米官网仅htmlcss实现
目录
前端700行代码项目练习–小米官网（仅html、css实现）
目录
一、效果展示
二、准备工具
1、css重置样式
请自行查找，CSDN上一般是代码形式，可以自己写入css文件后引入
2、awesome图标字体
需要访问awesome官网下载包，请看这篇文章
3、各图片
这些图片都可以在网上自行下载
4、title网站图标
通过在网站链接加后缀/favicon.ico查看到title图标
三、代码
注意：这里仅给出html参考
tips：这里我把网盘链接放这里，所有文件都在里面
链接：
提取码：2022
<!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>小米官网</title>
<!-- 引入公共样式 -->
<link rel="stylesheet" href="./src/base.min.css" />
<!-- 引入重置样式 -->
<link rel="stylesheet" href="./src/reset.min.css" />
<!-- 引入awesome-font -->
<link rel="stylesheet" href="../mi/src/css/all.css" />
<!-- 引入自定义样式 -->
<link rel="stylesheet" href="./index.min.css" />
<!-- 引入网站title显示图标 -->
<link rel="icon" href="./src/img/favicon.ico">
</head>
<body>
<!-- 顶部导航 -->
<div class="top">
<!-- 顶部内容区域 -->
<div class="top-background w">
<!-- 左侧小米服务 -->
<div class="service">
<ul class="top-ul-left clearfix">
<li><a href="javascript:;">小米官网</a></li>
<span class="ver-line">|</span>
<li><a href="javascript:;">小米商城</a></li>
<span class="ver-line">|</span>
<li><a href="javascript:;">MIUI</a></li>
<span class="ver-line">|</span>
<li><a href="javascript:;">loT</a></li>
<span class="ver-line">|</span>
<li><a href="javascript:;">云服务</a></li>
<span class="ver-line">|</span>
<li><a href="javascript:;">天星数科</a></li>
<span class="ver-line">|</span>
<li><a href="javascript:;">有品</a></li>
<span class="ver-line">|</span>
<li><a href="javascript:;">小爱开放平台</a></li>
<span class="ver-line">|</span>
<li><a href="javascript:;">企业团购</a></li>
<span class="ver-line">|</span>
<li><a href="javascript:;">资质证照</a></li>
<span class="ver-line">|</span>
<li><a href="javascript:;">协议规则</a></li>
<span class="ver-line">|</span>
<!-- 二维码链接 -->
<li>
<a href="javascript:;" class="download">下载app
<div class="download-box">
<img src="./src/img/ma.png" alt="二维码" />小米官方APP
</div>
</a>
</li>
<span class="ver-line">|</span>
<li><a href="javascript:;">Select Location</a></li>
</ul>
</div>
<!-- 右侧购物车与用户相关 -->
<div class="user-info">
<!-- 右侧用户相关 -->
<ul class="top-ul-right clearfix">
<li><a href="javascript:;">登录</a></li>
<span class="ver-line">|</span>
<li><a href="javascript:;">注册</a></li>
<span class="ver-line">|</span>
<li><a href="javascript:;">消息通知</a></li>
</ul>
<!-- 右侧购物车 -->
<div class="shopping">
<!-- 购物车按钮块 -->
<a href="javascript:;" class="fa-shopping-cart fas">购物车( 0 )</a>
<!-- 购物车下拉框 -->
<div class="shopping-box">购物车中还没有商品，快去添加吧！</div>
</div>
</div>
</div>
</div>
<!-- 中间搜索层 -->
<header>
<!-- 中间搜索层背景 -->
<div class="middle-background clearfix w">
<!-- 左侧logo -->
<div class="middle-left clearfix">
<a href="javascript:;" class="none-light"></a>
<a href="javascript::" class="light"></a>
</div>
<!-- 中间详细信息 -->
<div class="middle-center">
<ul class="goods-info">
<li><a href="javascript:;">全部商品分类</a></li>
<li class="show-goods"><a href="javascript:;">Xiaomi手机</a></li>
<li class="show-goods"><a href="javascript:;">Redmi手机</a></li>
<li class="show-goods"><a href="javascript:;">电视</a></li>
<li class="show-goods"><a href="javascript:;">笔记本</a></li>
<li class="show-goods"><a href="javascript:;">平板</a></li>
<li class="show-goods"><a href="javascript:;">家电</a></li>
<li class="show-goods"><a href="javascript:;">路由器</a></li>
<li><a href="javascript:;">服务中心</a></li>
<li><a href="javascript:;">社区</a></li>
<div class="goods-box"></div>
</ul>
</div>
<!-- 右侧搜索框 -->
<div class="middle-right clearfix">
<!-- 搜索框盒子 -->
<div class="search-box">
<!-- 搜索框主体 -->
<form action="javascript:;">
<!-- 搜索框 -->
<input type="text" name="search" class="search" />
<!-- 按钮 -->
<button class="enter">
<i class="fas fa-search"></i>
</button>
</form>
</div>
</div>
</header>
<!-- 主体内容区 -->
<main>
<!-- 主体背景区 -->
<div class="body-background clearfix w">
<!-- 左侧购物信息 -->
<div class="body-info">
<ul>
<li><a href="javascript:;">手机<i class="fa-angle-right fas"></i></a></li>
<li><a href="javascript:;">电视<i class="fa-angle-right fas"></i></a></li>
<li><a href="javascript:;">笔记本 平板<i class="fa-angle-right fas"></i></a></li>
<li><a href="javascript:;">出行 穿戴<i class="fa-angle-right fas"></i></a></li>
<li><a href="javascript:;">耳机 音响<i class="fa-angle-right fas"></i></a></li>
<li><a href="javascript:;">家电<i class="fa-angle-right fas"></i></a></li>
<li><a href="javascript:;">智能 路由器<i class="fa-angle-right fas"></i></a></li>
<li><a href="javascript:;">电源 配件<i class="fa-angle-right fas"></i></a></li>
<li><a href="javascript:;">健康 儿童<i class="fa-angle-right fas"></i></a></li>
<li><a href="javascript:;">生活 箱包<i class="fa-angle-right fas"></i></a></li>
</ul>
</div>
<!-- 右侧图片区域 -->
<div class="body-img">
<ul class="content-img">
<li class="photo1"><a href="javascript:;"><img src="./src/img/1.jpg" alt=""></a></li>
<li class="photo2"><a href="javascript:;"><img src="./src/img/2.webp" alt=""></a></li>
<li class="photo3"><a href="javascript:;"><img src="./src/img/3.webp" alt=""></a></li>
<li class="photo4"><a href="javascript:;"><img src="./src/img/4.webp" alt=""></a></li>
</ul>
<ul class="point">
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
</ul>
</div>
</div>
</main>
<footer>
<div class="bottom-background w clearfix">
<div class="small-info">
<ul class="top-info">
<li class="service-info"><a href=""><i class="fas fa-history"></i>保障服务</a></li>
<li class="service-info"><a href=""><i class="fas fa-city"></i>企业团购</a></li>
<li class="service-info"><a href=""><i class="fas fa-seedling"></i>慈善捐赠</a></li>
</ul>
<ul class="bottom-info">
<li class="service-info"><a href=""><i class="fas fa-sd-card"></i>米粉卡</a></li>
<li class="service-info"><a href=""><i class="fas fa-exchange-alt"></i>以旧换新</a></li>
<li class="service-info"><a href=""><i class="fas fa-mobile-alt"></i>话费充值</a></li>
</ul>
</div>
<div class="extra-goods">
<ul>
<li><a href=""><img src="./src/img/3.webp" alt=""></a></li>
<li><a href=""><img src="./src/img/2.webp" alt=""></a></li>
<li><a href=""><img src="./src/img/1.jpg" alt=""></a></li>
</ul>
</div>
</div>
</footer>
<div class="txt-info">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>