Mobile-side Layout Demo Test
Last Update:2015-12-23
Source: Internet
Author: User
<span id="Label3"></p><p><p>On two pictures encourage each other (from Mr. Liu Yong's article, recently read his works): then the mobile side of the more and more attention, the future of the market I do not know, but I know that the function of the mobile phone more and more powerful is indisputable fact! The accumulation of mobile-side layouts also needs to be started from now on!</p></p><p><p></p></p><p><p>Requirement One: realize the effect, pay attention to different phone models: native known as adaptation, we call Adaptive non-deformation</p></p><p><p></p></p><p><p>Idea one: Btn+ima layout style</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "row margin-top"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "col-sm-12"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "form-group text-centr"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Button</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "submit"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "btn Btn-default ubbtn"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #000000;"><span style="color: #000000;">Passenger Express Registration</span></span><span style="color: #008000;"><span style="color: #008000;"><!--</span></span><span style="color: #008000;"><span style="color: #008000;"><i class= "check" style= "padding-left:3.0rem" > </i></span></span><span style="color: #008000;"><span style="color: #008000;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;"><!--</span></span><span style="color: #008000;"><span style="color: #008000;"></span></span><span style="color: #008000;"><span style="color: #008000;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Button</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">img</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">src</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "./image/checks.png"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "width:20px; height:20px; position:absolute; top:3.6rem; right:0.5rem;"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><span class="cnblogs_code_collapse"><span class="cnblogs_code_collapse">View Code</span></span><p><p></p></p><p><p>Idea two: Div layout style around</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "row margin-top"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "col-sm-8"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Button</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">type</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "submit"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "btn Btn-default ubBtn2"</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #000000;"><span style="color: #000000;">New User Registration</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Button</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "col-sm-4"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">img</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">src</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "./image/checks.png"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "width:20px; height:20px;float:right;margin-top: -1rem;margin-right:0.3rem;"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><span class="cnblogs_code_collapse"><span class="cnblogs_code_collapse">View Code</span></span><p><p></p></p><p><p>Idea Three: div around layout style 2</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "row margin-top"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "col-sm-8"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">a</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">href</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">="#"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "btn btn-a"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #000000;"><span style="color: #000000;">New User Registration</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">span</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">class</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "msg-span"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #ff0000;"><span style="color: #ff0000;"> </span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">span</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">a</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #008000;"><span style="color: #008000;"><!--</span></span><span style="color: #008000;"><span style="color: #008000;"><div class= "col-sm-4" > </div></span></span><span style="color: #008000;"><span style="color: #008000;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><span class="cnblogs_code_collapse"><span class="cnblogs_code_collapse">View Code</span></span><p><p>This requires <span> has a placeholder, and then if the left-hand text is not customized out of the effect is not ideal, suitable for fixed interface mode and then set the left distance of the span</p></p><p><p>Idea Four: ul Li a span layout</p></p><p><p>Idea Five: expecting to add in</p></p><p><p></p></p><p><p>Unified CSS Style Collation:</p></p><pre><span style="color: #800000;"><span style="color: #800000;">. Wrap-page</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">background</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">#ffffff</span></span>;}<span style="color: #800000;"><span style="color: #800000;">. Nav-box</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">text-align</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Center</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Margin-top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">1.0rem</span></span>}<span style="color: #800000;"><span style="color: #800000;">. Success</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">margin</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">2.65625rem Auto</span></span>;}<span style="color: #800000;"><span style="color: #800000;">. Share-txt</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">font-size</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.4375rem</span></span>}<span style="color: #800000;"><span style="color: #800000;">. Logo</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">3.109375rem</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">margin</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">2.5625rem</span> auto Auto Auto</span>;}<span style="color: #800000;"><span style="color: #800000;">. Top-blank</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.6875rem</span></span>;}<span style="color: #800000;"><span style="color: #800000;">. Top</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">background</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">#1FBAD6</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">10.0rem</span></span>;}<span style="color: #800000;"><span style="color: #800000;">. Content</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">position</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">fixed</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;"></span> left</span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.2rem</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;"></span> right</span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.2rem</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">5.0rem</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">background</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">#ffffff</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">margin</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Auto 0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">96%</span></span>;}<span style="color: #800000;"><span style="color: #800000;">. CONTENT-BG</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">92%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">margin</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Auto 0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">position</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">relative</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;"></span> left</span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.4rem</span></span>;}<span style="color: #800000;"><span style="color: #800000;">. Div-select</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">background</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">#1FBAD6</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Margin-top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.4rem</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">padding</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.25rem</span></span>}<span style="color: #800000;"><span style="color: #800000;">. Footer</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">5.0rem</span></span>}<span style="color: #800000;"><span style="color: #800000;">. Margin-top</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">Margin-top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.25rem</span></span>;}<span style="color: #800000;"><span style="color: #800000;">. Ubbtn</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">margin</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Auto</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Display</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Block</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">1.48rem</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Color</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">#1FBAD6</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Font-weight</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;"></span> -</span>}<span style="color: #800000;"><span style="color: #800000;">. UBBTN2</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">margin</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Auto</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Display</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Block</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">1.48rem</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Color</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">#1FBAD6</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Font-weight</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;"></span> -</span>}<span style="color: #800000;"><span style="color: #800000;">. Check</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">background</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">URL (.. /image/checks.png)</span> right</span>;<span style="color: #ff0000;"><span style="color: #ff0000;">background-repeat</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">no-repeat</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">background-size</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.55rem 0.55rem</span></span>;}<span style="color: #800000;"><span style="color: #800000;">. Box4</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">margin</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0 Auto</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">10px</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0px</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Border</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">20px Solid Transparent</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Border-bottom-color</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">#1FBAD6</span></span>;}<span style="color: #800000;"><span style="color: #800000;">. Btn-a</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">background</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">#ffffff</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Line-height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">28px</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">100%</span></span>;}<span style="color: #800000;"><span style="color: #800000;">. Msg-span</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">background</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">URL (.. /image/checks.png)</span> right</span>;<span style="color: #ff0000;"><span style="color: #ff0000;">background-repeat</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">no-repeat</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">background-size</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.55rem 0.55rem</span></span>;}</pre><span class="cnblogs_code_collapse"><span class="cnblogs_code_collapse">View Code</span></span><p><p></p></p><p><p>Mobile-side Layout Demo Test</p></p></span>
