小米官网移动端布局

最新推荐文章于 2024-05-10 18:56:31 发布

Gjanuary

最新推荐文章于 2024-05-10 18:56:31 发布

阅读量1k

点赞数

分类专栏：移动端布局的集中解决方案文章标签： javascript html css

本文链接：https://blog.csdn.net/Gjanuary/article/details/124909818

版权

移动端布局的集中解决方案专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="styleSheet"  href="../css/xiaomi.css" />
    <title>Document</title>
</head>
<body>
    <!--顶部不动设置-->
   <div id="header_banner">
       <a href="http://" target="_blank" rel="noopener noreferrer">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/08bb5cf4f4a4fc7cb8e530e2d2991b80.png" alt="" srcset="">
       </a>
       <div id="banner_bottom">
            <img src="https://m.mi.com/static/img/icon-header-logo3.ddf2a1c313.png" alt="">
            <div class="middle_banner">
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAQAAAD/5HvMAAAEx0lEQVQYGe3Bf0yUdRwH8I9GpBtZVpul0y1/ZD8sKzdXbupMh3Pq0jWtzbVs9YfL8scfLq02h1m52R3c832+z/d5HrjjAOH4KQhy4MQD4eS4gXiCePLjBIwU8VeCOAPy3dZf/mEpz56zW93rRRQVFRUVFfU/dGFM+UTHlOrXzq/yf9HwefeS0plpk4/F0b+je5x/UZXIPZV+URmRwMEhQfs940K+ry6hYTY9Wu0Tyze6yxVYwSGgQoUKFSpUCMiwwH6zPLVqZVcsPRrlSwvqVVghwMGhQYMOHTp0aNDAIcBhhQ53UcWLFH4127QrElQwqEi7keUu21W/vnl5+/y2dwKraj8p3pdZ7bzDIYNDQmqweQWFU/cTpU4GAQUMro6SbR2z6D4aFuRb0m4yqFCgDXq3U7hciynOSYQOBertgr2np9I/ODHPlSlDg4AN3m8oPKq+t0GHguSexg/ogepjPbvZkIACbci3lsx3Yr06rECGvSO4gB6SbxMb5pBhDwZeInN1vWJvY5DB+5uX0ShUfmeDAhtKCkOxZCZPogUCMo5vpFEJxRSkcKiQ0BBP5gnMSu+RIaGokEatc2ZqSEBCqasnhszi32SFgBYKLiQDqnfI0CAGz79B5uibkOOVIZCXTob0TrK3qeA4tpfM0TmPQYO427CBDHLrDAoO+H+LITM0r+VQkRy88DwZFFiXBAWOS73PkRl8WzgU5JVVjyeDQi+LPhmOW63zyAxH9yvgKE31jCGDKqZltTPYh+rXkBmKXAIyKpLIsJpn8hskpMDzJZmhKFuAoXIfGeaPO+i1IQXHtpIZPHsVyCgXZJhnUm6TBPtI3UdkBv9mDo5DOVUxZFDpjAO/yHDcCcSTGVreZxDI8F58kgxqelMe5LD3h+aQGbrnsBENYrDjbTKobnMSFLh8A7Fkhpa4Ao8MgcpdZEjTuAI3h4DnRzJLYEMiODKPX3qKDAjOF30a+N3gYjJLz+SMs0lQUL2ZDDiYqkDCQffFcWSeih8sYEht/HUqjVJgjehTIOH0CjJT99QDbRJsKCxtG0+j0PWqvUOGFYdzyGxnlyVf5ZCQ9xM9tJPP5jbaIMEZ7J5B5jv6FR/iUPsP778eRw+hc4ajhEGBs+NkPIXDmTFuRyI4FBSW9EyhB2h9N+O0AgEFR5MoXK49XilzMDBktBZ+Fnia/oZ/ev6elKscAioUOEPtCyl8POucfRwSZOTVunZWxg9MoHtcnuxek5mQE7JBhoAODQIStBttCyh8OubmHEke4LBAhXM4uykt35mWb8212bPSi7M6nX9wWCGQfL2M9U73JjBw2KBfbl1M4VPxmG9tdl76gA0WWCBBhQYNKiRY8TMYMnuzXdVL6S/H90hQwGHvObeEwiv4Vpn1UG1ea9ZV510dOhxIG8npOnykNKF5Lt2jZjeDCgXJl4PLKdx6xja+4Hm94D3Hh471rhXFi+qm0X3UfMsgwKDeOreUIoP3awYFEsTNs8soMnh3MnAw6FdallNkOLGLQUBBcl/LSooMtTtkqODQBlpWU2TwbZGhgEG5fWY1RQbfVhkcDKK/eTVFhtrtMjg49Butiygy+LfKEOAodlKkCHyq94vhUx9T5GiYXjn73FiKioqKior6z/oTCs8KMOW0P6QAAAAASUVORK5CYII=" alt="">
                <div id="search">搜索商品名称</div>
            </div>
            <img src="https://m.mi.com/static/img/icon-user.23496a0116.png" alt="">
       </div>
       <div class="bannerdiv">
           <div class="titleLeft">
               <ul>
                   <li>推荐</li>
                   <li>智能</li>
                   <li>电视</li>
                   <li>家电</li>
                   <li>笔记本</li>
               </ul>
           </div>
           <div class="titleR">
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAABlBMVEX///+9vb18/6H5AAAAAXRSTlMAQObYZgAAAF9JREFUeNrtzCESwDAMxMD4/59umIBJJ6JalLo3OkmS5Ie55IbRyAmrUQtmlxisoeswtR3GurPn+4crcXYljq7EyZU4uBKfrsSHK/F0JR6mhCPYDmwHdKzVUaWTJElefOyLAQtGqMZ7AAAAAElFTkSuQmCC" alt="">
           </div>
       </div>
   </div>
   <div class="add">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5a1f3a9c8cc72125a7ea1d43e9eca4ba.jpg?thumb=1&w=720&h=360" alt="">
    </div>
    <ul class="icon">
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b1749080cf5bbc4dfebff83013bbebaf.png?f=webp&w=216&h=228&bg=FFFFFF" alt="" srcset="">
        </li>
        <li>
            <img src="https://i8.mifile.cn/v1/a1/eb5024fe-dfe3-6e53-3e18-675bef5fa06e.webp?w=216&h=228&bg=EAF6FD" alt="" srcset="">
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/69c250436545049ccab81c3e32033cf2.png?f=webp&w=216&h=228&bg=FFFFFF" alt="">
        </li>
        <li>
            <img src="https://i8.mifile.cn/v1/a1/e8bc849a-0a3b-21a0-6810-7da3a3903dee.webp?w=216&h=228&bg=FDEFDE" alt="">
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0434594382110f3bd15c90f040d5d542.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt="">
        </li>
        
    </ul>
    <ul class="icon">
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/64f3988b6216e4c1ab62a7f50df3e816.png?f=webp&w=216&h=228&bg=FFFFFF" alt="" srcset="">
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ea68dee2bfa0e55a82236b0d968e975.png?w=216&h=228&bg=FCEAEA" alt="" srcset="">
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/96c780016ea196743905dc93f9249c39.png?w=216&h=228&bg=FDF5E5" alt="">
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9425031cdd7af22d9a23a5ae16d1f57c.jpg?f=webp&w=216&h=228&bg=FFFFFF" alt="">
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f11f9df6b0b0b428f8c8fc3267131830.png?w=216&h=228&bg=FDEDE8" alt="">
        </li>
    </ul>
    <div class="curt"></div>
    <div class="main">
        <div class="oneleft">
            <img  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/16305100fd7913dd727e8906b97e8998.png?f=webp&w=537&h=762&bg=DDE2E6" alt="">
        </div>
        <div class="onetwo">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f8a28a90c3c449ba422a10e40085d2e9.png?f=webp&w=537&h=378&bg=DBDEEF" alt="">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/200a6f45d1ccbf7d8fd92f4bbe2842d4.jpeg?f=webp&w=537&h=378&bg=F3E7E7" alt="">
        </div>
    </div>
    <img class="hotsale" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/051b383d45f1fad5aa3bfae8851af7c4.png?f=webp&w=1080&h=660&bg=FFFFFF" alt="">
    <div class="saleshops">
        <div class="zongdiv">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d9d7f31258a1f84a277918cecab14aaa.jpg?thumb=1&w=344&h=280" alt="">
            <div class="miaoshu">K50&nbsp;电竞版</div>
            <div class="title">全线拉满的冷血旗舰</div>
            <div class="price">￥3299起</div>
            <div class="btn">立即购买</div>
        </div>
        <div class="zongdiv">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/106f65f704121972e0847bd466a00a99.jpg?thumb=1&w=344&h=280" alt="">
            <div class="miaoshu">K50&nbsp;电竞版</div>
            <div class="title">全线拉满的冷血旗舰</div>
            <div class="price">￥3299起</div>
            <div  class="btn">立即购买</div>
        </div>
        <div class="zongdiv">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d6354c72c3c1119fa59453dd3a64701e.jpg?thumb=1&w=344&h=280" alt="">
            <div class="miaoshu">K50&nbsp;电竞版</div>
            <div class="title">全线拉满的冷血旗舰</div>
            <div class="price">￥3299起</div>
            <div  class="btn">立即购买</div>
        </div>
        <div class="zongdiv">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/865b323cd14f1aaa082e17d7f1427654.jpg?thumb=1&w=344&h=280" alt="">
            <div class="miaoshu">K50&nbsp;电竞版</div>
            <div class="title">全线拉满的冷血旗舰</div>
            <div class="price">￥3299起</div>
            <div  class="btn">立即购买</div>
        </div>
    </div>
