1.交互元素<menu>

1.1源码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>菜单交互元素</title>

<style type="text/css">

body{

	padding:5px;

    font-size:14px

}

menu{

	padding:0;

    margin:0;

    display:block;

    border:solid 1px #365167;

    width:510px

}

menu li{

	list-style-type:none;

    padding:5px;

    margin:5px;

    height:100px;

    width:500px

}

menu li:hover{

	border:1px #7DA2CE;

    background-color:#CFE3FD

}

menu li img{

	clear:both;

    folat:left;

    padding-right:8px;

    margin-top:-2px

}

menu li span{

	padding-top:5px;

    float:left;

    font-size:13px

}

</style>

</head>

<body>

<menu>

	<li>

    	<img src="img/qq.png"></img>

        <span>QQ图标</span>

    </li>

    <li>

    	<img src="img/weixin.png"></img>

        <span>微信图标</span>

    </li>

    <li>

    	<img src="img/sougou.png"></img>

        <span>搜狗浏览器图标</span>

    </li>

</menu>

</body>

</html>

1.2页面效果

1.3源码分析

在使用<menu>定义菜单元素时候，通常使用<menu>元素来定义菜单的框架，框架中的内容使用<li>元素来进行构造，以形成列表状态。

2.交互元素<command>

2.1源码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>菜单交互元素</title>

<style type="text/css">

body{

	padding:5px;

    font-size:14px

}

menu{

	padding:0;

    margin:0;

    display:block;

    border:solid 1px #365167;

    width:510px

}

command{

	float:left;

	margin:5px;

	width:30px;

    cursor:hand;

}

#dialog{

	display:none;

	position:absolute;

	left:25%;

	top:9%;

	font-size:13px;

	width:320px;

	height:150px;

	border:#666 solid 3px

}

#dialog .title{

	padding:5px;

	background-color:#eee;

	height:21px;

	line-height:21px

}

#dialog .title .fleft{

	float:left

}

#dialog .title .fright{

	float:right

}

#dialog .content{

	padding:50px

}

</style>

</head>

<body>

	<menu>

		<command onClick="command_click('文件')">文件</command>

		<command onClick="command_click('打开')">打开</command>

	</menu>

	<div id="dialog">

		<div class="title">

			<div class="fleft">提示</div>

			<div class="fright">关闭</div>

		</div>

		<div class="content">

			<div id="divTip"></div>

		</div>

	</div>

<script type="text/javascript">

function command_click(strS){

	document.getElementById("dialog").style.display="block";

	var strContent="正在操作<font color=red>"+strS+"</font>选项";

	document.getElementById("divTip").innerHTML=strContent;

}

</script>

</body>

</html>

2.2页面效果

点击文件前

点击文件后

该源码需要在Firefox(版本号为3.6.16)浏览器进行演示


【HTML5】交互元素menu&command元素的更多相关文章

  1. HTML5/HTML 4.01/XHTML 元素和有效的 DTD

    HTML5/HTML 4.01/XHTML 元素和有效的 DTD 下面的表格列出了所有的 HTML5/HTML 4.01/XHTML 元素,以及它们会出现在什么文档类型 (DTD) 中: 标签 HTM ...

  2. HTML（二）HTML元素（整体结构，块级元素，内联元素，结构元素，交互元素，元素嵌套规则）

    HTML整体结构解释 <!DOCTYPE html> // 文件应以"<!DOCTYPE ......>"首行顶格开始,推荐使用"<!DOC ...

  3. HTML5中新的结构元素

    HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: "http://www.w3. org/TR/html4/strict.d ...

  4. html5新增的主题结构元素

    article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容. 它可以是一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的插件. 或其他任何独立的 ...

  5. HTML5的全新语义化元素

    1.<section> <section>元素用来定义文档或应用程序中的区域(或节).例如,可以用它组织你的个人信息,一个<section>用于联系信息,另一个用于 ...

  6. HTML5系列二（标签元素、FileReader、拖放）

    nav元素的使用场合 页面中可以包含多个nav元素,通常情况下头部和尾部都会包含导航,这样提高了可访问性,访客能够清晰的将其辨认出来.nav元素是一个可以用来作为页面导航的链接组:其中的导航元素链接到 ...

  7. 疯狂html5演讲（两）：HTML5简经常使用的元素和属性（一个）:html5保留经常使用的元素

    html5取出一小部分的元素和属性:主要删除的各种元素和属性与文档相关的风格.例<font>.width等待,html5建议规范css样式表来控制html文档样式. 1.基本元素 < ...

  8. 读书笔记：《HTML5开发手册》--现有元素的变化

    读书笔记:<HTML5开发手册>-- 现存元素的变化 继续学习HTML5语义化的内容,今天主要介绍一下,HTML5之前的元素经HTML5规范后的语义及一些使用示例. 一.cite HTML ...

  9. 读书笔记：《HTML5开发手册》-- 现存元素的变化

    继续学习HTML5语义化的内容,今天主要介绍一下,HTML5之前的元素经HTML5规范后的语义及一些使用示例. 一.cite HTML5对cite元素的定义进行了很大的修改,在HTML4中,cite元 ...

