<!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>HTML5新元素标签：重新给网页布局</title>

 <style type="text/css">

  *{margin:0;padding:0}

  a{text-decoration:none}

  nav ul li {

    list-style:none;

    font-size:14px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    line-height:1.8;

    text-indent:9px;

  }

 </style>

 </head>

 <body>

  <div class="container" style="width:500px;margin:0 auto">

     <!--头部-->

     <header style="background-color:#FFA500">

        <h1>写代码的兔子官方网站</h1>

     </header>

     <!--左侧菜单-->

     <aside style="background-color:#FFD700;height:200px;width:100px;float:left">

        <nav>

          <ul>

            <li><a href="#">我的博客园</a></li>

            <li><a href="#">[文章]我是如何学习计算机的</a></li>

            <li><a href="#">简书创作你的创作</a></li><li>

            <li><a href="#">[文章]深入理解JavaScript</a></li>

          </ul>

        </nav>

     </aside>

     <!--内容部分-->

     <section>

       <article style="background-color:#EEEEEE;height:185px;width:400px;float:left;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-indent:16px;padding-top:15px">

        <h1 style="text-align:left;">三毛语录</h1><br>

        <p>1.不做不可及的梦，这使我的睡眠安恬。

 </p>

        <p>2.人情冷暖正如花开花谢</p>

        <p>3.刻意去找的东西，往往是找不到的。</p>

        <p>4.走得突然，我们来不及告别。</p>

        <p>5.我爱哭的时候便哭，想笑的时候便笑，</p>

       </article>

     </section>

     <!--版权信息-->

     <footer style="background-color:#FFA500;clear:both;text-align:center">

       版权 @ bokeyuan.com

     </footer>

  </div>

 </body>

 </html>

浏览器打开如下:

HTML5提供了新的元素来创建更好的页面结构：
<header>标签
标记定义一个页面或者一个区域的头部，和<div>用法相同，只是语义变了
 
<nav>标签
标记定义导航链接
 
<article>标签
标记定义一片文章，定义一个独立的内容区块
 
<section>标签
标记定义一个区域，定义文章中的章节，可以和<artcile>互相包含
 
<aside>标签
标记定义页面内容部分的侧边栏，前提是这些内容与<artcile>的内容有关
 
<footer>标签
标记定义一个页面或一个区域的底部，比如友情链接，版权声明等等
 
<hgroup>标签
标记定义文件中的一个区块的相关信息
 
<figure>标签
标记定义一组媒体内容以及他们的标题

HTML5:新元素来实现一下网页布局的更多相关文章

  1. 《精通CSS网页布局》读书报告 ----2016-12-5补充

    第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...

  2. DIV+CSS 网页布局之：一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

  3. 在网页布局中合理使用inline formating context（IFC）

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

  4. 大设计时代：针对超大网页布局的一些思考和建议 [Aseoe]

    对于有些设计项目来说,老套的设计模式并不奏效,你需要设计的大点,要比以往设计的元素还要大,因此就非常适合采用超大网页布局.无论是采用大块大块的背景照片还是背景视频,超大网页布局的效果非常显著:极具视觉 ...

  5. 第九十二节，html5+css3移动手机端流体布局，开篇知识

    html5+css3移动手机端流体布局,开篇知识 将项目设计成移动端可访问的页面,项目采用的是流体布局.也就是宽度以百分比自适应的,因为手机的屏幕大小不一致  一．整体设计     首先 我们要了解一 ...

  6. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...

  7. 网页布局WEB标准的HTML结构化

    您正在学习WEB标准CSS网页布局吗?是不是还不能完全掌握纯CSS布局?通常有两种需要您特别注意: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义 ...

  8. css的网页布局案例

    常见行布局: 导航使用position:fixed固定住 导航会脱离文档流,不占据空间 导致下面的元素上移,因此需要将下面的元素的padding-top设置成导航的高度 <!DOCTYPE ht ...

  9. 利用@media screen实现网页布局的自适应

    利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...

随机推荐

  1. Linux 系统参数优化

    修改系统所有进程可打开的文件数量 sysctl -w fs.file-max=2097152sysctl -w fs.nr_open=2097152 > vi /etc/sysctl.conff ...

  2. Android逆向之旅---静态分析技术来破解Apk

    一.前言 从这篇文章开始我们开始我们的破解之路,之前的几篇文章中我们是如何讲解怎么加固我们的Apk,防止被别人破解,那么现在我们要开始破解我们的Apk,针对于之前的加密方式采用相对应的破解技术,And ...

  3. django正常运行确报错的解决方法

    django正常运行却报错的处理方法 出处 : https://www.infvie.com/ops-notes/django-normal-operation-error 报错一:self._soc ...

  4. C#用户自定义控件(含源代码)-透明文本框

    using System; using System.Collections; using System.ComponentModel; using System.Drawing; using Sys ...

  5. python中将12345转换为54321

    #将12345转换为54321 a = 12345789 ret = 0 #当a不为零的时候,循环条件为true,执行语句块 while a : #对a求余数,第一次循环则把5求出来 last = a ...

  6. loj#137 最小瓶颈路 加强版

    分析 我们知道答案一定再最小生成树上 于是我们按边权从小到大建立kruskal重构树 然后每次查询lca的值即可 由于询问较多采用st表维护lca 代码 格式化代码 #include<bits/ ...

  7. P1582倒水

    推了一个多小时的式子,ac后一看题解,7行代码搞定 emmmm我还是太菜了 传送 蒟蒻解法: 不管怎么倒水,最终所有瓶子里面的水的数量一定可以用2k表示出来. n最终可以合并成几个瓶子呢? 我们可以把 ...

  8. 在Mac OS X 10.11 EI Capitan 中提取iso镜像

    到Apple store上下载最新的OS X El Capitan ,下载完成后就可以进行iso镜像提取操作了. 步骤一:挂载El Capitan 的安装镜像文件 1 hdiutil attach / ...

  9. Delphi 文件转换Base64

    uses EncdDecd; function FileToBase64(FileName: string): string; var  MemoryStream: TMemoryStream;beg ...

  10. mysqladmin - 管理 MySQL 服务器、获取运行状态

    官方文档 mysqladmin 是管理 MySQL 服务器的客户端,可以用来检测服务器的配置和当前状态.创建和删除数据库等. 1. mysqladmin 的调用语法 shell> mysqlad ...