【HTML5】交互元素menu&command元素

時間 2019-11-18

標籤 HTML5 交互元素 menu&command menu command 欄目 HTML5 简体版

原文原文鏈接

1.交互元素<menu>javascript

1.1源碼css

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

View Code

1.2頁面效果html

1.3源碼分析java

在使用<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>