即列表展现菜单中的选项

 

<!DOCTYPE html>

<menu>是HTML
5再次启用的旧标记,常与<li>列表成分结合使用,用来定义多少个列表的菜系,属性以及描述: 

<html>

属性                               值  
                                               描述

<head>

autosubmit                   true/flase
                                   
true时:当表单中的成分发生变化时会自动提交

<meta charset=”UTF-8″>

lable                            
 任意字符                                      
为菜单定义三个可知的标号

<title>CSS3 Menu</title>

type                              
context toolbar list                    
定义菜单呈现的门类,暗中认可为list,即列表呈现菜单中的选项

<style type=”text/css”>

实例1:

*{

 

margin:0;

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

padding:0;

 

box-sizing:

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

}

图片 1

body{

 

background:#CCCAA1;

font-family: sans-serif;

}

ul li{

list-style:none;

}

h1{

padding:15px 0 25px 0;

text-align:center;

font-size:2.2em;

}

#wrap{

width: 728px;

margin: 60px auto;

background: #fff;

padding: 10px;

height: 280px;

border:12px solid #DDE0CA;

}

.nav{

overflow:hidden;

margin:0 auto;

width:750px;

}

.nav li{

width:145px;

height:180px;

display:inline-block;

float:left;

cursor:pointer;

transition:all 0.4s;

-webkit-transition:all 0.4s;

-moz-transition:all 0.4s;

}

.nav li:hover{

opacity:1;

height:190px;

}

.nav li.hm:hover{

border-bottom:4px solid rgba(11, 132, 138, 1);

}

.nav li.fb:hover{

border-bottom:4px solid rgba(241, 83, 70, 1);

}

.nav li.gp:hover{

border-bottom:4px solid rgba(32, 16, 49, 1);

}

.nav li.tw:hover{

border-bottom:4px solid rgba(228, 148, 7, 1);

}

.nav li.cl:hover{

border-bottom:4px solid rgba(67, 138, 15, 1);

}

img.ico{

background:rgba(255, 255, 255, 0.4);

padding:14px;

border-radius:100%;

margin:30px auto;

display:block;

transition:all 0.8s;

-webkit-transition:all 0.8s;

-moz-transition:all 0.8s;

box-shadow: 0 0 0 30px rgba(255,255,255,0.1);

-webkit-box-shadow: 0 0 0 10px rgba(255,255,255,0.1);

}

更加多材质免费享受加群      120342833      验证回答      ZZ

.nav li:hover img.ico{

background:rgba(255, 255, 255, 0.9);

box-shadow: 0 0 0 10px rgba(255,255,255,0.8);

-webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0.8);

}

.nav li span{

text-align:center;

display:block;

padding-top:10px;

color:rgba(255, 255, 255, 1);

font-size:0.9em;

transition:padding-top 0.4s;

-webkit-transition:padding-top 0.4s;

}

.nav li:hover span{

padding-top:20px;

}

.hm{

background:rgba(29, 162, 168, 0.8);

}

.fb{

background:rgba(255, 89, 76, 0.8);

}

.gp{

background:rgba(47, 31, 64, 0.8);

}

.tw{

background:rgba(254, 162, 14, 0.8);

}

.cl{

background:rgba(93, 181, 29, 0.8);

}

</style>

</head>

 

<body>

<div id=”wrap”>

<h1>CSS3 Menu</h1>

<ul class=”nav”>

<li class=”hm”>

<img class=”ico”
src=”http://cdn.attach.qdfuns.com/notes/pics/201702/24/220137hxtmaplbzsgm7ab7.png
alt=””>

<span>Home</span>

</li>

<li class=”fb”>

<img class=”ico”
src=”http://cdn.attach.qdfuns.com/notes/pics/201702/24/220110swkww3xkk7zx73zg.png
alt=””>

<span>Facebook</span>

</li>

<li class=”gp”>

<img class=”ico”
src=”http://cdn.attach.qdfuns.com/notes/pics/201702/24/220128suwqrjf7my311mya.png
alt=””>

<span>Google-plus</span>

</li>

<li class=”tw”>

<img class=”ico”
src=”http://cdn.attach.qdfuns.com/notes/pics/201702/24/220146srq27u0ecg5s74e0.png
alt=””>

<span>Twitter</span>

</li>

<li class=”cl”>

<img class=”ico”
src=”http://cdn.attach.qdfuns.com/notes/pics/201702/24/220053yu37skbsuphuh74g.png
alt=””>

<span>Call</span>

</li>

</ul>

</div>

</body>

</html>

相关文章