简单选项卡加圆角

最新推荐文章于 2020-12-17 18:51:10 发布

weixin_30572613

最新推荐文章于 2020-12-17 18:51:10 发布

阅读量213

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yo-yo/archive/2011/11/07/2238823.html

版权

最终效果

所用素材：

html页面代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0"><span>Home</span></li>
    <li class="TabbedPanelsTab" tabindex="0"><span>Contact Us</span></li>
    <li class="TabbedPanelsTab" tabindex="0"><span>Web Dev</span></li>
    <li class="TabbedPanelsTab" tabindex="0"><span>Web Design</span></li>
    <li class="TabbedPanelsTab" tabindex="0"><span>Map</span></li>
</ul>
<div class="TabbedPanelsContentGroup">

    <div class="TabbedPanelsContent">
    <h3></h3>
      <div class="middle">
       <p>1.There are some good news.</p>
          <p>2.Not only good news.</p>
          <p>3.The text here are example.</p>
          <p>4.Not only good news.</p>
          <p>5.The text here are example.</p>
        </div>
        <div class="foot"><span></span></div>
    </div>



    <div class="TabbedPanelsContent">
    <div class="middle">
       <p>1.There are some good news.</p>
          <p>2.Not only good news.</p>
          <p>3.The text here are example.</p>
          <p>4.Not only good news.</p>
          <p>5.The text here are example.</p>
        </div>
        <div class="foot"><span></span></div>
    </div>

    <div class="TabbedPanelsContent">
    <div class="middle">
       <p>1.There are some good news.</p>
          <p>2.Not only good news.</p>
          <p>3.The text here are example.</p>
          <p>4.Not only good news.</p>
          <p>5.The text here are example.</p>
        </div>
        <div class="foot"><span></span></div>
    </div>

    <div class="TabbedPanelsContent">
    <div class="middle">
       1234567890
        </div>
        <div class="foot"><span></span></div>
    </div>

    <div class="TabbedPanelsContent">
    <div class="middle">
       abcdefghijklmnopqrstuvwxzy
        </div>
        <div class="foot"><span></span></div>
    </div>
</div>
</div>
<script type="text/javascript">

</script>
</body>

CSS页面代码：

@charset "UTF-8";

.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}

.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}

.TabbedPanelsTab {
display:block;
height:30px;
float: left;
position: relative;
top: 2px;
padding: 0px 0px 0px 15px;
margin: 0px 5px 1px 0px;
background:url(1-y.gif);
list-style: none;
cursor: pointer;
color:#fff;
font:bold 14px Arial;
-moz-user-select: none;
-khtml-user-select: none;
}
.TabbedPanelsTab span{
display:block;
background:url(1-y.gif) right top;
padding:7px 20px 7px 0px;
}

.TabbedPanelsTabHover {
background:url(2-y.gif);
color:#39F;
}

.TabbedPanelsTabHover span{
display:block;
background:url(2-y.gif) right top;
padding:7px 20px 7px 0px;
}

.TabbedPanelsTabSelected {
background:url(3-y.gif);
color:#900;
}
.TabbedPanelsTabSelected span{
display:block;
background:url(3-y.gif) right top;
padding:7px 20px 7px 0px;
}

.TabbedPanelsTab a {
color: black;
text-decoration: none;
}

.TabbedPanelsContentGroup {
width:600px;
clear: both;
margin:-10px 0 0 -6px;
padding:0;
background:url(left-top.gif) no-repeat left top;
}
/*背景色、边框色*/

.TabbedPanelsContent {
padding: 4px;
background:url(right-top.gif) no-repeat right top;
}
.middle{
padding:0px 4px 10px 20px;
margin:50px -4px 0 0;
background:url(right-middle.gif) repeat-y right top;
}
.foot{
margin:0 0 0 -6px;
padding:0px 0 0px 0;
background:url(left-bottom.gif) no-repeat left bottom;
}
.foot span{
display:block;
margin:0 -4px -10px 0;
padding:0 20px 30px 20px;
background:url(right-bottom.gif) no-repeat right bottom;
height:25px;
}

.TabbedPanelsContentVisible {
}

.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}

.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
}

.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
}

.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
}

转载于:https://www.cnblogs.com/yo-yo/archive/2011/11/07/2238823.html

weixin_30572613

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单选项卡加圆角

最终效果所用素材：html页面代码：<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="SpryAssets/SpryTabbedPanels...
复制链接

扫一扫