码迷,mamicode.com
首页 > Web开发 > 详细

HTML 5常用的交互元素————菜单交互元素(1)

时间:2018-01-01 18:15:57      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:属性   oct   blog   body   bsp   alt   自动   png   ble   

 

<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>

技术分享图片

 

HTML 5常用的交互元素————菜单交互元素(1)

标签:属性   oct   blog   body   bsp   alt   自动   png   ble   

原文地址:https://www.cnblogs.com/fmjlwb/p/8167897.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!