html5 页面元素与布局,Html5元素布局

本教程十分简单，适合新手(因为我也是新手)。本教程参考了“菜鸟教程”。

笔者希望做到元素相对于浏览器的角落布局，即九个典型位置：

这个理念其实和UE4中的UMG锚定一样。Html5中以position来决定布局样式。

第一种：static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。所谓的流，其实就像写word一样，按照从左到右，从上到下的顺序写元素。

第二种：fixed定位

使用这种方法可以做到针对浏览器的窗口定位(不管这个页面是否在滚动，位置都不变)，适合用来做角落广告。语法如下

.someclass{//注：这个是左下角锚定的例子

position:fixed;

left:0px;

bottom:0px;

}

示例：顶部居中锚定的做法

T

.I {

position: fixed;

left: 50%;

transform: translate(-50%, 0%);

}

效果图：

示例：居中锚定

T

.I {

position: fixed;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

第三种：absolute定位 这种是定位在父元素的相对位置中，也是非常方便的。

第四种：relative定位 这种是定位在原本正常显示的位置后，发生偏移的样式。

html5 基本布局+新标签+新选择器 + 线性渐变

html5 基本布局+新标签

html5 弹性布局

html5 弹性布局 一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息1.width=device-width: 设置Viewport视口宽度等于设备宽度2.init ...

CSS HTML元素布局及Display属性

本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...

HTML5元素标记释义

HTML5元素标记释义 标记 类型 意义 介绍 文件标记 ● 根文件标记 让浏览器知道这是HTML 文件 META标记

● 开头 提供文件整体信息 ...

不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2515 如果我们不做什 ...

html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。

html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素. 各版本html5shiv.js CDN网址:https://ww ...

html5.js让IE(包含IE6)支持HTML5元素方法