html5--2.6新的布局元素(5)-nav
html5--2.6新的布局元素(4)-aside/nav
学习要点
- 了解aside/nav元素的语义和用法
- 通过实例理解aside/nav元素的用法
- aside元素
- aside元素通常用来设置侧边栏。
- 用于定义article元素之外的内容,前提是这些内容与article元素内的内容相关。
- 同时也可嵌套在article元素内部使用,作为主要内容的附属信息,比如与主内容有关的参考资料,名词解释等。
- nav元素
- 通常用它给超链接分组用来定义导航栏,包括主导航栏,和侧边导航栏
- 并非所有的超链接都放在nav元素中,通常只把一个文档中的主导航栏放在nav中
- 在文章页面中,nav还可以用来给一个文章做一个目录的超链接
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
nav{width: 100%;height: 40px;background: #FF6677;text-align: center;padding: 6px}
/*放在一行*/
li{display: inline;}
/*去掉a标签的横线*/
a{text-decoration: none;}
</style>
</head>
<body>
<nav><ul>
<li><a href="">首页</a></li>
<li><a href="">电脑办公</a></li>
<li><a href="">平面设计</a></li>
<li><a href="">设计素材</a></li>
<li><a href="">电脑办公</a></li>
<li><a href="">平面设计</a></li>
</ul></nav>
</body>
</html>
html5--2.6新的布局元素(5)-nav的更多相关文章
- html5--2.9新的布局元素(6)-figure/figcaption
html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...
- html5--2.9新的布局元素(5)-hgroup/address
html5--2.9新的布局元素(5)-hgroup/address 学习要点 了解hgroup/address元素的语义和用法 通过实例理解hgroup/address元素的用法 对照新元素布局与d ...
- html5--2.7新的布局元素(4)-time
html5--2.7新的布局元素(4)-time 学习要点 了解微格式的概念 掌握time元素的用法 微格式的概念 HTML5中的微格式,是一种利用HTML5中的新标签对网页添加附加信息的方法,附加信 ...
- html5--2.1新的布局元素概述
html5--2.1新的布局元素概述 学习要点 了解HTML5新标签(元素)的优点 了解本章要学习的新的布局元素 了解本章课程的安排 HTML5新标签的优点: 更注重于内容而不是形式 对人的友好:更加 ...
- html5--2.5新的布局元素(4)-aside/nav
html5--2.5新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素(附属信息) aside元素通常用 ...
- html5--2.4新的布局元素(3)-section
html5--2.4新的布局元素(3)-section 学习要点 了解section元素的语义和用法 通过实例理解section元素的用法 article元素和section元素的区别和共同点 art ...
- html5--2.3新的布局元素(2)-article
html5--2.3新的布局元素(2)-article 学习要点 了解article元素的语义和用法 完成一个简单的实例 article元素(标签) 用于定义一个独立的内容区块,比如一篇文章,一篇博客 ...
- html5--2.1新的布局元素(1)-header/footer
html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...
- HTML5中支持新的媒体元素有这些
HTML5对媒体的支持性很强,支持以下媒体元素: · audio 定义音频 · video 定义视频 · embed 作为外部应用的容器 · source 多种媒体源的支持 · track ...
随机推荐
- 从有序数组中查找某个值 low_bound
二分搜索 题意: 给定长度为n的单调不下降数列a0, ...an-1和一个数k,求满足ai>=k条件的最小的i. 不存在的情况下输出n. 输入: 5 3 2 3 3 5 6 输出: ...
- codeforces 283C
给 n 中 钱币.以及每两种钱币的关系,表示,ai 的 个数 要大于 bi 组合成一个价值val,求方案数,好奇妙的一个处理方式,不得不说又学到了 #include<stdio.h> #i ...
- CentOS 5.5安装SVN(Subversion)
检查已安装版本 #检查是否安装了低版本的SVN[root@localhost /]# rpm -qa subversion #卸载旧版本SVN[root@localhost modules]# yum ...
- ubuntu 安装时遇到 hash sum mismatch 处理方法
ubuntu安装大软件时,下载经常容易出错,hash sum mismatch是其中一种,说到底还是网络不好,重试很多遍都是这个错误,最后的解决方案是把mismatch说的那个链接用firefox打开 ...
- Windows系统的Jenkins持续集成环境
Windows系统的Jenkins持续集成环境 如题:本文将介绍如何在Windows环境下运用Jenkins部署持续集成环境.之所以写本文,是因为在最近工作当中,学习使用Jenkins时,确实遇到了一 ...
- 献给写作者的 Markdown 新手指南及语法
烈推荐所有写作者学习和掌握该语言.为什么?可以参考: 『为什么作家应该用 Markdown 保存自己的文稿』. 『Markdown写作浅谈』 让你专注于文字而不是排版. 标题 只需要在文本前面加上 # ...
- php部分--题目:投票 重点:两个div套用,显示百分比;
1.建立两个表格:要显示百分比的话,就要在选项表中加上一列标记number 2.链接数据库,并对题目和选项进行显示 <?php $db=new MySQLi("localhost&qu ...
- 【BZOJ4843】[Neerc2016]Expect to Wait 排序
[BZOJ4843][Neerc2016]Expect to Wait Description ls最近开了一家图书馆,大家听说是ls开的,纷纷过来借书,自然就会出现供不应求的情况, 并且借书的过程类 ...
- 【BZOJ4568】[Scoi2016]幸运数字 倍增+线性基
[BZOJ4568][Scoi2016]幸运数字 Description A 国共有 n 座城市,这些城市由 n-1 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个幸运数字,以纪念 ...
- SCRM从入门到精通01
[SCRM从入门到精通01]如何基于微信开放接口开发企业的微信CRM? 业内一直都在传说微信是天生的CRM,可是没有人看到过微信CRM的真容.随着微信最新公众平台的改版和开放接口的微信认证开放,微信C ...