教你仿制小米官网页面（仅用html＋css）

前言

哈哈哈，我又来了。经过前面的不懈探索。我感觉我对html和css已经比较熟练了。这是在学完c语言和java后，学习的第三门语言（HTML算不上编程语言吧，哈）。这次我仿写了一个小米的官方网站，话说小米的官方比起淘宝和京东真的简洁啊！正好适合练手了，嘿嘿嘿~。
PS：我们这里今天下雪了哦！

废话不多说了（已经说了那么多了），请看：

文章目录

教你仿制小米官网页面（仅用html＋css）
- 前言
一、使用的工具？
二、结果展示
三、总结

一、使用的工具？

博主使用的是Visual Studio Code。这个是真的方便啊，体型小不说，好用的插件还不少！赞一个。不过为了之后的后端学习，我开始慢慢转向用IDEA 了，这个软件使用起来也是真的不赖啊（想要的小伙伴可以评论区找我哦，我会经常看你们的评论的）

二、结果展示

代码如下（部分示例）：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米商城(假的)-小米10Pro</title><link rel="stylesheet" href="style.css">
</head><body><!-- 奔跑的熊 --><div class="bear"><div class="xiaopingzi">小瓶子出品</div><div class="bear_box"></div></div><!-- 网页头部开始 --><div class="ssp"><a href="none.html"><div class="banner1 clearfix"><a href="none.html"><img src="tupian/banner1.jpg" alt=""></a></div></a><!-- 导航栏开始 --><div class="nav clearfix"><div class="w clearfix"><ul><li><a href="https://www.mi.com/index.html">小米商城</a></li><li><a href="https://www.miui.com/">MiUi</a></li><li><a href="https://iot.mi.com/">loT</a></li><li><a href="https://i.mi.com/">云服务</a></li><li><a href="https://airstar.com/home">天星科技</a></li><li><a href="https://youpin.mi.com/">有品</a></li><li><a href="https://xiaoai.mi.com/">小爱开放平台</a></li><li><a href="https://qiye.mi.com/">企业团购</a></li><li><a href="https://www.mi.com/aptitude/list/?id=41">资质证照</a></li><li><a href="https://www.mi.com/aptitude/list/">协议规则</a></li><li><a href="https://www.mi.com/appdownload/">下载app</a></li><li><a href="https://xiaomishare.mi.com/?from=micom">智能生活</a></li><li><a href="none.html">Select Location</a></li></ul><div><ul><li><a href="none.html">登陆</a></li><li><a href="none.html">注册</a></li><li><a href="none.html">通知消息</a></li><span><a href="https://www.mi.com/buy/cart" class="iconfont"> 购物车(0)</a></span></ul></div></div></div>

css代码如下（部分示例）：

* {padding: 0;margin: 0;}li {list-style: none;}a {text-decoration: none;}em,i {font-style: normal;padding: 0;margin: 0;}@keyframes bear {0% {}100% {background-position: -1280px 0;}}.bear {position: fixed;top: 400px;left: 0;}/*.xiaopingzi {background-color: rgb(11, 205, 240);color: rgb(253, 78, 47);font-size: 18px;font-family: "YouYuan";text-align: center;}*//* ********************* */.xiaopingzi {background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #f3150d 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #cc0000 70%, #CC00FF 80%, #66FFFF 90%, blue 100%);-webkit-text-fill-color: transparent;/* 将字体设置成透明色 */-webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */-webkit-background-size: 200% 100%;-webkit-animation: masked-animation 4s linear infinite;font-size: 20px;text-align: center;}@keyframes masked-animation {0% {background-position: 0 0;}100% {background-position: -100% 0;}}/* ************************** */.bear_box {width: 160px;height: 80px;background: url(tupian/百度浏览器奔跑的熊bear-25676f9.png) no-repeat;background-color: rgb(182, 58, 58);animation: bear 0.8s steps(8) infinite;}@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?bkblej');src: url('fonts/icomoon.eot?bkblej#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?bkblej') format('truetype'), url('fonts/icomoon.woff?bkblej') format('woff'), url('fonts/icomoon.svg?bkblej#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}input {outline: none;}.w {width: 1226px;margin: 0 auto;/* background-color: rgb(204, 206, 105); */}.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0;}.clearfix {*zoom: 1;}

因为代码有点多，全部上传后加载太慢，会卡死。所以想要源码的小伙伴们也请在评论区留言吧！看到后我会打包发给你的。（鉴于找我要的人太多了，一时回复不过来，所以将源码放在评论区连接中了，自取！）

三、总结

学习HTML和css也已经有一两个月了。比起后端的c语言和java感觉前端真的轻松，而且视觉冲击很大，写完后浏览器打开会立刻感受到满满的成就感。就像是看着一个孩子在自己手中慢慢的变成自己想要的模样！因为在学校天天都有琐事的原因，导致学习效率并不是很高。大三了，还有考研，还要参加互联网＋比赛和大创项目。每天真的好忙啊，但有时候又会没有动力学习。这几天又没去图书馆，害，大概是废了。又想考研，又想参加比赛，还想学好编程，要做的事真的太多了，就会导致一事无成。

教你用html和css仿制小米官网页面相关推荐

教你用html和css仿制小米官网页面！
一.使用的工具? 博主使用的是Visual Studio Code.这个是真的方便啊,体型小不说,好用的插件还不少!赞一个.不过为了之后的后端学习,我开始慢慢转向用IDEA 了,这个软件使用起来也是真 ...
HTML/CSS仿制Uplay官方网页面后记
仿制目标:Uplay官方网页仿制效果: 1.因为还没有了解弹性盒该如何布局,所以虽然看起来效果一样,但是感觉自己写的页面层叠非常复杂,远没有官网的源码看起来简洁明了,这里算是目前遇到的第一个技术上的 ...
html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
css:动画小米官网盒子阴影心跳动画
小米官网盒子阴影 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
用html+css实现小米官网的模拟
小米官网制作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
用html和css仿作小米官网（静态）
目录一:准备工作二:头部导航栏部分三:中间照片部分四:尾部文字部分准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...
HTML+CSS制作小米官网
经过一个星期学习了中国大学MOOC上北京林业大学精品课--<Web前端开发>(对小白来说太友好).看完之后为了巩固学过的知识点,对着小米官网的布局敲了一遍.本着记录学习的想法发了这篇文章. ...
HTML+CSS实现小米官网顶部导航栏
效果图效果图 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
HTML/CSS实现小米官网搜索框效果
效果图: 需求分析: 1.输入框焦点事件 onfocus:成为焦点, 点击输入框的时候,出现闪烁光标,此时可以输入内容. onblur :失去焦点, 点击页面空白区域,光标消失.此时不可以输入内容. ...

教你用html和css仿制小米官网页面