</body>
</html>

*{
    margin:0;
    padding: 0;
    list-style-type: none;
}

html{
    /*如果这个设置的话，理论上是可行的但是浏览器默然是字体最小是12px*/ 
   /* font-size:0.1333333333333333vw;*/
   /*扩大40倍相当于40px*/
   font-size:5.3333333vw;  
  /* background-color: rgb(245, 245, 245);*/
}
img{
    margin: 0;
    padding: 0;
}
#header_banner{
    position: fixed; 
    overflow: auto;
    top: 0;
    height: 6.3235rem;
    width: 18.75rem;
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%);
    background: #f2f2f2;
}
#header_banner a{
    display: block;
    height: 2.604rem;
}
#header_banner a img{
    width: 100%;
    background-size: contain;
}
#banner_bottom{
    height:2.1875rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
#banner_bottom img{
    width: 1.328rem;
    height: 1.328rem;
}
.middle_banner{
    width:13.544rem;
    display: flex;
    height: 1.6625rem;
    background-color:white;
    font-size:0.78125rem ;
    color: rgba(0,0,0,.3);
    border-radius: 0.04rem;
    text-align: left;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #e5e5e5;
}
.middle_banner img{
    width: 1.0415rem;
    height: 1.0415rem;
}
.bannerdiv{
    display: flex;
    justify-content: center;
}
.titleLeft{
    display: flex;
    width: 30rem;
    align-items: center;
}
.titleLeft ul{
    width: 90%;
    height:1.532rem ;
    list-style-type: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-left:3%;
}
.titleLeft ul li{
    color: rgb(116, 116, 116);
    border-color: rgb(242, 242, 242);
    border-bottom: 2px solid rgba(237,91,0,0);
    text-align: center;
    padding:0.2rem 0;
    font-size: 0.677085rem;
}
.titleR img{
    width:1.0415rem;
}
.titleR{
    margin-right: 3%;
    display: flex;
    align-items: center;
    justify-items: center;
}
.titleLeft ul li:first-child{
    border-bottom: 3px solid red;;
    color: red;
}
.add{
    margin-top: 6.3235rem;
    width: 100%;
    height: 9.375rem;
}
.add img{
    width: 100%;
}
.icon{
    width: 100%;
    display: flex;
    height: 3.3775rem;
    background-color: blue;
}
.icon li img{
    width: 100%;
}
.curt{
    height: 1rem; 
    border-bottom: 0.16rem solid rgb(245, 245, 245); 
    background-color: rgb(245, 245, 245);
}
.main{
    display: flex;
    justify-content: space-between;
}
.oneleft img{
    width:9.3225rem ;
    height:13.229rem ;
    background-color: rebeccapurple;
}
.onetwo{
    width:9.3225rem ;
    display: flex;
    height:13.229rem ;
    justify-content: space-between;
    flex-direction: column;
}
.onetwo img{
    display: block;
    height:6.5625rem ;
    float: right;
    width:9.3225rem ;
    background-color: rgb(77, 129, 0);
}

.hotsale{
    margin-top: 0.3rem;
    width: 100%;
}
.saleshops{
    width: 100%;
    overflow: hidden;
    text-align: center;
    display: flex;
    justify-content:space-around;
    flex-wrap: wrap;
    background-color: white;
    margin-top: 0.3rem;
}
.saleshops div img{
    width:8.958rem;
}
.miaoshu{
    font-size: .28rem;
    color: rgba(0,0,0,.87);
}
.title{
    margin-top: 0.06rem;
    font-size: .22rem;
    line-height: .3rem;
    color: rgba(0,0,0,.54)
}
.zongdiv{
   margin-bottom: 1rem;
}
.price{
    font-size: .28rem;
    color: #ea625b;
    height: 1.5em;
    line-height: 1.5em;
    position: relative;
    display: inline-block;
}
.btn{
    width: 5.23rem;
    background: #ea625b;
    border-radius: 0.1rem;
    margin: auto;
    text-align: center;
    color: #fff;
    font-size: .48rem;
    padding: 0.32rem 0;
    font-weight: 1400;

}