随机推荐

  1. dpdk 代码分析一 ： 内存初始化

    一  前言 http://www.dpdk.org/  dpdk 是 intel 开发的x86芯片上用于高性能网络处理的基础库,业内比较常用的模式是linux-app模式,即 利用该基础库,在用户层空 ...

  2. HTML5初学笔记

    今天学习了下HTML5的基本知识,用画笔在画布上画了几个东西,效果如图,相关代码如下,注意点总结在末尾: <!DOCTYPE html> <html> <head> ...

  3. Java接口中的成员变量的意义

    转自:http://blog.csdn.net/ameyume/article/details/6189749 在interface里面的变量都是public static final 的.所以你可以 ...

  4. Python开发【项目】：FTP程序

    作业:开发一个支持多用户在线的FTP程序 要求: 用户加密认证 允许同时多用户登录 每个用户有自己的家目录 ,且只能访问自己的家目录 对用户进行磁盘配额,每个用户的可用空间不同 允许用户在ftp se ...

  5. (1)oracle安装、卸载、启动、关闭、登陆以及同时遇到的问题

    数据库概念 在oracle里数据库是一个静态的概念,数据库的资料保存在硬盘上,一个数据库可以有多个实例 数据库实例 数据库实例是一个动态的概念,它是进程+这个进程的内存块.就把它当成个指针吧,这个指针 ...

  6. 【拓扑排序topsort】【p1226】神经网络

    描述 Description 神经网络就是一张有向图,图中的节点称为神经元,而且两个神经元之间至多有一条边相连,下图是一个神经元的例子: 神经元[编号为1) 图中,X1—X3是信息输入渠道,Y1-Y2 ...

  7. 六. 异常处理4.try和catch的使用

    尽管由Java运行时系统提供的默认异常处理程序对于调试是很有用的,但通常你希望自己处理异常.这样做有两个好处.第一,它允许你修正错误.第二,它防止程序自动终止.大多数用户对于在程序终止运行和在无论何时 ...

  8. linux64位使用xampp及常见问题

    linux64位使用xampp及常见问题 换上ubntu9.10 64位,作为web工作者来说apache.php.mysql都必要安装的,在win里习惯了xampp,不是服务器为什么非要一个一个装呢 ...

  9. 关于poedit打开po文件乱码的问题

    由于poedit打开po文件时,无法识别译文使用的何种编码,因此需要在po文件头部加上以下代码: msgid "" msgstr "" "Plural ...

  10. 解决NVidia显卡最大化和最小化窗口时的卡顿问题

    最近因为做一个3D的项目,换上了一块Nvidia的显卡.然而,在使用的过程中,发现最大化和最小化窗口时的动画有卡顿现象,并且一般出现一次后便不会再出现, 可是等一会又会出现同样问题. 我以前使用i7的 ...