一、HTML+CSS实现小米官网首页
仿写小米官网的页面,熬了两个晚上终于把这个页面做好了,原创不易,欢迎大家点赞和评论,
二、主要内容:
三、学习目标:
四、项目准备:
- 下载图片
- 下载iconfont
- 初始化css文件
五、页面结构如下:
六、效果图如下:
七、部分源代码如下(如需要全部的源代码评论区留言,原创不易,记得点赞和收藏哦)。
HTML部分源代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index_style.css">
<script type="text/javascript" src="index.js"></script>
<title>小米商城-首页</title>
</head>
<body>
<!-- 头部部分开始 -->
<div class="header">
<!-- 头部大的背景部分 -->
<div class="header_top"></div>
<!-- 头部中间部分的列表 -->
<div class="header_middle">
<div class="w">
<ul>
<li><a href="#">小米商城</a></li>
<li><a href="#">MIUI</a></li>
<li><a href="#">IOT</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>
<li>