189 8069 5689

html5页面布局,html5页面布局代码

这种HTML5布局是什么意思?

这个就是简单的html布局,里面有html 标签组成,你可以标签里面添加内容然后用浏览器打开,就能看到渲染的html 页面了。

创新互联服务项目包括禅城网站建设、禅城网站制作、禅城网页制作以及禅城网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,禅城网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到禅城省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

HTML5如何利用rem实现自适应布局

分析设计图

假设设计图大小为1080px。这也就意味着,在开发时,需要兼容的最大分辨率为1080px,最小的为320px。

2. 调整视口

代码实例:

!DOCTYPE html

head

meta charset="UTF-8" /

title布局之路-移动端开发实例/title

meta name="viewport" content="width=device-width,user-scalable = no" /

link rel="stylesheet" type="text/css" href="css/reset.css" /

/head

body

div class="wrap"/div

/body

/html

代码解析:由于使用不同设备打开网页时,宽度均有所不同,所以不能讲视口设置为固定值,应当为width=device-width,即将视口设置为当前设备的宽度。

3. 确定设计图的最小字体

浏览器(部分)能够显示的最小字体未12px,当移动端页面宽度为320px时,要保证最小字体为12px,那么在1080px的设计图中,最小字体应当为42px。

代码实例:

style type="text/css"

html {

font-size: 42px;

}

/style

4. 按照设计图的像素进行开发

按照正常网页开发流程,进行网页开发即可。

5. 使用百分比和rem替换px

代码效果对比:

/*使用固定像素*/

.box {

float: left;

width: 658px;

font-size: 72px;

text-align: center;

line-height: 195px;

}

/*使用百分比和rem*/

.box {

float: left;

width: 60.93%;

font-size: 1.71rem;

text-align: center;

line-height: 4.64rem;

}

代码解析:

水平方向的值,将具体像素调整为百分比。百分比的计算是根据父级的内容区宽度进行计算的。

例如,父级宽度为1080px, 子级元素为197px,那么子元素转换为百分比为:197/1080*100%=18.24%。需要注意的是百分比根据父级计算,当标签结构级别不同时,计算公式中的“分母”也有所不同,在开发时这个地方很容易出现问题,请务必注意。

垂直方向的值,将具体像素调整为rem,与水平方向相比,垂直方向的计算就比较简单。例如,行高为195px,HTML标签当前的字体大小为42px,将行高转换为rem单位,即195/42= 4. 64rem。

为什么要用HTML5结构标签来布局网页

对于HTML5来讲,在网页结构上标签定义与使用更加语义化,让搜索引擎以及工程师更加迅速理解当前网页的整个重心所在!

列举常用HTML5结构组合

header

nav

section

article

figure

figcaption

aside

footer

一般首页结构,如图所示

当然也可以是下面的结构

其中section和article最为相似,而且和div标签貌似也有很大相似之处。

但看似相似,并不是真的相似,这些标签是为了布局而生的,自然有它们更精确的语义定位,或者说他们更将强调Html的语义。

DIV

这个标签一直是我们见得最多、用得最多的标签。

它本身无任何语义,用作布局以及样式化标签。

Section

与div相似,但它有更进一步的语义。

section用作一段有专题性的内容,一般在它里面会带有标题。  section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。

Article

article是一个特殊的section标签,它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。

div、section、article,语义是从无到有,逐渐增强的。

div无任何语义,仅仅用作样式化或者脚本化的标签,对于一段主题性的内容,则就适用section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 article。

原则上来说,能使用article的时候,也是可以使用section的,但是实际上,假如使用article更合适,那么就不要使用section。


分享标题:html5页面布局,html5页面布局代码
标题网址:http://cdxtjz.cn/article/dsiojcs.html

其他资讯