前端切圖:手機端自適應佈局demo

時間 2019-12-14

標籤前端手機自適應佈局 demo 欄目 CSS 简体版

原文原文鏈接

手機端自適應佈局demo
原型以下：css

圖片發自簡書App

要求以下：適應各類機型源碼以下：html

<!DOCTYPE html >
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
        <!--<link rel="stylesheet" type="text/css" href="css/main.csss" />-->
        <style> .container { border: 1px solid #F0F1F1; -webkit-box-shadow: 0px 3px 3px #c8c8c8; -moz-box-shadow: 0px 3px 3px #c8c8c8; box-shadow: 0px 3px 3px #c8c8c8; } .search { height: 42px; margin: 0 20px; } .search_left { float: left; margin: 14px 7px 5px 11px; width: 8px; height: 8px; border-radius: 50px; border: 3px solid orangered; font-size: 12px; text-align: center; line-height: 30px; } .search_input { float: left; } .search_input input { border: none; height: 30px; margin-top: 5px; } .search_right { float: right; width: 20px; height: 20px; margin: 9px 17px 5px 10px; } .search_right img { width: 100%; height: 100%; } .start { height: 42px; margin: 80px 30px 40px 30px; border: 1px solid #F0F1F1; -webkit-box-shadow: 0px 3px 3px #c8c8c8; -moz-box-shadow: 0px 3px 3px #c8c8c8; box-shadow: 0px 3px 3px #c8c8c8; background: #ff4343; color: #FFFFFF; text-align: center; line-height: 40px; border-radius: 50px; } .back { height: 42px; margin: 0px 30px; border: 1px solid #F0F1F1; -webkit-box-shadow: 0px 3px 3px #c8c8c8; -moz-box-shadow: 0px 3px 3px #c8c8c8; box-shadow: 0px 3px 3px #c8c8c8; background: #FFFFFF; color: #1E1F20; text-align: center; line-height: 40px; border-radius: 50px; } </style>
        <title>高校地圖</title>
    </head>

    <body>
        <div class="container">
            <div class="search" style="border-bottom: 1px solid #F0F1F1;">
                <div class="search_left"></div>
                <div class="search_input"><input type="text" placeholder="定位失敗，手動設置"></div>
                <div class="search_right"><img src="img/scale_search.png" alt="放大" /></div>
            </div>

            <div class="search">
                <div class="search_left"></div>
                <div class="search_input"><input type="text" placeholder="電梯間"></div>
                <div class="search_right"><img src="img/scale_search.png" alt="放大" /></div>
            </div>
        </div>

        <div class="start">開始規劃路線</div>
        <div class="back">返回</div>
    </body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。