1)像span这样的行内标记,定义它的margin-top和margin-bottom是无效的,除非你把它设置为块状元素才可以。Display:block
创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的淮北网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
2)对于块状元素,你可以自由的使用外边距来定义版式和元素之间的距离。类似 DIV 等等,
3)无论什么元素,一旦设置为是浮动显示,就拥有了完整的盒模型结构,我们就可以使用外边距,内边距,边框,高和宽来控制的大小以及与其他对象之间的位置关系。
4)浮动是从网页布局的角度来定义元素的显示,而行内和块状属性主要是从元素自身的性质来定其显示的。
5)当元素没有定义边框时,可以把内边距作为外边距使用。有时候外边距会有重叠现象的。
6)当为元素定义背景图像时,内边距区域内可以显示背景图像,而对外边距区域来说,背景图像是达不到的,他永远都是透明状态
7)用div+css设计网页结构时,设计师满脑子都是网页内容,而非内容所呈现的效果。
8)块状元素:不管块状元素宽度是多少,他总会自动占据一行,因为在他末尾附加了一个换行符,而行内元素没有这个特点。块状元素有完整的盒模型结构,可以定义宽度和高度,而行内元素没有这个特性,无法通过高度来改变文本行的行高。
块元素的代表标记 div
行内元素的代表标记 span ,行内标记不具备组织结构框架
9)网页布局分为:自然布局,浮动布局, 定位布局
10)当一个元素被定义为浮动显示时,即定义为块状元素。并且该元素就会收缩自身体积为最小状态。所以,应该有个好的习惯即把浮动元素设置高和宽。如果没有设置,则元素会按照它所包含的内容大小来确定它的大小。
11)当元素浮动后,周边的对象会自动环绕浮动元素周围,形成一种环绕关系。
12)块状元素之间的外边距会有重叠现象,但是浮动元素之间的外边距不会发声重叠现象。
13)浮动元素移动,上移:margin-top:-**; 下移:margin-botom:-*px,其他以此类推。
14)一般定位元素(绝对或是相对元素)都会覆盖在文档流对象之上。但是,select元素的窗口控件还不完全支持z-index
15)在css定位布局中,一般遵循“外部相对定位,内部绝对定位”
16)在body中设置min-width:760px,可以避免布局重叠现象。
对于用户来说,html5提高了用户体验,加强了视觉感受。
1、HTML5技术在移动端,能够让应用程序回归到网页,并对网页的功能进行扩展,用户不需要下载客户端或插件就能够观看视频、玩游戏,操作更加简单,用户体验更好。
2、HTML5的视音频新技术解决了移动端苹果和安卓4.0+,对flash的支持问题。在视音频方面,性能表现比flash要更好。
3、网页表现方面,HTML5中的CSS3特效样式、Canvas、webgl的介入,不仅加强了网页的视觉效果,甚至能够使用户在网页当中看到三维立体特效。
4、另外其跨平台的特点,可以避免传统移动终端上的Native App,开发者必须针对不同的操作系统进行研发工作的弊端,从时间和资金成本上讲远小于跨系统移植。
而且html5的语言简单,容易学习。
现在国内已经出现一批html5页面制作平台,让不懂编程的用户也能自己制作。国内制作html5页面的平台出名的有maka.im和vxplo,maka.im通过选择模板,添加效果、图文即可完成制作,vxplo界面类似于photoshop,个性化程度高,但是操作比较复杂。"
H5是HTML5的简称。HTML5是HTML最新的修订版本,是一种超文本标记语言。H5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。
H5页面就是利用html5制作出来的页面,尤其在微信中发展迅速,借由微信这个移动社交平台,正在走进更多人的视野,比如从引爆朋友圈的H5小游戏《围住神经猫》,到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》,各种H5游戏和专题页纷纷崭露头角。
为活动推广运营而打造的H5页面是最常见的类型,形式多变,包括邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同,如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。
1、制作html5引导页面。
2、把做好的页面放入Android工程中assets文件夹下。
3、利用WebView加载asset文件夹下的html文件。
4、在引导页最后一页的按钮上捕捉点击事件,结束引导页,进入程序。
H5开发安卓界面需要注意以下三点:
(上)包括Android设备多分辨率的问题,Android中构建HTML5应用程序基础
(中)包括Android与JS之间的互动,Android处理JS的警告对话框等,Android中的调试
(下)包括本地储存在Android中的应用,地理位置的应用,离线应用的构建
进入正题
● Android设备多分辨率的问题
Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示
Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍
三种解决方式:1 viewport属性 2 CSS控制 3 JS控制
1 viewport属性放在HTML的meta中
html代码:
span style="font-size: x-small;" head
titleExmaple/title
meta name=”viewport” content=”width=device-width,user-scalable=no”/
/head/span
meta中viewport的属性如下:
span style="font-size: x-small;" meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi |
high-dpi | medium-dpi | low-dpi]
"
/
/span
2 CSS控制设备密度
为每种密度创建独立的样式表(注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率)
html代码:
link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /
link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /
link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" /
3 JS控制
Android浏览器和WebView支持查询当前设别密度的DOM特性
window.devicePixelRatio 同样值有3个(0.75,1,1.5对应3种分辨率)
JS中查询设备密度的方法
js代码:
if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} else if (window.devicePixelRation == 0.75) {
alert("This is a low-density screen");
}
Android中构建HTML5应用
使用WebView控件 与其他控件的使用方法相同 在layout中使用一个WebView标签
WebView不包括导航栏,地址栏等完整浏览器功能,只用于显示一个网页。