返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: dw入门 >

CSS水平滑动菜单和Tab面板

2020-04-21 文章标签: css 按钮 教程 浏览次数:

我们讲解下HTML5和CSS3,包含知识点CSS设置设计水平滑动菜单,设计垂直滑动菜单,设计Tab面板,设计下拉式面板这些都不需要借助javascript代码,纯css代码实现,有javascript兴趣的也可以看看jquery栏目。

HTML5教程

1.CSS设置设计水平滑动菜单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面板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设计下拉式面板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>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。