標籤：log art box 設定 radius view package 原型 viewport
手機端調適型配置demo
原型如下：
要求如下：適應各種機型源碼如下：
<!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> 前端切圖:手機端調適型配置demo
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
