移动端适配案例

最新推荐文章于 2021-07-30 20:31:35 发布

终究是错付

最新推荐文章于 2021-07-30 20:31:35 发布

阅读量305

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/lizhipeng110/article/details/105081316

版权

在这里插入图片描述

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="css/reset.css" />
    <style type="text/css">
        /*为了让页面效果跟随浏览器窗口大小的变化而改变*/
        html{font-size:26.67vw;}/*font-size:100px;*/
        html,body{height:100%;}
        header{
            height: 0.44rem;
            background: #387ec2;
            position:fixed;
            top:0px;
            left:0px;
            width:100%;
        }
        header .logoImg{
            height: 0.3rem;
            margin:0 auto;
            padding-top:0.09rem;
        }
        header a:nth-child(1){
            display:block;
            height:0.3rem;
        }
        header .heaBtn{
            width: 0.22rem;
            position:absolute;
            right:0.27rem;
            top:0.12rem;
        }
        main{
            background: pink;
            height:100%;
            padding:0.44rem 0 0.5rem;
            box-sizing:border-box;
        }
        .banner img{
            width: 3.75rem;
        }
        nav{
            display:flex;
            height:0.32rem;
            background: #f2f2f2;
            align-items: center;/*在侧轴上居中*/
        }
        nav b{
            font-size:0.15rem;
            padding-left:0.1rem;
            padding-right:0.1rem;
            display:flex;
            align-items: center;/*在侧轴上居中*/
        }
        nav b img{
            width: 0.13rem;
            margin-right:0.05rem;
        }
        nav a{
            font-size:0.11rem;
            color:#000;
            margin-left:0.39rem;
        }
        .content{}
         
        footer{
            position:fixed;
            bottom:0px;
            left:0px;
            width: 100%;
            height:0.5rem;
            background: #e1e1e1;
        }
        /*ps中测量出来的大小减半 再除以100*/
    </style>
</head>
<body>
    <header>
        <a href="">
            <img class="logoImg" src="img1/logo.jpg" alt="" />
        </a>
        <a href="">
            <img class="heaBtn" src="img1/btn.jpg" alt="" />
        </a>
    </header>
    <main>
        <div class="content">
            <div class="banner">
                <img src="img1/banner.jpg" alt="" />
            </div>
            <nav>
                <b><img src="img1/btn2.jpg"/>学员必看:</b>
                <a href="">退考须知</a>
                <a href="">退考须知</a>
            </nav>
            <div class="con"></div>
        </div>
    </main>
    <footer></footer>
</body>

终究是错付

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端适配案例

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> &...
复制链接

扫一扫