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. calc(NOIP模拟赛Round 3)

    原题: D e s c r i p t i o n 给三个正整数n,m和p,求(n^1+...n^m) mod p. Input 一行,三个整数n,m和p. Output 输出答案. S a m p ...

  2. 飞扬的小鸟(NOIP2014)(丧病DP题)

    原题传送门 刚开始我还以为这道题目非常的简单.. 然后随便打了一个DP,直接WA,被zxyer狠狠地D了一顿. 然后发现有好多细节.. 首先假如某横坐标没有管子,那么l[x]=0;h[x]=m+1; ...

  3. 杭电oj2028、2034、2035、2041、2043-2046

    2028  Lowest Common Multiple Plus #include<stdio.h> int gcd(int a,int b){ int temp,temp1; if(a ...

  4. [译] 如何像 Python 高手一样编程?

    转自:http://www.liuhaihua.cn/archives/23475.html Harries 发布于 7天前 分类:编程技术 阅读(15) 评论(0) 最近在网上看到一篇介绍Pytho ...

  5. eclipse块编辑

    1. Windows > Preferences然后键入keys或浏览到General > Keys.根据该键输入filter text的block selection快速找到快捷方式上市 ...

  6. 7.0不通过FileProvider解决调用相机给uri问题异常

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {//严格模式 StrictMode.VmPolicy.Builder builder = ...

  7. C++文件(夹)选择对话框

    由于各种应用,我们需要调用系统的打开文件对话框或者打开文件夹对话框,或两者兼有.今遇到这个情况已经解决,特写下这篇博文. 1.打开文件对话框常用的方法是使用系统的CFileDialog.这里介绍另外一 ...

  8. 使用EventHandler传递参数

    1.MouseEventHandler和EventHandler传递参数的局限性分析 开发过程中,特别是使用自定义控件时,常常需要对一个控件的click,mouseDown,mouseUp等事件的处理 ...

  9. jquery导出Excel表格

    1.引用js插件 <script src="tableExport.js"></script> <script src="jquery.ba ...

  10. Codeforces 938D Buy a Ticket (转化建图 + 最短路)

    题目链接  Buy a Ticket 题意   给定一个无向图.对于每个$i$ $\in$ $[1, n]$, 求$min\left\{2d(i,j) + a_{j}\right\}$ 建立超级源点$ ...