前言

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

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

技术的选择

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

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

HTML5+CSS3  负责UI布局

angularjs        负责数据请求与绑定

jquery            负责页面动画效果

webApi           负责服务端数据接口

首页布局

如图:

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

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

步骤二、 编写HTML

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

步骤三、样式的编写

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

html{font-size: 100%;}//字体为浏览器默认大小
          body{font-size: 1.0em;} //1em等于默认字体大小(比如浏览器默认字体大小为16px,1em就等于16px)

(2)、编写头部样式

1、为了适应所有浏览器,单位都采用em或者百分比

2、头部左边的可爱图片和右边的发贴按钮,使用float:left和float:right 左右定位,为了让和中间的标题文字在一条直线上使用了 position:relative 加 top进行定位(图片和文字一般都不在一条直线上)

header h3{background: url(/img/common/line1.png) ; background-repeat:repeat-x;height: 3em;line-height: 3em;margin:;padding:;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)、编写主体部分样式

主体部体非常重要,需要保证中间可以滚动并且底部一直在最下面

使用:

position: fixed;top:4em 使主体部分一直浮动在浏览器顶部向下4em位置,  可以保证悬浮了,但是高度还是有问题

height:calc(100% - 8em);  我们知道头部是4em 底部也是4em 那主体部分高度就是 100%-8em

overflow-y:scroll  上下滚动

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)、编写底部样式
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;}

  

步骤四、angular绑定数据

(1)、声名一个module
var layoutApp = angular.module('layoutApp', []);
(2)、编写module下的controller
layoutApp.controller('headController',
function ($scope) {
$scope.title = "美女画画社区";
}); layoutApp.controller('bodyController',
function ($scope) {
$scope.forum = [
{ title: "画画交流", img: "forumicon_20.jpg" },
{ title: "临摹素材", img: "forumicon_20.jpg" },
{ title: "临摹素材", img: "forumicon_20.jpg" },
{ title: "临摹素材", img: "forumicon_35.jpg" },
{ title: "临摹素材", img: "forumicon_38.jpg" },
{ title: "临摹素材", img: "forumicon_20.jpg" },
{ title: "临摹素材", img: "forumicon_20.jpg" },
{ title: "临摹素材", img: "forumicon_20.jpg" }];
})
(3)、html绑定

demo地址:

https://github.com/sunkaixuan/AutoLayout

。。待续

Html5+css3+angularjs+jquery+webAPi 开发手机web(一)的更多相关文章

  1. html5/css3响应式页面开发总结

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

  2. 导航页的开发--手机web app开发笔记

    好了,的所有的基础知识已经准备完毕了,现在开始制作引导页.这个引导页需要一个HTML文件,JS文件,一个CSS文件.在HBuilderX中根目录下添加“Guid.html”,在JS文件夹添加“myth ...

  3. 为什么html5用的jQuery Mobile在手机浏览器/微信中打开字体很小

    头部加入 <header> <metaname="viewport"content="width=device-width, initial-scale ...

  4. 用HTML5/CSS3/JS开发Android/IOS应用框架大全

    现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会 ...

  5. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  6. html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]

    大风起兮云飞扬,安得猛士兮走四方!html5+css3,不学不行. 做web开发已经有好几年了,见证了太多语言的崛起和陨落. 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语 ...

  7. 11个优秀的HTML5 & CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

  8. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】

    <Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  9. Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】

    <Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...

随机推荐

  1. EWM ODO清理功能

    ERP OBD下传到EWM会自动产生拣货任务(通常做法),但如果EWM因库存不足或其它原因无法拣货时一般要差异确认,对ODO行项目进行0确认.但问题是零确认后EWM标准流程是无法回传ERP的. ERP ...

  2. Android音频介绍

    这个世界音频设备千变万化,Android也不可能为每种设备都提供支持.Android定义了一个框架,这个框架来适配底层的音频设备.该适配层的定义位于: hardware/libhardware_leg ...

  3. mac电脑如何不生成.DS_STORE文件

    执行这个命令,然后重启 defaults write com.apple.desktopservices DSDontWriteNetworkStores true

  4. 《STL系列》之vector原理及实现

    最近忙得蛋疼,但还是想写点属于自己的东西.也不知道写点啥,最后决定试着自己实现STL中常用的几个集合,一来加深自己对STL的理解,二来看看自己是否有这个能力实现.实现目标就是:1能和STL兼容:2最大 ...

  5. 【Vegas原创】Mysql绿色版安装方法

    所谓的绿色版,就是没有installer的MySQL,完全需要靠人工来操作,好处是,重装系统后,只要再做一次本次配置,即可使用. 具体操作方法: 1,设置系统环境变量, 在Path中添加 D:\mys ...

  6. 怎么在阿里云服务器部署多个tomcat

    部署前准备: 1.到阿里云官网购买一台服务器 2.给阿里云服务器挂盘,阿里云有教程这里不讲解,自己看. Linux 系统挂载数据盘 视频:Linux服务器挂载数据盘 3.下载tomcat  http: ...

  7. PS 如何改变一个icon的颜色

    好吧,码农被逼到一定程度也会自己出手的. PS:如何改变图标颜色 新建一个图层,设置前景色为你想要的前景色,按Alt+Delete键用前景色填充该图层,将该图层拖到这个图片所在图层的上方,按Ctrl+ ...

  8. distri.lua的web运维工具

    我的新手游项目很快就要进入到寻找发行商的环节,最近几天相对较空闲,逐将工作重心转移到服务器组运维工具的制作上. 回想一年之前经历的那个不算成功的端游项目,因为运维工具设计得不合理,使用十分不方便,游戏 ...

  9. ITSEC TEAM 2013培训公开视频

    信息安全·WEB安全培训 - 做最靠谱的WEB安全培训网站  http://edu.itsec.pw/ ITSEC TEAM 2013公开课视频 包含XSS.CCNA 视频截图: 视频连接:http: ...

  10. saiku 分布式实践

    saiku比较吃内存,一旦人多了,那么内存可能不够,所以会考虑主从结构,分担压力.为了保证数据的稳定性,也会有类似的考虑,那么问题来了,如何实现saiku的分布式搭建哪? 我阅读了一些国内的文章,没有 ...