前言

随着浏览器的发展 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. 实现多项式的JAVA类

                                   p = coef[i] + (x * p);               }                           Poly ...

  2. iPhone开发视频教程 Objective-C部分 (51课时)

    第一.二章  OC基础语法 iPhone开发教程 第一章 OC基础语法  iPhone开发概述-必看(1.1)http://www.apkbus.com/android-102215-1-1.html ...

  3. 查看Exchange邮件队列(queue)

    #加载Exchange管理模块 Add-PSSnapin Microsoft.Exchange.Management.PowerShell.snapin get-queue #查看队列 get-mes ...

  4. 一种可以避免数据迁移的分库分表scale-out扩容方式

    原文地址:http://jm-blog.aliapp.com/?p=590 目前绝大多数应用采取的两种分库分表规则 mod方式 dayofweek系列日期方式(所有星期1的数据在一个库/表,或所有?月 ...

  5. mysql-5.7.15-winx64免安装版配置

    1.拷到硬盘根目录下; 2.在 bin 平行目录下新建  data 文件夹: 3. 修改  my-default.ini 文件,添加 basedir = C:\mysql-5.7.15-winx64d ...

  6. Asp.net Core 使用Redis存储Session

    前言 Asp.net Core 改变了之前的封闭,现在开源且开放,下面我们来用Redis存储Session来做一个简单的测试,或者叫做中间件(middleware). 对于Session来说褒贬不一, ...

  7. jquery.jqzoom.js图片放大镜

    jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************ ...

  8. wdlinux 一键安装

    Linux系统(支持CentOS 6.X/7.X.RedHat 6.X.Ubuntu 12.04): ssh登录服务器,执行如下操作即可,需root用户身份安装 wget http://dl.wdli ...

  9. 定时从远程的数据库中取数据,然后把取出来的数据插入或更新本地的oracle数据库的表

    最近项目中有一种需求: 大致需求是这样的 通过给定的 用户名和密码 要定时从远程的数据库中取数据,然后把取出来的数据插入或更新本地的oracle数据库的表 项目的结构式struts1 hibernat ...

  10. UnionPay,ChinaPay 最新 银联支付接口C#\Asp.net\MVC 版本

    1.概念普及 一.理解什么是UnionPay.ChinaPay 这两个概念如果搞不清楚,绝对够你瞎折腾一段时间的. UnionPay:中国银联,最大的机构:他本身也提供系统接口但都是B2B的,对于单个 ...