HTML 5常用的交互元素————菜单交互元素(1)
<menu>是HTML 5重新启用的旧标记,常与<li>列表元素组合使用,用来定义一个列表的菜单,属性以及描述:
属性 值 描述
autosubmit true/flase true时:当表单中的元素发生变化时会自动提交
lable 任意字符 为菜单定义一个可见的标注
type context toolbar list 定义菜单显示的类型,默认为list,即列表显示菜单中的选项
实例1:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>交互元素《menu》的使用</title>
<style type="text/css">
body{
font-size:12px;
padding:5px
}
menu{
padding:0;
margin: 0;
display:block;
border:solid 1px #365167;
width:222px
}
menu li{
list-style-type:none;
padding:5px;
margin:5px;
height:28px;
width:200px
}
menu li:hover{
border:solid 1px #7DA2CE;
background-color:#CFE3FD
}
menu li img{
clear:both;
float:left;
padding-right: 8px;
margin-top:-2px
}
menu li span{
float:left;
padding-top: 5px;
font-size:13px
}
...省略部分实例重复样式代码
</style>
</head>
<body>
<menu>
<li>
<img src="file:///E:/%E7%AB%99%E7%82%B9/%E5%9B%BE%E5%83%8F%E6%96%87%E4%BB%B6%E5%A4%B9/"></img>
<span>Mozilla Firefox</span>
</li>
<li>
<img src="file:///E:/%E7%AB%99%E7%82%B9/%E5%9B%BE%E5%83%8F%E6%96%87%E4%BB%B6%E5%A4%B9/"><img>
<span>Safari</span>
</li>
</menu>
</body>
</html>