选项卡设置 - 王xx

效果图（以下图是在页面中所涉及到得图）

图片p1.gif

图片p2.gif

图片p.gif

图片b.gif

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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" onmouseover="TabbedPanelsl.showPanel(0)"><span>立体墙面</span></li>
    <li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanelsl.showPanel(1)"><span>装潢设计</span></li>
    <li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanelsl.showPanel(2)"><span>家居装饰</span></li>
    <li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanelsl.showPanel(3)"><span>时尚客厅</span></li>
</ul>

<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
    <ul>
   一、墙
<li>1. 点击菜单栏格式选择多线样式</li>
<li>2. 点击添加输入新样式名称，继续</li>
<li>3. 在封口设置：点击起点与终点；元素设置：添加两条0.25与-0.25的两条线，设置为当前。</li>
<li>4. 这样就能画出有四条线的墙</li>
</ul>
</div>
    <div class="TabbedPanelsContent"><ul>
    二、门
<li>1. 点击工具栏选择直线，画出两条呈90度直角的线</li>
<li>2. 复制其中一条线，点击旋转工具，使其旋转到两条直角线的中央位置处</li>
<li>3. 点击工具栏中的圆弧工具，点击三条线的末端这时就会出现一个圆弧，将中央的直线删除就是一扇门</li>
</ul>
</div>
    <div class="TabbedPanelsContent"><ul>
三、音响
<li>1. 矩形：点击菜单栏格式，点击多样式，设置新添加两条线</li>
<li>2. 斜线：选择直线工具划出一条斜线，选中其点击右侧阵列工具进行合适自己的设置</li>
<li>3. 多出来的线条利用修剪去掉</li>
<li>4.喇叭：点击圆工具画出圆形，点击下方的对象捕捉，右击选中中心确定，这样就可以在同一点画出大小不同的圆</li>
</ul>
</div>
    <div class="TabbedPanelsContent"><ul>
    四、客厅地板
<li>1. 点击直线画出两条呈90度直角的线</li>
<li>2. 复制其中一条，点击复制的直线选择旋转工具，将其旋转至两条直线的中央，然后选择这个图形旋转至需要的方向</li>
<li>3. 点击阵列进行自己需要的设置</li>
</ul>
</div>
sprytabbedpanels.css
<script type="text/javascript">

</script>
</body>
</html>

@charset "UTF-8";

/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */

/* Horizontal Tabbed Panels
*
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
*/

/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
*
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
*
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
*/
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 500px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}

/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
*
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
*/
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}

/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
*
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
*
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
*/
.TabbedPanelsTab {
display:block;
height:30px;
float:left;
position:relative;
top:2px;
padding:0px 0px 0px 15px;
margin:0px 0px 0px 0px;
background:url(../p.gif);
list-style:none;
cursor:pointer;
color:#ffff;
font:bold 14px Arial, Helvetica, sans-serif;
-moz-user-select:none;
-khtml-user-select:none;
}
.TabbedPanelsTab span{
display:block;
background:url(../p2.gif) right top;
padding:7px 25px 7px 0;}

/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
*/
.TabbedPanelsTabHover {
background:url(../p1.gif);
color:#FFF;
}
.TabbedPanelsTabHover span{
display:block;
background:url(../p1.gif) right top;
padding:7px 25px 7px 0;}

/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
*
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
*/
.TabbedPanelsTabSelected {
background:url(../p.gif);
color:#603;
}
.TabbedPanelsTabSelected span {
display:block;
background:url(../p.gif) right top;
padding:7px 25px 7px 0;
}
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
*/
.TabbedPanelsTab a {
color: black;
text-decoration: none;
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
*
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
*/
.TabbedPanelsContentGroup {
clear: both;
border:solid 1px #000;
background-color:#fff;
}

/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
*
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
*/
.TabbedPanelsContent {
padding: 4px;
font-family:Arial, Helvetica, sans-serif;
background:url(../b.gif) right top;
color:#060;
}

/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
*/
.TabbedPanelsContentVisible {
}

/* Vertical Tabbed Panels
*
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
*
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
*/

/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
*/
.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;
}

/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
*/
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
}

/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
*/
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
}

/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
*/
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
}

posted on 2011-10-28 12:44 王xx 阅读(274) 评论(0) 收藏举报

刷新页面返回顶部