HTML+CSS制作小米官网

经过一个星期学习了中国大学MOOC上北京林业大学精品课——《Web前端开发》（对小白来说太友好）。看完之后为了巩固学过的知识点，对着小米官网的布局敲了一遍。本着记录学习的想法发了这篇文章。
以下为小米官网预览图：

这是对着官网写的页面：

Html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="New%20mi.css">
</head>
<body>
<!--导航栏--><div class="nav"><div class="navSize"><div class="height"><div class="fl"><a href="#" class="navC">小米商城</a><span class="naC">|</span><a href="#" class="navC">MIUI</a><span class="naC">|</span><a href="#" class="navC">loT</a><span class="naC">|</span><a href="#" class="navC">云服务</a><span class="naC">|</span><a href="#" class="navC">天星数科</a><span class="naC">|</span><a href="#" class="navC">有品</a><span class="naC">|</span><a href="#" class="navC">小爱开放平台</a><span class="naC">|</span><a href="#" class="navC">企业团购</a><span class="naC">|</span><a href="#" class="navC">资质证照</a><span class="naC">|</span><a href="#" class="navC">协议规则</a><span class="naC">|</span><a href="#" class="navC">下载app</a><span class="naC">|</span><a href="#" class="navC">智能生活</a><span class="naC">|</span><a href="#" class="navC">Select Locating</a></div><div class="fr"><a href="#" class="navC">登录</a><span class="naC">|</span><a href="#" class="navC">注册</a><span class="naC">|</span><a href="#" class="navC" style="margin-right: 20px">消息通知</a><div class="shopping fr" ><a href="#" class="navC shopping"><span class="iconfont"></span>购物车（0）</a></div></div></div></div></div>
<!--logo--><div class="seach"><div class="seachSize"><div class="logo fl"><a href="#"><img src="pic/logo.png"></a></div><div class="logotext fl"><a href="#" class="textStyle">Xiaomi手机</a><a href="#" class="textStyle">Redmi红米</a><a href="#" class="textStyle">电视</a><a href="#" class="textStyle">笔记本</a><a href="#" class="textStyle">平板</a><a href="#" class="textStyle">家电</a><a href="#" class="textStyle">路由器</a><a href="#" class="textStyle">服务</a><a href="#" class="textStyle">社区</a></div><div><form class="Sslyte"><input type="text"  placeholder="  手机" class="input"><button class="iconfont btm"  class="iconfont btm"><span>&#xe8ba</span></button></form></div></div></div>
<!--内容栏-->
<div class="Cen">
<div class="centerSize"><div class="CenPic fr"><a href="#"><img src="pic/1111.png" style="float: right"></a></div><div class="left"><ul class="leftC fl"><li class="TextCen"><a href="#">手机<span class="iconfont Sa"></span></a></li><li class="TextCen"><a href="#">电视<span class="iconfont Sa"></span></a></li><li class="TextCen"><a href="#">笔记本 平板<span class="iconfont Sa"></span></a></li><li class="TextCen"><a href="#">家电<span class="iconfont Sa"></span></a></li><li class="TextCen"><a href="#">出行 穿戴<span class="iconfont Sa"></span></a></li><li class="TextCen"><a href="#">智能 路由器<span class="iconfont Sa"></span></a></li><li class="TextCen"><a href="#">电源 配件<span class="iconfont Sa"></span></a></li><li class="TextCen"><a href="#">健康 儿童<span class="iconfont Sa"></span></a></li><li class="TextCen"><a href="#">耳机 音箱<span class="iconfont Sa"></span></a></li><li class="TextCen"><a href="#">生活 箱包<span class="iconfont Sa"></span></a></li></ul></div>
</div>
</div>
<!--展示栏-->
<div class="Show"><div class="F fl"><div class="Fc"><a href="#" class="Ssy"><img src="pic/6.png" class="Spic"><br>保障服务</a></div><div class="Fc"><a href="#" class="Ssy"><img src="pic/7.png" class="Spic"><br>企业团购</a></div><div class="Fc pic3"><a href="#" class="Ssy"><img src="pic/5.png" class="Spic"><br>F码通道</a></div><div class="Fc"><a href="#" class="Ssy"><img src="pic/8.png" class="Spic"><br>米粉卡</a></div><div class="Fc"><a href="#" class="Ssy"><img src="pic/9.png" class="Spic"><br>以旧换新</a></div><div class="Fc"><a href="#" class="Ssy"><img src="pic/10.png" class="Spic"><br>话费充值</a></div></div><div class="Ultra ShSy fl"><a href="#"><img src="pic/2.jpg" class="pic"></a></div><div class="Mix ShSy fl"><a href="#"><img src="pic/3.jpg" class="pic"></a></div><div class="Buds ShSy fr"><a href="#"><img src="pic/4.jpeg" class="pic"></a></div>
</div>
<!--K40-->
<div class="K40Size"><div class="K40"><div class="Red"><a href="#"><img src="pic/1.webp"></a></div></div>
</div>
</body>
</html>

