新手尝试制作小米首页

*{margin: 0;padding: 0;list-style-type: none;}
img{display: block;}
a{text-decoration: none;}
.container-fruid{width: 100%;}
.container{width: 1226px;margin: 0 auto;}
header{height: 160px;border-top: 1px solid #dadce0;background: #333333;}
header .p1{height: 120px;background-color: #ffb00f;color: white;font-size: 52px;line-height: 120px;text-align: center;font-weight: bold;text-shadow: 2px 2px 5px grey;}
header .list{height: 40px;color: #b0b0b0;font-size: 12px;display: flex;justify-content: space-between;}
header .list ul{display: flex;margin-top: 13px;}
header .list ul li{padding:0 8px;border-left: 1px solid #3c423c;}
header .list ul li:first-of-type{border: none;}
header .list a{position: relative;}
header .list a p{color: #b0b0b0;width: 120px;height: 40px;background: #424242;line-height: 40px;text-align: center;}
header .list a .nei{width: 420px;height: 0px;background-color: white; position: absolute;z-index: 10000;left: -300px;transition: 1s;overflow: hidden;}
header .list a .nei .pp{text-align: center;width: 100%;background: rgba(0, 0, 0, 0);transition:1s;position: absolute;top: -36px;}
header .list a p:hover{background: white;color: #ff6721;}
header .list a:hover .nei{height: 200px;}
header .list a:hover .pp{display: block;top: 80px;}
main{}
main .top{display: flex;align-items: center;justify-content: space-between;margin: 22px 0 23px 0;}
main .top .image{width: 55px;height: 55px;background: url(…/img/psd…png);transition: .5s;background-position: -55px 0;}
main .top .image:hover{background-position: 0 0;}
main .top ul{display: flex;}
main .top ul li{padding: 0 10px;}
main .top .sou{width: 294px;height: 48px;border: 1px solid #e0e0e0;padding-left: 57px;}
main .top .sou p{line-height: 48px;}
main .top .sou p a{margin-right: 10px;width: 82px;height: 18px;background: #eeeeee;color: gray;}
main .top .sou p a:hover{background: #ff6721;}
main .top .sou p span{border-left: 1px solid #e0e0e0;text-align: center;padding-left: 32px;}
main .li{height: 460px;}
main .li{position: relative;}
main .li ul{position: absolute;left: 0;top: 0; width: 234px;background: #959395;padding: 20px 23px 20px 29px;box-sizing: border-box;}
main .li ul li{font-size: 12px;line-height: 42px;color: white;}
main .li ul li:hover{background: #ff6721;}
main .li ul li span{float: right;}
main .miao{margin: 14px 0 26px;}
main .miao ul{display: flex;justify-content: space-between;}
main .miao ul li:nth-of-type(1){width: 234px; background: #5f5750;display: flex;flex-wrap: wrap;}
main .miao ul li:nth-of-type(1) div{width: 75px;height: 81px;border-top: 1px solid #665e57;border-left: 1px solid #665e57;text-align: center;}
main .miao ul li:nth-of-type(1) div p{color: #cfccca;font-size: 12px;margin-top: 28px;}
main .miao ul li img{width: 316px;}
section{background: #f5f5f5;}
section figure{padding-top: 22px;}
section figure p{padding-top: 20px;font-size: 21px;line-height: 60px;}
section figure p span{font-size: 15px;float: right;}
section article{display: flex;justify-content: space-between;}
section article .left{margin-right: 14px;}
section article .right{}
section article .right ul{display: flex;justify-content: space-between;flex-wrap: wrap;}
section article .right ul li{width: 234px;height: 300px;background-color: white;margin-bottom: 14px;}
section article .right ul li img{width: 65%;margin:20px auto;}
section article .right ul li p{font-size: 12px;line-height: 22px;text-align: center;}
section article .right ul li p:nth-of-type(1){color: #333333;}
section article .right ul li p:nth-of-type(2){color: #b0b0b0;}
section article .right ul li p:nth-of-type(3){color: #ff6700;line-height: 38px;}
footer{background: #ffffff;}
footer .sec1{overflow: hidden;}
footer .sec1 ul{display: flex;justify-content: space-around;border-bottom: 1px solid #e0e0e0;}
footer .sec1 ul li{text-align: center;border-right: 1px solid #e0e0e0;margin: 25px 0;padding: 0 55px;}
footer .sec1 ul li:last-of-type{border: none;}
footer .sec1 ul li span{text-align: center;font-size: 24px;}
footer .sec1 .l1{width: 955px;height: 173px;padding-top: 17px;display: flex;font-size: 12px;float: left;border-right: 1px solid #e0e0e0;}
footer .sec1 .l1 dl{padding-right: 104px;}
footer .sec1 .l1 dl:last-of-type{padding: 0;}
footer .sec1 .l1 dl dt{color:#424242;line-height: 60px;}
footer .sec1 .l1 dl dd a{color:#757575;line-height: 28px;}
footer .sec1 .l1 dl dd:hover a{color:#ff6721;line-height: 28px;}
footer .sec1 .r1{float: right;width: 270px;text-align: center;}
footer .sec1 .r1 p:nth-of-type(1){color: #ff6721;font-size: 16px;margin-top: 36px;line-height: 28px;}
footer .sec1 .r1 p:nth-of-type(2){color: #757575;font-size: 11px;line-height: 23px;}
footer .sec1 .r1 p:nth-of-type(3){color: #757575;font-size: 11px;line-height: 13px;}
footer .sec1 .r1 p:nth-of-type(4){font-size: 11px;line-height: 28px;width: 118px;border: 1px solid #ff6721;margin: 18px auto;}
footer .sec1 .r1 p:nth-of-type(4) a{color: #ff6721;}
footer .sec1 .r1 p:nth-of-type(4):hover{background: #ff6721;}
footer .sec1 .r1 p:nth-of-type(4):hover a{color: white;}
footer .sec2{background: #fafafa;}
footer .sec2 .foot{padding-top: 34px;display: flex;margin-bottom: 50px;}
footer .sec2 .foot img{height: 58px;margin-right: 15px;}
footer .sec2 .foot p{font-size: 12px;line-height: 20px;}
footer .sec2 .foot p span{color: #757575;}