移动端布局及案列

最新推荐文章于 2024-09-30 23:36:44 发布

王美丽1.85

最新推荐文章于 2024-09-30 23:36:44 发布

阅读量286

点赞数 4

文章标签： html5 css

本文链接：https://blog.csdn.net/qq_64149175/article/details/140504961

版权

一.模拟器上显示的分辨率

css像素：设备的独立像素

物理分辨率（截图）：设备像素成2倍或3倍关系

设备像素比（dpr）=物理像素/css像素

设计稿一般使用：1.百分比

2.弹性盒布局

3.rem布局

移动端适应：视口理想宽度=设备宽度缩放比不缩放不允许用户缩放

二.足球圈移动布局案列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        ul{
            list-style: none;
        }
        header{
            height: 45px;
            background-color: #0cc440;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 11px;
        }
        header div{
            width: 60px;
            height: 25px;
            line-height: 25px;
            font-size: 11px;
            text-align: center;
        }
        header div:nth-child(1){
            background-color: #63d985;
            color: #f6fffa;
            border-radius: 12px 0 0 12px;
        }
        header div:nth-child(2){
            background-color: #3dd066;
            color: #a9e6bd;
            border-radius:0 12px 12px 0;
        }
        section{
            flex: 1;
            overflow: auto;
            /*section内容太多出现挤压，所以添加溢出滚动*/
        }
        section ul{
            display: flex;
            position: sticky;
            top: 0;
            background-color: white;
        }
        section ul li{
            flex: 1;
            font-size: 14px;
            text-align: center;
            color: #868686;
            height: 36px;
            line-height: 36px;
            border-bottom: 1px solid #d9d9d9;
        }
        section ul li:hover{
            border-bottom: 2.5px solid #14be44;
            color: #18bb3a;
        }
        section .list{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        section .list>div{
            width: 49%;
            border: 1px solid #e5e5e5;
            margin-top: 4px;
        }
        section .list div img{
            width: 100%;
        }
        section .list div p{
            height: 29px;
            line-height: 29px;
            border-top: 1px solid #e5e5e5;
            font-size: 12px;
            text-indent: 10px;
        }
        footer{
            height: 45px;
            color: #cccccc;
            border-top: 1px solid #ccd6cd;
        }
        footer ul{
            display: flex;
            height: 100%;
        }
        footer li{
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: center;
        }
        footer li:hover{
            color: #0cc440;
        }
        footer li i{
            height: 21px;
            font-size: 12px;
            line-height: 21px;
            text-align: center;
        }
        footer li span{
            height: 12px;
            font-size: 12px;
            line-height: 21px;
            text-align: center;
        }
        footer li:nth-child(3) {
            position: relative;
        }
        footer li:nth-child(3) i{
            width:50px;
            height:50px;
            border:1px solid #868686 ;
            border-radius:50%;
            position: absolute;
            left: 50%;
            margin-left: -25px;
            font-size: 35px;
            background-color: #f6fffa;
            line-height: 50px;
            text-align: center;
            top: -8px;
        }
    </style>
</head>
<body>
    <header>
        <div>热点</div>
        <div>关注</div>
    </header>
    <section>
        <ul>
            <li>足球生活</li>
            <li>足球现场</li>
            <li>足球赛</li>
        </ul>
        <div class="list">
            <div>
                <img src="./pic.png">
                <p>小丸子啊小丸子</p>
            </div>
            <div>
                <img src="./pic.png">
                <p>小丸子啊小丸子</p>
            </div>
            <div>
                <img src="./pic.png">
                <p>小丸子啊小丸子</p>
            </div>
            <div>
                <img src="./pic.png">
                <p>小丸子啊小丸子</p>
            </div>
            <div>
                <img src="./pic.png">
                <p>小丸子啊小丸子</p>
            </div>
            <div>
                <img src="./pic.png">
                <p>小丸子啊小丸子</p>
            </div>
        </div>
    </section>
    <footer>
        <ul>
            <li>
                <i class="iconfont icon-shouye"></i>
                <span>首页</span>
            </li>
            <li>
                <i class="iconfont icon-fangdajing"></i>
                <span>发现</span>
            </li>
            <li>
                <i class="iconfont icon-zhaoxiangji"></i>
            </li>
            <li>
                <i class="iconfont icon-wode"></i>
                <span>我的</span>
            </li>
            <li>
                <i class="iconfont icon-tuichu"></i>
                <span>退出</span>
            </li>
        </ul>
    </footer>
</body>
</html>

三.分类页布局案列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{  margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        ul{
            list-style: none;
        }
        header{
            height: 45px;
            background-color: gray;
        }
        section{
            flex: 1;
            display: flex;
            overflow: auto;
        }
        section ul{
            width: 67px;
            overflow: auto;
        }
        section>div{
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            margin-top: 10px;
            overflow: auto;
        }
        section ul li{
            width: 67px;
            height: 45px;
            line-height: 45px;
            font-size: 12px;
            text-align: center;
            background-color: #f8f8f8;
        }
        section ul li:hover{
            color: red;
            background-color: #ffffff;
        }
        section .box >div{
            width: 33.33%;
            height: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }
        section .box >div img{
            width: 66px;
            height: 50px;
        }
        section .box >div p{
            font-size: 12px;
            color: black;
        }
        footer{
            height: 45px;
            background-color: gray;
        }
        /*浏览器内核-滚动条*/
        ::-webkit-scrollbar{
            display: none;     /*使滚动条消失*/
        }
        header ul{
            display: flex;
            overflow: auto;
        }
        header ul li{
            line-height: 45px;
            padding: 0 10px;
            flex-shrink:0;
            /*不挤压*/
        }
        header ul li:hover{
            color: red;
            background-color: white;
        }
    </style>
</head>
<body>
    <header>
        <ul>
            <li>热门推荐</li>
            <li>手机数码</li>
            <li>京东超市</li>
            <li>男装</li>
            <li>女装</li>
            <li>男鞋</li>
            <li>女鞋</li>
            <li>家居家装</li>
            <li>水杯</li>
            <li>水花</li>
            <li>画框</li>
            <li>电脑</li>
            <li>手机</li>
            <li>数码</li>
        </ul>
        </ul>
    </header>
    <section>
        <ul>
            <li>热门推荐</li>
            <li>手机数码</li>
            <li>京东超市</li>
            <li>男装</li>
            <li>女装</li>
            <li>男鞋</li>
            <li>女鞋</li>
            <li>家居家装</li>
            <li>水杯</li>
            <li>水花</li>
            <li>画框</li>
            <li>电脑</li>
            <li>手机</li>
            <li>数码</li>
        </ul>
        <div class="box">
            <div>
                <img src="./pic.png">
                <p>小丸子</p>
            </div>
            <div>
                <img src="./pic.png">
                <p>小丸子</p>
            </div>
           
            <div>
                <img src="./pic.png">
                <p>小丸子</p>
            </div>
           
            <div>
                <img src="./pic.png">
                <p>小丸子</p>
            </div>
            <div>
                <img src="./pic.png">
                <p>小丸子</p>
            </div>
            <div>
                <img src="./pic.png">
                <p>小丸子</p>
            </div>
        </div>
    </section>
    <footer></footer>
</body>
</html>