大家好，作为刚接触前端不久的一个学生来说，我第一次学习完HTML5和CSS的时候，我就自己学习着自己做了一个小米官网，之前一直没有展现出来，最近一直写博客，这才想起来。
源代码会放在最后。
接下来是我自己的一点个人的感受，我们都知道，写一个网页的时候，我们都要从他的名称，每个标签的命名等等开始，很遗憾，我第一次写这样的代码的时候，就没有发现这样的一个问题。因此，在这里给一个很宝贵的意见就是，以后再写代码的时候一定要自己的写注释。因为代码是你自己写的，过一段时间，我们就会忘记，当时的结构和命名规则，所以在这里一定要自己写注释。
接下来给大家来看一下自己的HTML部分源代码。
<body>
<div class="header">
<div class="header-font-first" onclick="window.open('https://www.mi.com/index.html')">小米商城</div>
<div class="header-font" onclick="window.open('https://home.miui.com/')">MIUI</div>
<div class="header-font" onclick="window.open('https://iot.mi.com/')">loT</div>
<div class="header-font" onclick="window.open('https://i.mi.com/')">云服务</div>
<div class="header-font" onclick="window.open('https://airstar.com/home')">天星数科</div>
<div class="header-font" onclick="window.open('https://www.xiaomiyoupin.com/')">有品</div>
<div class="header-font" onclick="window.open('https://xiaoai.mi.com/')">小爱开放平台</div>
<div class="header-font" onclick="window.open('https://qiye.mi.com/')">企业团购</div>
<div class="header-font" onclick="window.open('https://www.mi.com/aptitude/list?id=88')">资质证照</div>
<div class="header-font" onclick="window.open('https://www.mi.com/aptitude/list')">协议规则</div>
<div class="header-font" onclick="window.open('https://www.mi.com/appdownload')">下载app</div>
<div class="header-font" onclick="window.open('https://xiaomishare.mi.com/?from=micom#/')">智能生活</div>
<div class="header-font-last">seselect Location</div>
<div class="header-font-first2">登录</div>
<div class="header-font">注册</div>
<div class="header-font-last">消息通知</div>
</div>
<div class="header2">
<div class="header2-logo"></div>
<div class="header2-font">Xiaomi手机</div>
<div class="header2-font-list"></div>
</div>
<div class="header3">
<div class="header3-list">
<div class="header3-list-square"></div>
</div>
<div class="header3-photo"></div>
</div>
<div class="bigherder4">
<div class="header4">
<div class="header4-box" onclick="window.open('https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search')">
<img src="./img/box1.png" class="header4-box-photo">
<div class="header4-box-font">保障服务</div>
</div>
<div class="header4-box" onclick="window.open('https://qiye.mi.com/')">
<img src="./img/box2.png" class="header4-box-photo">
<div class="header4-box-font">企业团购</div>
</div>
<div class="header4-box" onclick="window.open('https://www.mi.com/order/fcode')">
<img src="./img/box3.png" class="header4-box-photo">
<div class="header4-box-font">F码通道</div>
</div>
<div class="header4-box" onclick="window.open('https://www.mi.com/mimobile')">
<img src="./img/box4.png" class="header4-box-photo">
<div class="header4-box-font">米粉卡</div>
</div>
<div class="header4-box" onclick="window.open('https://www.mi.com/a/h/16769.html')">
<img src="./img/box5.png" class="header4-box-photo">
<div class="header4-box-font">以旧换新</div>
</div>
<div class="header4-box" onclick="window.open('https://account.xiaomi.com/fe/service/login/password?_locale=zh_CN&sid=recharge&qs=%3Fcallback%3Dhttp%253A%252F%252Frecharge.10046.mi.com%252Fsts%253Fsign%253DbC%25252Bk1yrraTJbriZ0UbiV7hfzHz4%25253D%2526followup%253Dhttp%25253A%25252F%25252Frecharge.10046.mi.com%25252F%26sid%3Drecharge%26_locale%3Dzh_CN&callback=http://recharge.10046.mi.com/sts?sign=bC%2Bk1yrraTJbriZ0UbiV7hfzHz4%3D&followup=http%3A%2F%2Frecharge.10046.mi.com%2F&_sign=P+zbqaqaY2j9zuZTC7mrhVJnmJo=&serviceParam={"checkSafePhone":false,"checkSafeAddress":false,"lsrp_score":0.0}&showActiveX=false&theme=&needTheme=false&bizDeviceType=')">
<img src="./img/box6.png" class="header4-box-photo">
<div class="header4-box-font">话费充值</div>
</div>
</div>
<div class="header4-advert1" onclick="window.open('https://www.mi.com/mi11ultra')">
</div>
<div class="header4-advert2" onclick="window.open('https://www.mi.com/mixfold')">
</div>
<div class="header4-advert3" onclick="window.open('https://www.mi.com/buy/detail?product_id=14903')">
</div>
</div>
<div class="header5" onclick="window.open('https://www.mi.com/redmik40')">
<div class="header5-photo"></div>
</div>
<div class="box1">
<p class="box1-font1">手机</p>
<div class="box1-font2" onclick="window.open('https://www.mi.com/p/1915.html')">查看更多</div>
</div>
<div class="box2">
<div class="box2-photo" onclick="window.open('https://www.mi.com/mixfold')"></div>
<div class="box2-list">
<div class="box2-list-phone" onclick="window.open('https://www.mi.com/mi11le-5g-ne')">
<div class="box2-list-phone-photo1"></div>
<div class="box2-list-phone-photo-font1">Xiaomi 11 青春活力版</div>
<div class="box2-list-phone-photo-font2">轻薄5G，内外皆出彩</div>
<div class="box2-list-phone-photo-font3">1999元起</div>
</div>
<div class="box2-list-phone" onclick="window.open('https://www.mi.com/redminote11pro')">
<div class="box2-list-phone-photo2"></div>
<div class="box2-list-phone-photo-font1">Redmi note 11 Pro系列</div>
<div class="box2-list-phone-photo-font2">Redmi note 11 Pro系列</div>
<div class="box2-list-phone-photo-font3">1799元起</div>
</div>
<div class="box2-list-phone" onclick="window.open('https://www.mi.com/redminote11')">
<div class="box2-list-phone-photo3"></div>
<div class="box2-list-phone-photo-font1">Redmi note 11 5G</div>
<div class="box2-list-phone-photo-font2">5000mAh大量电池</div>
<div class="box2-list-phone-photo-font3">1199元起</div>
</div>
<div class="box2-list-phone" onclick="window.open('https://www.mi.com/redminote11-4g')">
<div class="box2-list-phone-photo4"></div>
<div class="box2-list-phone-photo-font1">Redmi note 11 4G</div>
<div class="box2-list-phone-photo-font2">5000mAh大量电池</div>
<div class="box2-list-phone-photo-font3">999元起</div>
</div>
<div class="box2-list-phone" onclick="window.open('https://www.mi.com/blackshark4spro')">
<div class="box2-list-phone-photo5"></div>
<div class="box2-list-phone-photo-font4">黑鲨4S PRO</div>
<div class="box2-list-phone-photo-font5">磁动力升降肩键</div>
<div class="box2-list-phone-photo-font3">4799元起</div>
</div>
<div class="box2-list-phone" onclick="window.open('https://www.mi.com/blackshark4s')">
<div class="box2-list-phone-photo6"></div>
<div class="box2-list-phone-photo-font6">黑鲨4S</div>
<div class="box2-list-phone-photo-font5">磁动力升降肩键</div>
<div class="box2-list-phone-photo-font3">2699元起</div>
</div>
<div class="box2-list-phone" onclick="window.open('https://www.mi.com/xiaomicivi')">
<div class="box2-list-phone-photo7"></div>
<div class="box2-list-phone-photo-font7">Xiaomi Civi</div>
<div class="box2-list-phone-photo-font8">3200万高清质感自拍</div>
<div class="box2-list-phone-photo-font3">2599元起</div>
</div>
<div class="box2-list-phone" onclick="window.open('https://www.mi.com/mix4')">
<div class="box2-list-phone-photo8"></div>
<div class="box2-list-phone-photo-font9">Xiaomi MIX 4</div>
<div class="box2-list-phone-photo-font10">CUP全面屏</div>
<div class="box2-list-phone-photo-font3">4199元起</div>
</div>
</div>
</div>
<div class="box3">
<p class="box3-font1">智能穿戴</p>
<div class="box3-font2">热门</div>
<div class="box3-font3">穿戴</div>
</div>
<div class="box4">
<div class="box4-photo" onclick="window.open('https://www.mi.com/xiaomiwatchcolor2')"></div>
<div class="box4-list">
<div class="box4-list-watch" onclick="window.open('https://www.mi.com/redmiwatch2')">
<div class="box4-list-watch-photo"></div>
<div class="box4-list-watch-photo-font1">Redmi 手表 2</div>
<div class="box4-list-watch-photo-font2">AMOLED高清大屏</div>
<div class="box4-list-watch-photo-font3">399元起</div>
</div>
<div class="box4-list-watch" onclick="window.open('https://www.mi.com/shouhuan6/nfc')">
<div class="box4-list-watch-photo2"></div>
<div class="box4-list-watch-photo-font1">小米手环6 NFC版</div>
<div class="box4-list-watch-photo-font2">全屏实力</div>
<div class="box4-list-watch-photo-font3">269元起</div>
</div>
<div class="box4-list-watch" onclick="window.open('https://www.mi.com/redmi-watch-mulan')">
<div class="box4-list-watch-photo3"></div>
<div class="box4-list-watch-photo-font1">Redmi手表</div>
<div class="box4-list-watch-photo-font2">35g超清/1.4大屏/多功能NFC</div>
<div class="box4-list-watch-photo-font3">269元起</div>
</div>
<div class="box4-list-watch" onclick="window.open('https://www.mi.com/xiaomibuds3pro')">
<div class="box4-list-watch-photo4"></div>
<div class="box4-list-watch-photo-font1">Xiaomi 真无线降噪耳机 3 Pro</div>
<div class="box4-list-watch-photo-font2">动态降噪 静听曼妙</div>
<div class="box4-list-watch-photo-font3">689元起</div>
</div>
<div class="box4-list-watch" onclick="window.open('https://www.mi.com/buy/detail?product_id=14903')">
<div class="box4-list-watch-photo5"></div>
<div class="box4-list-watch-photo-font1">Redmi buds</div>
<div class="box4-list-watch-photo-font2">轻巧半入耳，舒适有天分</div>
<div class="box4-list-watch-photo-font3">189元起</div>
</div>
<div class="box4-list-watch" onclick="window.open('https://www.mi.com/buy/detail?product_id=15217')">
<div class="box4-list-watch-photo6"></div>
<div class="box4-list-watch-photo-font1">Redmi Buds 3 青春版</div>
<div class="box4-list-watch-photo-font2">轻巧无线，持久动听</div>
<div class="box4-list-watch-photo-font3">99元起</div>
</div>
<div class="box4-list-watch" onclick="window.open('https://www.mi.com/buy/detail?product_id=14243')">
<div class="box4-list-watch-photo7"></div>
<div class="box4-list-watch-photo-font1">Redmi AirDots 3 Pro</div>
<div class="box4-list-watch-photo-font2">智能降噪，超低延迟</div>
<div class="box4-list-watch-photo-font3">289元起</div>
</div>
<div class="box4-list-watch-last" onclick="window.open('https://www.mi.com/search?keyword=手表手环')">
<div class="box4-list-watch-last-font">
<div class="box4-list-watch-last-font1">浏览更多</div>
<div class="box4-list-watch-last-font2">热门</div>
</div>
</div>
</div>
</div>
<div class="box5">
<p class="box5-font1">家电</p>
<div class="box5-font2">热门</div>
<div class="box5-font3">电视影音</div>
</div>
<div class="box6">
<div class="box6-photo">
<div class="box6-photo2"></div>
<div class="box6-photo3"></div>
</div>
<div class="box6-list">
<div class="box6-list-tv" onclick="window.open('https://www.mi.com/buy/detail?product_id=14779')">
<div class="box6-list-tv-photo"></div>
<div class="box6-list-tv-photo-font1">小米电视6 65'' OLED</div>
<div class="box6-list-tv-photo-font2">小米电视6 65'' OLED</div>
<div class="box6-list-tv-photo-font3">6999元</div>
</div>
<div class="box6-list-tv" onclick="window.open('https://www.mi.com/buy/detail?product_id=14438')">
<div class="box6-list-tv-photo2"></div>
<div class="box6-list-tv-photo-font1">小米电视6 至尊版 65英寸</div>
<div class="box6-list-tv-photo-font2">画质新境界</div>
<div class="box6-list-tv-photo-font3">7499元</div>
</div>
<div class="box6-list-tv" onclick="window.open('https://www.mi.com/buy/detail?product_id=14417')">
<div class="box6-list-tv-photo3"></div>
<div class="box6-list-tv-photo-font1">小米电视 ES55 2022款</div>
<div class="box6-list-tv-photo-font2">多分区，画质轻旗舰</div>
<div class="box6-list-tv-photo-font3">2999元</div>
</div>
<div class="box6-list-tv" onclick="window.open('https://www.mi.com/buy/detail?product_id=13168')">
<div class="box6-list-tv-photo4"></div>
<div class="box6-list-tv-photo-font1">米家互联网对开门 540L</div>
<div class="box6-list-tv-photo-font2">重磅新品福利特惠</div>
<div class="box6-list-tv-photo-font3">2799元</div>
</div>
<div class="box6-list-tv" onclick="window.open('https://www.mi.com/buy/detail?product_id=12849')">
<div class="box6-list-tv-photo5"></div>
<div class="box6-list-tv-photo-font1">小米全面屏电视65英寸 E65X</div>
<div class="box6-list-tv-photo-font2">全面屏设计</div>
<div class="box6-list-tv-photo-font3">2699元</div>
</div>
<div class="box6-list-tv" onclick="window.open('https://www.mi.com/mitv4c/32')">
<div class="box6-list-tv-photo6"></div>
<div class="box6-list-tv-photo-font1">小米电视4C 32英寸</div>
<div class="box6-list-tv-photo-font2">高清液晶屏，人工智能系统</div>
<div class="box6-list-tv-photo-font3">849元</div>
</div>
<div class="box6-list-tv" onclick="window.open('https://www.mi.com/buy/detail?product_id=12809')">
<div class="box6-list-tv-photo7"></div>
<div class="box6-list-tv-photo-font1">Redmi智能电视A55</div>
<div class="box6-list-tv-photo-font2">澎湃音效影院级体验</div>
<div class="box6-list-tv-photo-font3">1799元</div>
</div>
</div>相信大家在看到这些代码的时候，我们可以清楚地看到这些代码看上去还是比较整齐的。希望大家可以借鉴。
接下来是部分的css代码：
*{
margin:0px;
padding:0px;
}
.header{
width:auto;
height:50px;
background-color: #333333;
}
.header .header-font-first{
margin-left:170px;
margin-top: 19px;
padding-left: 10px;
padding-right: 10px;
border-right: 2px solid #3f3f37;
color:#8e908d;
float: left;
font-size: 14px;
}
.header .header-font{
margin-top: 19px;
padding-left: 10px;
padding-right: 10px;
color:#8e908d;
border-right: 2px solid #3f3f37;
font-size: 14px;
float: left;
}
.header-font-last{
border:none;
margin-top: 19px;
padding-left: 10px;
padding-right: 10px;
color:#8e908d;
font-size: 14px;
float: left;
}
.header-font-first:hover {
color:#b2aead;
cursor:pointer;
}
.header-font:hover {
color:#b2aead;
cursor:pointer;
}
.header-font-last:hover {
color:#b2aead;
cursor:pointer;
}
.header-font-first2{
padding-left: 178px;
float: left;
margin-top: 19px;
font-size: 14px;
color:#8e908d;
}
.header-font-first2{
cursor:pointer;
color:#b2aead;
}
.header2{
height: 125px;
width:auto;
/* background-color:#e24b4b; */
/* position:relative; */
}
.header2 .header2-logo{
width: 56px;
height:56px;
background-image: url(./img/logo-1.jpg);
background-size: contain;
margin-top: 28px;
margin-left: 182px;
float: left;
}
.header2 .header2-font{
font-size: 20px;
float: left;
margin-left: 210px;
margin-top: 50px;
padding-left: 10px;
}
.header2 .header2-font:hover{
color:#ff6705;
}
.header2 .header2-font-list{
width:auto;
height:287px;
border-top: 1px solid #dfdfdf;
background-color: aqua;
position: absolute;
top:125px;
}
.header3{
width:1226px;
height: 460px;
/* border:1px solid #8a501e; */
margin-left:179px;
}
.header3 .header3-list{
width: 233px;
height:438px;
/* position:relative; */
background-color: #3f3d3d;
opacity:0.5;
padding-top: 20px;
}
.header3 .header3-list .header3-list-spuare{
width:230px;
height:42px;
color:#dd0606;
display: block;
z-index: 2;
}
.header3 .header3-list .header3-list-spuare:hover{
background-color: #ff6705;
}
.header3 .header3-photo{
width: 991px;
height: 458px;
position:absolute;
left:412px;
top: 175px;
background-image: url(./img/xiaomi11.jpg);
}
.bigheader4{
height: 168px;
width:1226px;
position: relative;
}
.header4{
width: 228px;
height: 168px;
padding-top: 2px;
padding-left: 3px;
margin-left: 179px;
margin-top: 14px;
background-color: #5f5750;
opacity:0.7;
cursor:pointer;
/* float: left; */
}
.header4 .header4-box{
width:73px;
height: 80px;
border:1px solid #665e57;
float: left;
}
.header4 .header4-box .header4-box-photo{
width: 24px;
display: inline-block;
padding-left: 23px;
padding-right: 23px;
padding-top: 19px;
padding-bottom: 5px;
}
.header4 .header4-box .header4-box-font{
font-size: 13px;
text-align: center;
color:#c3c0bd;
}
.header4 .header4-box:hover .header4-box-photo{
filter:drop-shadow(0 0 0 #ffffff);
}
.header4 .header4-box:hover .header4-box-font{
color:#ffffff;
}
.header4-advert1{
width: 316px;
height: 170px;
background-image: url(./img/box7.png);
margin-left: 14px;
margin-top: 14px;
position:absolute;
top:635px;
left:410px;
z-index:1;
cursor:pointer;
}
.header4-advert2{
width: 316px;
height: 170px;
background-image: url(./img/box8.jpg);
background-size: contain;
margin-left: 14px;
margin-top: 14px;
position:absolute;
top:635px;
left:742px;
cursor:pointer;
}
.header4-advert3{
width: 316px;
height: 170px;
background-image: url(./img/box9.jpeg);
background-size: contain;
margin-left: 14px;
margin-top: 14px;
position:absolute;
top:635px;
left:1073px;
cursor:pointer;
}
.header5{
height: 92px;
width:auto;
background-color: #f5f5f5;
padding-left: 179px;
padding-top: 26px;
padding-bottom: 22px;
}
.header5 .header5-photo{
height:120px;
width: 1226px;
background-image: url(./img/box10.png);
background-size:cover;
}
.header5:hover{
cursor:pointer;
}
.box1{
height: 58px;
width:auto;
background: #f5f5f5;
padding-left: 179px;
position:relative;
}
.box1 .box1-font1{
font-size: 22px;
display: inline-block;
padding-top: 18px;
}
.box1 .box1-font2{
position: absolute;
right:179px;
bottom:20px;
padding-top: 25px;
}给大家来看一下效果
抖音效果是这样的：
https://www.douyin.com/user/MS4wLjABAAAAdsvKMlcKtxvd0DMxl8gcowlkPsuwA0ZsLH3ccczAl_M?modal_id=7045440838893178143
链接: https://pan.baidu.com/s/1n9q4-lD8MblD-a3hLsHSrw
提取码: we23 复制这段内容后打开百度网盘手机App，操作更方便哦
