简单选项卡加圆角-白红宇

简单选项卡加圆角

阅读量：4357 次

发布时间：2019-06-07

本文共 4287 字，大约阅读时间需要 14 分钟。

最终效果

所用素材：

html页面代码：

<head>

<title>无标题文档</title>

</head>

<body>

<li class="TabbedPanelsTab" tabindex="0"><span>Contact Us</span></li>

<li class="TabbedPanelsTab" tabindex="0"><span>Web Design</span></li>

</ul>

<p>1.There are some good news.</p>

<p>3.The text here are example.</p>

<p>5.The text here are example.</p>

</div>

</div>

<p>1.There are some good news.</p>

<p>3.The text here are example.</p>

<p>5.The text here are example.</p>

</div>

</div>

<p>1.There are some good news.</p>

<p>3.The text here are example.</p>

<p>5.The text here are example.</p>

</div>

</div>

1234567890

</div>

</div>

abcdefghijklmnopqrstuvwxzy

</div>

</div>

<!--

var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");

//-->

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

你可能感兴趣的文章

salt未持久化保存导致应用启动时候的网络请求失败（没有权限）

查看>>

个人常用linux 命令

查看>>

spark 插入数据到mysql时遇到的问题 org.apache.spark.SparkException: Task not serializable

form表单提交的Servlet时可以从servlet跳转到frameset中的指定框架

查看>>

在-for 循环里面如何利用ref 操作dom

查看>>

动态生成二级菜单

查看>>

heartbeat+drdb+nfs实现高可用

查看>>

Maven与nexus关系

查看>>

详解Spring的applicationContext.xml文件

查看>>

推荐一款非常棒的谷歌插件---快速查看HTML页面元素的CSS样式

查看>>

一次伪造登录请求

查看>>

Tiny4412 Android 5.0 编译系统学习笔记

set password to qcow2

查看>>

Xcode使用 pod 后，在pch 中出现 file not found 相关错误解决方案

查看>>