1.交互元素<menu>

1.1源码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>菜单交互元素</title>
  6. <style type="text/css">
  7. body{
  8. 	padding:5px;
  9.     font-size:14px
  10. }
  11. menu{
  12. 	padding:0;
  13.     margin:0;
  14.     display:block;
  15.     border:solid 1px #365167;
  16.     width:510px
  17. }
  18. menu li{
  19. 	list-style-type:none;
  20.     padding:5px;
  21.     margin:5px;
  22.     height:100px;
  23.     width:500px
  24. }
  25. menu li:hover{
  26. 	border:1px #7DA2CE;
  27.     background-color:#CFE3FD
  28. }
  29. menu li img{
  30. 	clear:both;
  31.     folat:left;
  32.     padding-right:8px;
  33.     margin-top:-2px
  34. }
  35. menu li span{
  36. 	padding-top:5px;
  37.     float:left;
  38.     font-size:13px
  39. }
  40. </style>
  41. </head>
  42.  
  43. <body>
  44. <menu>
  45. 	<li>
  46.     	<img src="img/qq.png"></img>
  47.         <span>QQ图标</span>
  48.     </li>
  49.     <li>
  50.     	<img src="img/weixin.png"></img>
  51.         <span>微信图标</span>
  52.     </li>
  53.     <li>
  54.     	<img src="img/sougou.png"></img>
  55.         <span>搜狗浏览器图标</span>
  56.     </li>
  57. </menu>
  58. </body>
  59. </html>

1.2页面效果

1.3源码分析

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

2.交互元素<command>

2.1源码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>菜单交互元素</title>
  6. <style type="text/css">
  7. body{
  8. 	padding:5px;
  9.     font-size:14px
  10. }
  11. menu{
  12. 	padding:0;
  13.     margin:0;
  14.     display:block;
  15.     border:solid 1px #365167;
  16.     width:510px
  17. }
  18. command{
  19. 	float:left;
  20. 	margin:5px;
  21. 	width:30px;
  22.     cursor:hand;
  23. }
  24. #dialog{
  25. 	display:none;
  26. 	position:absolute;
  27. 	left:25%;
  28. 	top:9%;
  29. 	font-size:13px;
  30. 	width:320px;
  31. 	height:150px;
  32. 	border:#666 solid 3px
  33. }
  34. #dialog .title{
  35. 	padding:5px;
  36. 	background-color:#eee;
  37. 	height:21px;
  38. 	line-height:21px
  39. }
  40. #dialog .title .fleft{
  41. 	float:left
  42. }
  43. #dialog .title .fright{
  44. 	float:right
  45. }
  46. #dialog .content{
  47. 	padding:50px
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. 	<menu>
  53. 		<command onClick="command_click('文件')">文件</command>
  54. 		<command onClick="command_click('打开')">打开</command>
  55. 	</menu>
  56. 	<div id="dialog">
  57. 		<div class="title">
  58. 			<div class="fleft">提示</div>
  59. 			<div class="fright">关闭</div>
  60. 		</div>
  61. 		<div class="content">
  62. 			<div id="divTip"></div>
  63. 		</div>
  64. 	</div>
  65. <script type="text/javascript">
  66. function command_click(strS){
  67. 	document.getElementById("dialog").style.display="block";
  68. 	var strContent="正在操作<font color=red>"+strS+"</font>选项";
  69. 	document.getElementById("divTip").innerHTML=strContent;
  70. }
  71. </script>
  72. </body>
  73. </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. 花匠（NOIP2013）（神奇纯模拟）

    原题传送门 这是道很奇怪的题目,真不知道为什么要放到T2. 也许是T1太水了 首先先看题, 题目要求一个数列中下标为偶数的点比临近的下表为奇数的点更大或更小 其实就是说在原数组中找到一个最长的波动数列 ...

  2. Xcode5 上64位编译 出错No architectures to compile for

    http://blog.csdn.net/chocolateloveme/article/details/16900999 详细错误信息如下: No architectures to compile ...

  3. UVALIVE 3571 Visible Lattice Points

    就欧拉函数然后地推一下. #include <map> #include <set> #include <list> #include <cmath> ...

  4. Linux内核情景分析的alloc_pages

    NUMA结构的alloc_pages ==================== mm/numa.c 43 43 ==================== 43 #ifdef CONFIG_DISCON ...

  5. Juce之旅-第一个例子（图形窗口）

    以这么说现在的人越来越妖精了,本来软件吗,要的是简单稳定实用,但是看现在的趋势是越来越多人注重界面的美化和和效果.比如IM类软件,QQ,飞信还有土的掉渣的MSN等,前两天看了一下YahooUI,觉得不 ...

  6. centos tc 端口限速

    #http://www.fx114.net/qa-178-108967.aspx#http://professor.blog.51cto.com/996189/1569481/#http://blog ...

  7. ubuntu安装ftp server并匿名访问

    $ sudo apt install vsftpd //修改添加以下配置 $ sudo vim /etc/vsftpd.conf #listen_ipv6=YES #注销ipv6监听 listen=Y ...

  8. c++不允许指向常量的指针赋值给不指向常量的指针

    #include <iostream> using namespace std; class A { public: int i; int j; } int main() { const ...

  9. Java屌炸天学习路线图

            第一阶段:Java基础篇 编号 课程 课程目录 打包下载地址 讲师 01 J2SE(40课时) http://www.java1234.com/zy001.html http://pa ...

  10. JavaScript 开发者的 10 款必备工具

    JavaScript,一种所有主流浏览器都支持的语言,是开发基于浏览器的 Web 应用程序的主力,几乎每年都会受到来自众多开发人员的关注.自然地,框架和库的生态系统自然而然地围绕着 JavaScrip ...