HTML5:新元素来实现一下网页布局

 <!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:新元素来实现一下网页布局的更多相关文章

《精通CSS网页布局》读书报告 ----2016-12-5补充
第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦! (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...
DIV+CSS 网页布局之：一列布局
1.网页布局布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...
在网页布局中合理使用inline formating context（IFC）
引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.
大设计时代：针对超大网页布局的一些思考和建议 [Aseoe]
对于有些设计项目来说,老套的设计模式并不奏效,你需要设计的大点,要比以往设计的元素还要大,因此就非常适合采用超大网页布局.无论是采用大块大块的背景照片还是背景视频,超大网页布局的效果非常显著:极具视觉 ...
第九十二节，html5+css3移动手机端流体布局，开篇知识
html5+css3移动手机端流体布局,开篇知识将项目设计成移动端可访问的页面,项目采用的是流体布局.也就是宽度以百分比自适应的,因为手机的屏幕大小不一致一．整体设计首先我们要了解一 ...
前端学习笔记之CSS网页布局
CSS网页布局阅读目录一网页布局方式二标准流三浮动流四定位流一网页布局方式 #1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...
网页布局WEB标准的HTML结构化
您正在学习WEB标准CSS网页布局吗?是不是还不能完全掌握纯CSS布局?通常有两种需要您特别注意: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义 ...
css的网页布局案例
常见行布局: 导航使用position:fixed固定住导航会脱离文档流,不占据空间导致下面的元素上移,因此需要将下面的元素的padding-top设置成导航的高度 <!DOCTYPE ht ...
利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...

随机推荐

对promise的研究1
通过看阮一峰老师的文章写出来的特此注明 1.Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其 ...
Jmeter的JDBC请求执行多条SQL语句
注:有mysqlconnector/j 3.1.1以上版本才支持执行多条sql语句 1. 下载jdbc驱动为了连接Mysql数据库,还需要有个jdbc驱动:mysql-connector-ja ...
prim 模板
#include<cstdio> #include<vector> #include<cstring> #include<set> #define ma ...
阿里云code下载代码和更新代码
1- 本地新建一个文件夹,进入文件夹下面右击打开git 2- Git init初始化一个.git文件夹 3- Git clone git@code.aliyun.com:username/space- ...
SHADER 用 step替代 if-else
今天聊起这个问题,百度发现了这个优化方式: https://blog.csdn.net/liu_if_else/article/details/77455639
MongoDB性能分析
# mongostat --host=100.150.2.12 --port=27017 --authenticationDatabase=admin --username=root --passwo ...
Node.js - 使用 Express 和 http-proxy 进行反向代理
安装 Express 和 http-proxy npm install --save express http-proxy 反向代理代码 proxy.js var express = require( ...
delphi idhttpsever
http://blog.csdn.net/chelen_jak/article/details/50203809 delphi idhttpsever 2015-12-07 11:36 216人阅读 ...
第 11 章 python线程与多线程
一.什么是线程在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程. 进程只是用来把资源集中到一起(进程只是一个资源单位,或者说资源集合),而线程才是cpu上的执行单位. 多线程(即多 ...
16/7/11_PHP-文件系统
读取文件内容 PHP具有丰富的文件操作函数,最简单的读取文件的函数为file_get_contents,可以将整个文件全部读取到一个字符串中. $content = file_get_contents ...

HTML5:新元素来实现一下网页布局

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

随机推荐

热门专题