HTML5新增的几个容器模块
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- H5新增的几个容器块元素：
、header:用户表示页面或某个区域的头部
、nav:用于表示导航栏
、aside:用于表示跟周围主题相关的附加信息
、article:用于表示一个整体的一部分主题 、section:表示右边的侧边栏
、footer:用于表示页面或某个区域的脚注 现在这里来教大家怎么使用 --> <!-- 内联样式表 -->
<style>
* {
margin: ;
padding: ;
} .box {
width: %;
text-align: center;
font-size: 30px;
margin: 10px auto;
} header {
width: %;
height: 100px;
outline: 1px solid red;
line-height: 100px;
} .box1 {
width: %;
position: relative;
height: 550px;
} nav {
width: %;
height: 50px;
outline: 1px solid black;
position: absolute;
left: 0px;
top: 0px;
line-height: 50px;
} aside {
width: %;
height: 50px;
outline: 1px solid blue;
position: absolute;
right: 0px;
top: 0px;
line-height: 50px;
} article {
width: %;
height: 500px;
outline: 1px pink solid;
position: absolute;
left: 0px;
top: 50px;
line-height: 500px;
} section {
width: %;
height: 500px;
outline: 1px yellow solid;
position: absolute;
right: 0px;
top: 50px;
line-height: 500px;
} footer {
width: %;
height: 100px;
outline: 1px solid rebeccapurple;
line-height: 100px;
}
</style>
</head> <body>
<div class="box">
<header>我是网页的头部</header>
<div class="box1">
<nav> 我是左边的导航栏</nav>
<aside>我是右边的导航栏</aside>
<article>我是主体内容</article>
<section>我是右边的侧边栏</section>
</div>
<footer>我是底部</footer>
</div>
</body>
</html>
HTML5新增的几个容器模块的更多相关文章
- 【原】HTML5 新增的结构元素——能用并不代表对了
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...
- html5新增及删除标签
一.新增标签 有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签 新增的结构标签, ...
- HTML5新增的主体元素和新增的非主体结构元素
HTML5新增的主体元素 article元素 article元素表示文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的 ...
- 盒子模型，定位技术，负边距，html5 新增标签
盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...
- html5新增标签/删除标签
闲聊: 最近小颖工作稍微比较轻松,没事就看看慕课,看了看:HTML5之元素与标签结构,里面简单讲解了下HTML5的一些新特性,小颖之前没写过HTML5的页面,所以就当写笔记将那些新的特性整理出来,也方 ...
- web前端学习（二）html学习笔记部分（1） -- html5新增的元素及特性等等
检查,在浏览器中可以调整设备类型 html5实现水池效果. lang:en为英文语言,中文语言zh <html lang="en"> <head> < ...
- HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5新增及移除的元素
HTML经过10多年的发展,其元素经历了废弃与不断重新定义的过程.为了更好的处理现在的互联网应用,HTML5新增了图形绘制.多媒体播放.页面结构.应用程序存储.网络工作等新元素.http://hove ...
- HTML5 学习笔记（二）——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
随机推荐
- 多张报表导出到一个多sheet页excel
业务需求: 通过勾选不同的报表名称,然后直接执行导出excel.并且这些报表需要统一导入到一个excel的多个sheet页中,并且对某些报表可能需要增加一些类似'已审核'之类的图片(展现时并没有 ...
- cnpm 淘宝镜像设置
很简单,一句话 npm install -g cnpm --registry=https://registry.npm.taobao.org
- Windows远程桌面Debian配置
由于xrdp.gnome和unity之间的兼容性问题,在Debian仍然无法使用xrdp登陆gnome或unity的远程桌面,现象是登录后只有黑白点为背景,无图标也无法操作.使用xrdp只能登录xfc ...
- 产品经理都知道MVP，但是它可能不再是产品研发最好的模型了
产品经理都知道MVP,但是它可能不再是产品研发最好的模型了 孟小白Aspire • 2017-09-01 • 汽车交通 要简单.讨喜.完整,不要最小可行性产品.这对创业公司的第一个产品来说很重要. M ...
- DELETE语句总结
一.基本语句 1.SQL DELETE 语法 DELETE FROM table_name WHERE condition; 请注意 删除表格中的记录时要小心!注意SQL DELETE 语句中的 WH ...
- eclipse中如何添加tomcat插件
本篇简短的介绍了如何安装tomcat插件,因为不eclipse中不安装插件就没有tomcat图标,也就无法正常关闭服务器而只能terminate.废话不多说,直接进入主题: 1.首先下载一个tomca ...
- 在asp.net一般应用程序中使用session
通常我们经常,通过session判定用户是否登录.还有一些临时的.重要的数据也尝尝存放在Session中. 在页面我们很容易的得到Session的值,但在类中就会遇到一些问题.也知道通过下面的方法得到 ...
- 北美PM活着的攻略
http://www.followmedoit.com/bbs/forum.php?mod=viewthread&tid=47&extra=page%3D1 在北美,做PM不易,需要交 ...
- Centos7下Mysql通过.frm和.ibd恢复数据
通过.frm和.ibd文件恢复表结构和数据 这里以hue数据库中的desktop_document2表为例 分成两步骤,先去表结构,再取数据,最好在一个用完就可以删除的数据库中进行 取表结构篇: 1. ...
- Hadoop HBase概念学习系列之HBase里的长表VS宽表VS窄表（十五）
有时候啊,HBase表的设计方案通常,还会考虑如下一些因素,当然,这只是考虑范围里的部分呢. 更多的行还是更多的版本?后者使用了HBase自带的功能.但是需要在列簇中定义最大版本数,这样做可能有风险. ...