Html5 + css3 + angularjs + jquery + webAPi development mobile web (1), html5css3

Html5 + css3 + angularjs + jquery + webAPi development mobile web (1), html5css3
Preface

With the development of browsers, HTML5 + CSS3 has become more and more widely used. I have always wanted to learn this, But I have hardly learned anything about it. My work experience tells me that to master a technology, You Need To hone it in the project,

Therefore, I am preparing to develop a mobile phone-side BBS trainer. The technology is updated fast and I want to learn fast. In the previous era, my salary has increased.

 

Technology Selection

JQuery Mobile Phone Gap and so on are mature frameworks. Why don't I need them? Because I consider the underlying technical applications and exercises.

My options are:Html5 + css3 + angularjs + jquery

HTML5 + CSS3 for UI Layout

Angularjs is responsible for data request and binding

Jquery takes charge of page animation Effects

WebApi is responsible for server data interfaces

 

 

Homepage Layout

 

Step 1,Set the webpage size to the mobile size.

Add the meta tag name in the head as viewport. For the content parameter, see the explanation in the figure:

 

 

 

Step 2,Compile HTML

The page consists of three parts: Header, subject, and bottom. The HTML structure is as follows:

 

Step 3. style Writing

 

 

(1) set the font to the default browser size.

Html {font-size: 100%;} // The default font size of the browser.
Body {font-size: 1.0em;} // 1em is equal to the default font size (for example, if the browser's default font size is 16px, 1em is equal to 16px)

 

(2) Compile the Header style

1. To adapt to all browsers, the unit uses em or percentage.

2. Use float: left and float: right to locate the cute image on the left of the head and the post button on the right. In order to make the title text in the middle use position in a straight line: location by relative and top (images and text are generally not in a straight line)

header h3{background: url(/img/common/line1.png) ; background-repeat:repeat-x;height: 3em;line-height: 3em;margin: 0;padding: 0;color: white;width: 100%; text-align:center}header h3 img{ position:relative; top:0.8em; float:left; margin-left:0.5em}header h3 .action-write-msg { outline:none; position:relative; top:0.8em;float: right;text-align: center; height: 2.5em;color: #fff; line-height: 0.5em;font-size: .875rem;border: 1px solid #e86b0f;border-radius: 4px; padding: 0 1.5em;background-color: #ff8200; margin-right:0.5em}header h3 .action-write-msg:hover{background-color: #e86b0f}

 

 

 

(3) Compile the subject part Style

The subject is very important. You need to ensure that the center can scroll and the bottom is always at the bottom.

 

Usage:

Position: fixed; top: 4em: keep the subject part floating down to the position 4em on the top of the browser, which can ensure suspension, but the height is still faulty.

Height: calc (100%-8em); we know that the header is at the bottom of 4em, and the height of the main part is 100%-8em.

Overflow-y: scroll up and down

 

article{position: fixed; overflow-y:scroll; top:4em; width: 100%; height:calc(100% - 8em);  }article>ul{text-align:center;}article>ul li{  display:inline-block; background:#fff; width:40%;height:8em; border-radius:10%; margin:0.5em;line-height:2em; border:solid #fff 0.2em }article>ul li:hover{ border:0.2em  dashed red}article>ul li img{margin-top:1em}article>ul li .title{ font-weight:bold;}

 

(4) Compile the bottom style

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;}

　　

Step 4. Bind angular Data

(1) Name a module

var layoutApp = angular.module('layoutApp', []);

(2) Compile the controller under the module

LayoutApp. controller ('headcontroller', function ($ scope) {$ scope. title = "Beauty painting community";}); layoutApp. controller ('bodycontroller', function ($ scope) {$ scope. forum = [{title: "Drawing communication", img: "forumicon_20.jpg" },{ title: "copying material", img: "forumicon_20.jpg" },{ title: "Copy material", img: "forumicon_20.jpg" },{ title: "copy material", img: "forumicon_35.jpg" },{ title: "copy material", img: "forumicon_38.jpg" },{ title: "", img: "forumicon_20.jpg" },{ title: "", img: "forumicon_20.jpg" },{ title: "Copy material", img: "forumicon_20.jpg"}];})

(3) html binding

 

Demo address:

Https://github.com/sunkaixuan/AutoLayout

 

.. To be continued