我们讲解下HTML5和CSS3，包含知识点CSS设置设计水平滑动菜单，设计垂直滑动菜单，设计Tab面板，设计下拉式面板这些都不需要借助javascript代码，纯css代码实现，有javascript兴趣的也可以看看jquery栏目。
1.CSS设置设计水平滑动菜单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表布局</title>
<style type="text/css">
#menu {/* 定义列表样式 */
background: url(//freemuban.com/js/421/1/bg1.gif) #fff; /* 定义导航菜单的背景图像 */
padding-left: 32px; /* 定义左侧的补白 */
margin: 0px; /* 清除边界 */
list-style-type: none; /* 清除项目符号 */
height:35px; /* 固定高度，否则会自动收缩为0 */
}
#menu li {/* 定义列表项样式 */
float: left; /* 向左浮动 */
margin:0 4px; /* 增加菜单项之间的距离 */
padding-left:18px; /* 定义左侧补白，避免左侧圆角被覆盖 */
background:url(//freemuban.com/js/421/1/menu4.gif) left center repeat-x; /* 定义背景图像，并左中对齐 */
}
#menu li a {/* 定义超链接默认样式 */
padding-right: 18px; /* 定义右侧补白，与左侧形成对称空白区域 */
float: left; /* 向左浮动 */
height: 35px; /* 固定高度 */
color: #bbb; /* 定义百分比 宽度，实现与li同宽 */
line-height: 35px; /* 定义行高，间接实现垂直对齐 */
text-align: center; /* 定义文本水平居中 */
text-decoration: none; /* 清除下划线效果 */
background:url(//freemuban.com/js/421/1/menu4.gif) right center repeat-x; /* 定义背景图像 */
}
#menu li a:hover {/* 定义鼠标经过超链接的样式 */
text-decoration:underline; /* 定义下划线 */
color: #fff/* 白色字体 */
}
</style>
</head>
<body>
<h1>滑动门</h1>
<ul id="menu">
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">微博圈</a></li>
<li><a href="#" title="">移动开发</a></li>
<li><a href="#" title="">编程与设计</a></li>
<li><a href="#" title="">程序员与语言</a></li>
<li><a href="#" title="">编程语言排行榜</a></li>
</ul>
</body>
</html>
2.设计垂直滑动菜单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表布局</title>
<style type="text/css">
#menu {
background: url(//freemuban.com/js/421/1/bg1.gif) #fff;
padding-left: 32px;
margin: 0px;
list-style-type: none;
height:35px;
}
#menu li {
float: left;
margin:0 4px;
}
#menu span {
float:left;
padding-left:18px;
background:url(//freemuban.com/js/421/1/menu6.gif) left top repeat-x;
}
#menu li a {
padding-right: 18px;
float: left;
height: 35px;
color: #bbb;
line-height: 35px;
text-align: center;
text-decoration: none;
background:url(//freemuban.com/js/421/1/menu6.gif) right top repeat-x;
}
#menu a:hover {
color: #fff;
background-position:right bottom;
}
#menu a:hover span {
background-position:left bottom;
cursor:pointer;
cursor:hand;
}
</style>
</head>
<body>
<h1>滑动门</h1>
<ul id="menu">
<li><a href="#" title=""><span>首页</span></a></li>
<li><a href="#" title=""><span>微博圈</span></a></li>
<li><a href="#" title=""><span>移动开发</span></a></li>
<li><a href="#" title=""><span>编程与设计</span></a></li>
<li><a href="#" title=""><span>程序员与语言</span></a></li>
<li><a href="#" title=""><span>编程语言排行榜</span></a></li>
</ul>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表布局</title>
<style type="text/css">
#menu {
background: url(//freemuban.com/js/421/1/bg1.gif) #fff;
padding-left: 32px;
margin: 0px;
list-style-type: none;
height:35px;
}
#menu li {
float: left;
margin:0 4px;
}
#menu span {
float:left;
padding-left:18px;
background:url(//freemuban.com/js/421/1/menu6.gif) left top repeat-x;
transition: all .3s ease-in;
}
#menu li a {
padding-right: 18px;
float: left;
height: 35px;
color: #bbb;
line-height: 35px;
text-align: center;
text-decoration: none;
background:url(//freemuban.com/js/421/1/menu6.gif) right top repeat-x;
transition: all .3s ease-in;
}
#menu a:hover {
color: #fff;
background-position:right bottom;
}
#menu a:hover span {
background-position:left bottom;
cursor:pointer;
cursor:hand;
}
</style>
</head>
<body>
<h1>滑动门</h1>
<ul id="menu">
<li><a href="#" title=""><span>首页</span></a></li>
<li><a href="#" title=""><span>微博圈</span></a></li>
<li><a href="#" title=""><span>移动开发</span></a></li>
<li><a href="#" title=""><span>编程与设计</span></a></li>
<li><a href="#" title=""><span>程序员与语言</span></a></li>
<li><a href="#" title=""><span>编程语言排行榜</span></a></li>
</ul>
</body>
</html>
3.css设计Tab面板
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表布局</title>
<style type="text/css">
/* 页面元素的默认样式
-------------------------------------------------------------------------------------*/
a {/* 超链接的默认样式 */
color:#00F; /* 定义超链接的默认颜色 */
text-decoration:none; /* 清除超链接的下划线样式 */
}
a:hover {/* 鼠标经过超链接的默认样式 */
color: #c00; /* 定义鼠标经过超链接的默认颜色 */
}
ul {/* 定义列表结构基本样式 */
list-style:none; /* 清除默认的项目符号 */
padding:0; /* 清除补白 */
margin:0px; /* 清除边界 */
text-align:center; /* 定义包含文本居中显示 */
}
/* 选项卡结构
------------------------------------------------------------------------------------*/
#tab {/* 定义选项卡的包含框样式 */
width:920px; /* 定义Tab面板的宽度 */
margin:0 auto; /* 定义Tab面板居中显示 */
font-size:12px; /* 定义Tab面板的字体大小 */
overflow:hidden;/* 隐藏超出区域的内容 */
}
/* 菜单样式类
-------------------------------------------------------------------------------------*/
.Menubox {/* Tab菜单栏的类样式 */
width:100%;/* 定义宽度，满包含框宽度显示 */
background:url(//freemuban.com/js/421/1/tab1.gif); /* 定义Tab菜单栏的背景图像 */
height:28px; /* 固定高度 */
line-height:28px; /* 定义行高，间接实现垂直文本居中显示 */
}
.Menubox ul {/* Tab菜单栏包含的列表结构基本样式 */
margin:0px; /* 清除边界 */
padding:0px; /* 清除补白 */
}
.Menubox li {/* Tab菜单栏包含的列表项基本样式 */
float:left; /* 向左浮动，实现并列显示 */
display:block; /* 块状显示 */
cursor:pointer; /* 定义手形指针样式 */
width:114px; /* 固定宽度 */
text-align:center; /* 定义文本居中显示 */
color:#949694; /* 字体颜色 */
font-weight:bold; /* 加粗字体 */
}
.Menubox li img{ width:100%;}
.Menubox li.hover {/* 鼠标经过列表项的样式类 */
padding:0px; /* 清除补白 */
background:#fff; /* 加亮背景色 */
width:116px; /* 固定宽度显示 */
border:1px solid #A8C29F; /* 定义边框线 */
border-bottom:none; /* 清除底边框线样式 */
background:url(//freemuban.com/js/421/1/tab2.gif); /* 定义背景图像 */
color:#739242; /* 定义字体颜色 */
height:27px; /* 固定高度 */
line-height:27px; /* 定义行高，实现文本垂直居中 */
}
.Contentbox {/* 定义Tab面板中内容包含框基本样式类 */
clear:both; /* 清除左右浮动元素 */
margin-top:0px; /* 清除顶边界 */
border:1px solid #A8C29F; /* 定义边框线样式 */
border-top:none; /* 清除顶部边框线样式 */
padding-top:8px; /* 定义顶部补白，增加与Tab菜单距离 */
}
.hide {/* 隐藏样式类 */
display:none; /* 隐藏元素显示 */
}
</style>
<script>
function setTab(cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById("tab_"+i);
var con=document.getElementById("con_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
</head>
<body>
<div id="tab">
<div class="Menubox">
<ul>
<li id="tab_1" class="hover" onclick="setTab(1,4)">明星</li>
<li id="tab_2" onclick="setTab(2,4)">搞笑</li>
<li id="tab_3" onclick="setTab(3,4)">美女</li>
<li id="tab_4" onclick="setTab(4,4)">摄影</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_1" class="hover" ><img src="//freemuban.com/js/421/1/1.png" /></div>
<div id="con_2" class="hide"><img src="//freemuban.com/js/421/1/2.png" /></div>
<div id="con_3" class="hide"><img src="//freemuban.com/js/421/1/3.png" /></div>
<div id="con_4" class="hide"><img src="//freemuban.com/js/421/1/4.png" /></div>
</div>
</div>
</body>
</html>
4.CSS设计下拉式面板
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉式面板</title>
<style type="text/css">
#lists {
background: url(//freemuban.com/js/421/1/bg1.gif) #fff;
padding-left: 32px;
margin: 0px;
height:35px;
font-size:12px;
}
#lists li {
display:inline;
float:left;
height:35px;
background:url(//freemuban.com/js/421/1/menu5.gif) no-repeat left center;
padding-left:12px;
position:relative;
}
#lists li a.tl {
display:block;
width:80px;
height:35px;
text-decoration:none;
text-align:center;
line-height:35px;
font-weight:bold;
color:#fff;
background:url(//freemuban.com/js/421/1/menu5.gif) no-repeat right center;
padding-right:12px;
}
#lists div {
display:none;
}
#lists :hover div {
display:block;
width:598px;
background:#faebd7;
position:absolute;
left:1px;
top:34px;
border:1px solid #888;
padding-bottom:10px;
}
</style>
</head>
<body>
<ul id="lists">
<li><a href="#" class="tl">商品导购
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="pos1">
<dl id="menu">
<dt>产品大类</dt>
<dd><a href="#" title="">图书、音像、数字商品</a></dd>
<dd><a href="#" title="">家用电器</a></dd>
<dd><a href="#" title="">手机、数码、京东通信预约</a></dd>
<dd><a href="#" title="">电脑、办公</a></dd>
<dd><a href="#" title="">家居、家具、家装、厨具</a></dd>
<dd><a href="#" title="">服饰内衣、珠宝首饰</a></dd>
<dd><a href="#" title="">个护化妆</a></dd>
<dd><a href="#" title="">鞋靴、箱包、钟表、奢侈品</a></dd>
<dd><a href="#" title="">运动户外</a></dd>
</dl>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</body>
</html>
