HTML5+CSS3+ANGULARJS+JQUERY+WEBAPI Development Mobile Web (i)

<span id="Label3"></p><strong><strong>Preface</strong></strong><p><p>With the development of the browser HTML5+CSS3 the use of more and more extensive, has been wanting to learn this, want to learn that toss down almost did not learn Something. Work experience tells me that to master a technology, you need to hone in the project,</p></p><p><p>So I am ready to develop a mobile phone-side BBS training practiced hand, technology updates fast, but also to learn fast, with the times, only to raise the Wages.</p></p><p><p></p></p><strong><strong>Choice of Technology</strong></strong><p><p>JQuery Mobile Phone Gap is a more mature framework why don't I use these frameworks? Because I consider the underlying technology application and PRACTICE.</p></p><p><p><strong>My Choice is:</strong> Html5+css3+angularjs+jquery</p></p><p><p>HTML5+CSS3 responsible for UI layout</p></p><p><p>ANGULARJS responsible for data request and binding</p></p><p><p>jquery is responsible for page animation effects</p></p><p><p>WEBAPI is responsible for the Service-side data interface</p></p><p><p></p></p><p><p></p></p><strong><strong>Home Layout</strong></strong><p><p></p></p><p><p></p></p><p><p></p></p><strong><strong>Step one,</strong></strong>Set the size of the page to the size of the move setting<p><p>In the head Add META tag name for the viewport,content parameter see the explanation in the Figure:</p></p><p><p></p></p><p><p></p></p><p><p></p></p><p><p></p></p><strong><strong>Step two,</strong></strong>Writing HTML<p><p>The page is divided into three chunks: head, body, and Bottom. The HTML structure is as Follows:</p></p><p><p></p></p><p><p></p></p><p><p><strong>Step three, the style of writing</strong></p></p><p><p><strong></strong></p></p><p><p></p></p><p><p></p></p>(1),<span style="line-height: 1.5;"><span style="line-height: 1.5;">  </span></span><span style="line-height: 1.5;"><span style="line-height: 1.5;">font set to browser default size</span></span><p><p>html{font-size:100%;} Font is browser default size<br>Body{font-size:1.0em;}//1em equals the default font size (for example, The browser default font size is 16px,1em equals 16px)</p></p><p><p></p></p>(2), Writing head Style<p><p>1, in order to adapt to all browsers, units are using em or percentage</p></p><p><p>2, the head to the left of the lovely picture and the right post button, use Float:left and float:right around positioning, in order to let and the middle of the title text in a straight line using the Position:relative Plus Top for positioning (pictures and text are generally not in a straight line)</p></p><pre><span style="color: #800000;"><span style="color: #800000;">Header H3</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">background</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">URL (/img/common/line1.png)</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">background-repeat</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Repeat-x</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">3em</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Line-height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">3em</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">margin</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">padding</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Color</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;"></span> white</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;">text-align</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Center</span></span>}<span style="color: #800000;"><span style="color: #800000;">Header h3 img</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;">Top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.8em</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">float</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;"></span> left</span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Margin-left</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.5em</span></span>}<span style="color: #800000;"><span style="color: #800000;">Header h3. action-write-msg</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">Outline</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">None</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;">Top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.8em</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">float</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;"></span> right</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;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">2.5em</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Color</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">#fff</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Line-height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.5em</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">font-size</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">. 875rem</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Border</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">1px solid #e86b0f</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Border-radius</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">4px</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">padding</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0 1.5em</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Background-color</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">#ff8200</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Margin-right</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.5em</span></span>}<span style="color: #800000;"><span style="color: #800000;">Header h3. Action-write-msg:hover</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">Background-color</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">#e86b0f</span></span>}</pre><p><p></p></p><p><p></p></p><p><p></p></p><p><p></p></p>(3), writing the body part style<p><p>The body body is very important, you need to ensure that the middle can be scrolled and the bottom is always on top</p></p><p><p></p></p><p><p></p></p><p><p>Use:</p></p><p><p>Position:fixed;top:4em keeps the body part floating at the top of the browser 4em down, can be guaranteed to hover, but the height is still a problem</p></p><p><p>Height:calc (100%-8em); We know that the head is 4em, the bottom is 4em, the body part height is 100%-8em.</p></p><p><p>Overflow-y:scroll scroll up and down</p></p><p><p></p></p><pre><span style="color: #800000;"><span style="color: #800000;">article</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;">overflow-y</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Scroll</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">4em</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;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Calc (100%-8em)</span></span>; }<span style="color: #800000;"><span style="color: #800000;">Article>ul</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: #800000;"><span style="color: #800000;">Article>ul Li</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">Display</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Inline-block</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">background</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">#fff</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">width</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">40%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">8em</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Border-radius</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">10%</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">margin</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.5em</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Line-height</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">2em</span></span>;<span style="color: #ff0000;"><span style="color: #ff0000;">Border</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Solid #fff 0.2em</span></span>}<span style="color: #800000;"><span style="color: #800000;">Article>ul Li:hover</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">Border</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">0.2em Dashed Red</span></span>}<span style="color: #800000;"><span style="color: #800000;">Article>ul li img</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">Margin-top</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">1em</span></span>}<span style="color: #800000;"><span style="color: #800000;">Article>ul li. Title</span></span>{<span style="color: #ff0000;"><span style="color: #ff0000;">Font-weight</span></span>:<span style="color: #0000ff;"><span style="color: #0000ff;">Bold</span></span>;}</pre><p><p></p></p>(4), writing the bottom style<br><br><pre class="brush:css;gutter:true;"><pre class="brush:css;gutter:true;">Footer a {color: #B4E0D0; text-decoration:underline;margin:5px;} Footer a.current{text-decoration:none; color: #fff}footer {font-size:0.7em;background:url (/img/common/line1.png); position:absolute;height:3.5em;line-height:1.5em;margin:0;padding-top:0.5em; color:white;width:100%;text-align: center;bottom:0em;clear:both; background-repeat:repeat-x;}</pre></pre><p><p>　　</p></p><p><p><strong>Step four, Angular binding data</strong></p></p><strong><strong>(1), fame a module</strong></strong><pre class="brush:javascript;gutter:true;"><pre class="brush:javascript;gutter:true;">var Layoutapp = angular.module (' layoutapp ', []);</pre></pre>(2), Write controller under module<pre class="brush:javascript;gutter:true;"><pre class="brush:javascript;gutter:true;">Layoutapp.controller (' headcontroller ', function ($scope) { $scope. title = "beauty Drawing community";}); Layoutapp.controller (' bodycontroller ', function ($scope) { $scope. forum = [ {title: "drawing communication", img: "forumicon_ 20.jpg "}, {title:" copy footage ", img:" forumicon_20.jpg "}, {title:" copy footage ", img:" forumicon_20.jpg "}, {title:" Pro G Material ", img:" forumicon_35.jpg "}, {title:" copy material ", img:" forumicon_38.jpg "}, {title:" copy material ", img:" FORUMICON_20.J PG "}, {title:" copy material ", img:" forumicon_20.jpg "}, {title:" copy material ", img:" forumicon_20.jpg "}];})</pre></pre>(3), HTML Binding<p><p></p></p><p><p></p></p><p><p>Demo Address:</p></p><p><p>Https://github.com/sunkaixuan/AutoLayout</p></p><p><p></p></p><p><p>。。 Cond</p></p><p><p></p></p><p><p>HTML5+CSS3+ANGULARJS+JQUERY+WEBAPI Development Mobile Web (i)</p></p></span>