你的位置:首页 > 软件开发 > ASP.net > Html5+css3+angularjs+jquery+webAPi 开发手机web(一)

Html5+css3+angularjs+jquery+webAPi 开发手机web(一)

发布时间:2015-06-14 00:00:20
前言 随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西。工作经验告诉我,要掌握一门技术,就需要在项目中去磨练,所以我就准备开发一个手机端的BBS练练手,技术更新快,也要学的快,跟的上时代,才涨的了工资。 ...

前言

    随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西。工作经验告诉我,要掌握一门技术,就需要在项目中去磨练,

所以我就准备开发一个手机端的BBS练练手,技术更新快,也要学的快,跟的上时代,才涨的了工资。

 

技术的选择

jQuery Mobile  Phone Gap  等都是比较成熟的框架为什么我不用这些框架呢? 因为我考虑到底层的技术应用和练习 。

我的选择是:Html5+css3+angularjs+jquery 

 HTML5+CSS3  负责UI布局

 angularjs        负责数据请求与绑定 

 jquery            负责页面动画效果

 webApi           负责服务端数据接口

 

 

首页布局

如图:

Html5+css3+angularjs+jquery+webAPi 开发手机web(一)

 

步骤一、 设置网页的大小为移动设置的大小

在head添加meta标签name为viewport,content参数请看图中的解释:

Html5+css3+angularjs+jquery+webAPi 开发手机web(一)

 

 

 

步骤二、 编写HTML

页面总共分为头部、主体、和底部三大块。 HTML结构如下:

Html5+css3+angularjs+jquery+webAPi 开发手机web(一)

 

步骤三、样式的编写

Html5+css3+angularjs+jquery+webAPi 开发手机web(一)

 

 

(1)、  字体设置为浏览器默认大小  

          html{font-size: 100%;}//字体为浏览器默认大小

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

原标题:Html5+css3+angularjs+jquery+webAPi 开发手机web(一)

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。