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. VS程序打包软件

    由于InstallShield Limited Edition for Visual Studio的教程.资料太少,所以我今天才决定写这个文章,专门针对C#项目打包,包括打包集成Microsoft . ...

  2. MFC 实现打印机打印功能

    Visual C++6.0是开发Windows应用程序的强大工具,但是要通过它实现程序的打印功能,一直是初学者的一个难点,经常有朋友询问如何在VC中实现打印功能,他们往往感到在MFC提供的框架内实现这 ...

  3. PHP-MYSQL时间

     Unix 时间戳  Unix timestamp ('1970-01-01 00:00:00' GMT 之后的秒数) MySQL: FROM_UNIXTIME() 给定一个Unix 时间戳 (可以是 ...

  4. Jquery操作基本筛选过滤器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. AC日记——Mice and Holes codeforces 797f

    797F - Mice and Holes 思路: XXYXX: 代码: #include <cmath> #include <cstdio> #include <cst ...

  6. FTP-Filezilla首次配置

    最新新弄了个服务器,先吐槽下,之前买镜像都是免费的,昨天试了,竟然收费.... 好吧,用户多了也正常. 代码发布之前都是很暴力的直接远程桌面然后粘贴,有个合作伙伴突然需要FTP,说之前用的就是,我就做 ...

  7. Python的程序结构[8] -> 装饰器/Decorator -> 装饰器浅析

    装饰器 / Decorator 目录 关于闭包 装饰器的本质 语法糖 装饰器传入参数 1 关于闭包 / About Closure 装饰器其本质是一个闭包函数,为此首先理解闭包的含义. 闭包(Clos ...

  8. AppScan入门工作原理详解

    AppScan,即 AppScan standard edition.其安装在 Windows 操作系统上,可以对网站等 Web 应用进行自动化的应用安全扫描和测试. Rational AppScan ...

  9. WCF 与其它技术的比较

    以下特性WCF都支持 特性 Web Service .Net Remoting Enterprise Services WSE(WS Enhancements) MSMQ 具有互操作性的Web服务 支 ...

  10. 解决413 Request Entity Too Large

    修改nginx配置    这是最简单的一个做法,着报错原因是nginx不允许上传配置过大的文件,那么件把nginx的上传大小配置调高就好. 1.打开nginx主配置文件nginx.conf,一般在/u ...