CSS样式：

@font-face {font-family: 'iconfont';src: url('font/iconfont.woff2?t=1636000306673') format('woff2'),url('font/iconfont.woff?t=1636000306673') format('woff'),url('font/iconfont.ttf?t=1636000306673') format('truetype');
}
.iconfont {font-family: "iconfont" ;font-size: 22px;line-height: 40px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}/*导航栏*/
*{padding: 0;margin: 0;
}
body {font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;color: #333;background-color: #fff;min-width: 1226px;
}
.nav{width: 1350px;font-size: 12px;background: #333;
}
.navSize{width: 1226px;margin-left: auto;margin-right: auto;
}
.height{line-height: 40px;height: 40px;
}
.navC{color: #b0b0b0;margin-left: 3px;
}
.naC{color: #3A423C;margin-left: 3px;
}
.shopping{position: relative;width: 120px;height: 40px;background-color:#424242;text-align: center;margin: auto;display: block;
}
.fl{float: left;
}
.fr{float: right;
}
a{text-decoration: none;
}
.navSize .fl a:hover{color: white;
}
.navSize .fr a:hover{color: white;
}.navSize .fr .shopping a:hover{width: 120px;height: 40px;color: #FF5B00;background-color:white;
}/*搜索栏*/
.seach{width: 1350px;
}
.seachSize{width: 1226px;margin-left: auto;margin-right: auto;
}
.logo{height: 76px;width: 56px;margin-top: 24px;
}
.logotext{margin-top: 8px;margin-left: 87px;height: 88px;width: 750px;text-align: center;line-height: 88px;
}
.logotext a:hover{color: #FF5B00;
}
.textStyle{color: #333;font-size: 16px;margin-left: 15px;
}/*搜索栏*/
.Sslyte{font-size: 0px;float: right;
}.input{line-height: 14px;width: 245px;height: 50px;border: 1px solid #E0E0E0;margin-top: 22px;font-size: 14px;float: left;outline: none;
}
input:hover{line-height: 14px;width: 245px;height: 50px;border: 1px solid #9B9898;margin-top: 22px;font-size: 14px;float: left;outline: none;
}
input:focus{line-height: 14px;width: 245px;height: 50px;border: 1px solid #FF5B00;margin-top: 22px;font-size: 14px;float: left;outline: none;
}
button:hover{margin-top: 22px;float: left;right: 0;width: 50px;height: 52px;font-size: 24px;background: #FF5B00;border: 1px solid #FF5B00;line-height: 24px;color:#FFFFFF;
}
.btm{margin-top: 22px;float: left;right: 0;width: 50px;height: 52px;font-size: 24px;background: #ffffff;border: 1px solid #E0E0E0;line-height: 24px;
}
.in{line-height: 14px;width: 245px;height: 50px;margin-top: 22px;font-size: 14px;float: left;border: 1px solid #FF5B00;
}
/*内容栏*/
.centerSize{width: 1226px;margin-left: auto;margin-right: auto;clear: both;
}
.left{position: absolute;width: 234px;height: 460px;border: 0;color: #fff;background: rgba(105,101,101,.6);z-index:999;
}
.leftC{position: relative;list-style: none ;padding: 20px 0;
}
.Cen{width: 1350px;font-size: 12px;background: #FFFFFF;
}
.TextCen{width: 204px;padding-left:30px;height: 42px;line-height: 42px;position: relative;
}.left .leftC li a{width:204px;height: 42px;font-size: 14px;line-height: 14px;color: #F2F2F2;
}
.TextCen:hover {width: 204px;padding-left: 30px;height: 42px;line-height: 42px;background-color: #FF5B00;
}
.Sa
{font-size: 14px;line-height: 14px;position: absolute;top: 14px;left: 200px;
}
.CenPic{position: relative;top:0px;
}
.CenPic img{width: 1226px;height: 460px;top:0px;
}
/*展示栏*/
.Show{width: 1226px;height: 210px;margin-left: auto;margin-right: auto;clear: both;
}.F{height: 170px;width: 234px;display: grid;grid-template-rows: 1fr 1fr;grid-template-columns: 1fr 1fr 1fr;margin-top: 14px;position: relative;
}
.Fc{width: 76px;height: 83px;background-color: #615750;text-align: center;border: #685E57 1px solid;
}
.Spic{width: 24px;height: 24px;margin-top: 22px;}
.Ssy{color: #D0CCCA;font-size: 12px;}
.Ssy:hover{color: #FFFFFF;font-size: 12px;
}
.ShSy{height: 170px;width: 315px;margin-top: 14px;margin-left: 14px;
}
.ShSy:hover{height: 170px;width: 315px;margin-top: 14px;margin-left: 14px;box-shadow: 0 0 10px #999999;
}
.pic{width: 315px;height: 170px;
}
/*K40*/
.K40Size{width: 1350px;background:#F5F5F5;
}
.K40{width: 1226px;height: 172px;margin-left: auto;margin-right: auto;clear: both;position: relative;
}
.Red{position: absolute;top: 26px;
}

本次分享到此结束！

----------------------------------12-16日更新----------------------------------

在这周实训课上做Web项目，由于我的小组内有职场大神哈哈哈，所以就把一周实训时间用来补充小米官网网页了。
以下为补充后的截图
产品展示页：

二级导航页：

结尾页：

由于补充完后的小米官网代码量实在过多，接近四千行，所以分享方式就直接网盘下载把。
网盘链接：https://pan.baidu.com/s/1Oi5uOhLSjbcJxyhoVpXBPg
提取码：7ibp
需要的朋友自行下载，谢谢！

HTML+CSS制作小米官网相关推荐

静态小米官网主页html5设计,web案例-css制作小米官网产品展示
web前端群,189394454,有视频.源码.学习方法等大量干货分享效果知识点: 企业布局思维的巧妙运用, DIV加CSS,css样式拆解与归类,css3过度与阴影,定位与动,常用如何搭配,开发标 ...
html制作小米官网代码,仿小米官网(html+js+css)
[实例简介] 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码 [实例截图] [核心代码] 小米官网(高仿) └── xiaomi ├── css_1 │ ├── financ ...
用html+css实现小米官网的模拟
小米官网制作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
css:动画小米官网盒子阴影心跳动画
小米官网盒子阴影 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
用html和css仿作小米官网（静态）
目录一:准备工作二:头部导航栏部分三:中间照片部分四:尾部文字部分准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...
HTML+CSS实现小米官网顶部导航栏
效果图效果图 html代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
教你用html和css仿制小米官网页面！
一.使用的工具? 博主使用的是Visual Studio Code.这个是真的方便啊,体型小不说,好用的插件还不少!赞一个.不过为了之后的后端学习,我开始慢慢转向用IDEA 了,这个软件使用起来也是真 ...
HTML/CSS实现小米官网搜索框效果
效果图: 需求分析: 1.输入框焦点事件 onfocus:成为焦点, 点击输入框的时候,出现闪烁光标,此时可以输入内容. onblur :失去焦点, 点击页面空白区域,光标消失.此时不可以输入内容. ...

HTML+CSS制作小米官网

HTML+CSS制作小米官网相关推荐

最新文章

热门文章