在iframe子页面中添加导航功能代码
2015-04-28 14:14
225 查看
使用iframe嵌套页面，并在页面中添加导航功能，iframe只适应高度
效果图如下图
主页面
<div class="date_app" id="postRightContent" style="height: 725px; margin-bottom: 30px;">
<iframe id="rightIframePage" name="rightIframePage" scrolling="no"
onLoad="iFrameHeights();" width="100%;" frameborder="0"
src="/a.jsp">
</iframe>
</div>
主页面js
//让iframe只适应高度
function iFrameHeights() {
var ifm = document.getElementById("rightIframePage");
ifm.height = 0;
var subWeb = document.frames ? document.frames["rightIframePage"].document : ifm.contentDocument;
if (ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
ifm.parentElement.style.height = subWeb.body.scrollHeight + "px";
}
}
iframe页面a.jsp
<link rel="stylesheet" type="text/css" href="/css/titleNavigation.css">
<div style="width: 800px; margin: auto;">
<a id="broker1" name="broker1"> </a>
<div id="brokerZoneReport" style="min-width: 500px; height: 300px; margin: 10px auto;"></div>
<a id="broker2" name="broker2"> </a>
<div id="brokerDistrictReport" style="min-width: 500px; height: 300px; margin: 10px auto"></div>
<a id="broker3" name="broker3"> </a>
<div id="brokerCareerReport" style="min-width: 500px; height: 300px; margin: 10px auto;"></div>
<a id="broker4" name="broker4"> </a>
<div id="brokerCompanyReport" style="min-width: 500px; height: 300px; margin: 10px auto"></div>
<a id="broker5" name="broker5"> </a>
<div id="brokerNumberOfListingsReport" style="min-width: 500px; height: 300px; margin: 10px auto;"></div>
<a id="broker6" name="broker6"> </a>
<div id="brokerAccreditationReport" style="min-width: 500px; height: 300px; margin: 10px auto"></div>
<a id="broker7" name="broker7"> </a>
<div id="brokerNumberOfTransactionsReport" style="min-width: 500px; height: 300px; margin: 10px auto;"></div>
<a id="broker8" name="broker8"> </a>
<div id="brokerGenderReport" style="min-width: 500px; height: 300px; margin: 10px auto"></div>
</div>
<div id="sideToolbar" class="sideToolbar">
<div id="sideCatalog" class="sideCatalogBg"
style="visibility: visible;">
<div id="sideCatalog-sidebar">
<div class="sideCatalog-sidebar-top"></div>
<div class="sideCatalog-sidebar-bottom"></div>
</div>
<div id="sideCatalog-updown" style="visibility: hidden;">
<div id="sideCatalog-up" class="sideCatalog-up-enable" title="向上翻页"></div>
<div id="sideCatalog-down" class="sideCatalog-down-enable"
title="向下翻页"></div>
</div>
<div id="sideCatalog-catalog">
<dl style="width: 175px; zoom: 1">
<dd class="sideCatalog-item1 highlight" id="sideToolbar-item-0-1">
<span class="sideCatalog-index1">1</span>
<a id="sideToolbar-item-a-1" href="javascript:void(0);" class="nslog:1026" title="城区报表">城区报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item-0-2">
<span class="sideCatalog-index1">2</span>
<a id="sideToolbar-item-a-2" href="javascript:void(0);" class="nslog:1026" title="片区报表">片区报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item-0-3">
<span class="sideCatalog-index1">3</span>
<a id="sideToolbar-item-a-3" href="javascript:void(0);" class="nslog:1026" title="职业特长报表">职业特长报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item-0-4">
<span class="sideCatalog-index1">4</span>
<a id="sideToolbar-item-a-4" href="javascript:void(0);" class="nslog:1026" title="公司报表">公司报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item-0-5">
<span class="sideCatalog-index1">5</span>
<a id="sideToolbar-item-a-5" href="javascript:void(0);" class="nslog:1026" title="房源数报表">房源数报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item-0-6">
<span class="sideCatalog-index1">6</span>
<a id="sideToolbar-item-a-6" href="javascript:void(0);" class="nslog:1026" title="资格认证报表">资格认证报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item-0-7">
<span class="sideCatalog-index1">7</span>
<a id="sideToolbar-item-a-7" href="javascript:void(0);" class="nslog:1026" title="成交数报表">成交数报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item-0-8">
<span class="sideCatalog-index1">8</span>
<a id="sideToolbar-item-a-8" href="javascript:void(0);" class="nslog:1026" title="性别报表">性别报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<!--
<dd class="sideCatalog-item2" id="sideToolbar-item-0-5_1">
<span class="sideCatalog-index2">8.1</span><a href="#5_1"
class="nslog:1026" title="资格认证报表" onclick="return false;">资格认证报表</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item-0-5_2">
<span class="sideCatalog-index2">8.2</span><a href="#5_2"
class="nslog:1026" title="成交数报表" onclick="return false;">成交数报表</a><span
class="sideCatalog-dot"></span>
</dd>
-->
</dl>
</div>
</div>
<a id="sideCatalogBtn" href="javascript:void(0);" style="visibility: visible;" class=""></a>
<a id="sideToolbar-up" href="javascript:void(0)" style="visibility: visible;" title="回到顶部"></a>
</div>
导航js 代码
$(document).ready(function() {
//让iframe回到顶部
parent.scrollTo(0,0);
initTitleNavigationEvent("broker");
// 主页面滚动时，模仿position: fixed;这种功能，因为position: fixed;对于iframe子页面来说不起作用
$(parent.window).scroll(function() {
$('#sideToolbar').css({
top : $(parent.window).scrollTop() + 116
});
// 滚动父页面滚动条时相应的切换导航位置，即让导航跟随页面滚动
scrollNavlWithHtmlScroll("broker");
});
});
/**
* 初始化事件
*/
function initTitleNavigationEvent(name){
// 添加单击事件
$("#sideCatalog-catalog dl dd a").bind('click',{name : name}, function(e) {
var id = e.target.id.substring(e.target.id.lastIndexOf("-") + 1, e.target.id.length);
quickPositioning(e.data.name + id);
$("#sideCatalog-catalog dl dd").removeClass("highlight");
$(this).parent().addClass("highlight");
});
// 滚动到顶部
$("#sideToolbar-up").bind('click', function(e) {
parent.scrollTo(0,0);
});
// 显示或隐藏导航
$("#sideCatalogBtn").bind('click', function(e) {
if ($(this).hasClass('sideCatalogBtnDisable')) {
$("#sideCatalog-sidebar").show();
$("#sideCatalog-updown").show();
$("#sideCatalog-catalog").show();
$("#sideCatalogBtn").removeClass("sideCatalogBtnDisable");
} else {
$("#sideCatalog-sidebar").hide();
$("#sideCatalog-updown").hide();
$("#sideCatalog-catalog").hide();
$("#sideCatalogBtn").addClass("sideCatalogBtnDisable");
}
});
}
/**
* 滚动到指定位置
* @param id 位置id
*/
function quickPositioning(id){
document.getElementById(id).scrollIntoView();
}
/**
* 导航跟随页面滚动
*/
function scrollNavlWithHtmlScroll(name){
// 滚动条距离顶端值
var wst = $(parent.window).scrollTop();
// 加循环
for (var i = 1; i <= 8; i++) {
// 判断滚动条位置
if ($("#" + name + i).offset().top <= wst) {
// 清除高亮
$('#sideCatalog-catalog dl dd').removeClass("highlight");
// 给当前导航加高亮
$("#sideToolbar-item-0-" + i).addClass("highlight");
} else {
break;
}
}
}
css文件 titleNavigation.css
.sideToolbar {
display: block;
position: fixed;
top: 117px;
left: 970px;
}
#sideCatalog {
width: 190px;
height: 355px;
overflow: hidden;
margin-bottom: 10px;
font-size: 14px;
font-family: 宋体;
line-height: 19px;
position: relative;
zoom: 1;
left: 10px;
}
#sideCatalogBtn {
width: 45px;
height: 45px;
display: block;
background: transparent url(/images/img/sideToolbar.gif) 0 0
no-repeat;
cursor: pointer;
margin-bottom: 5px;
position: relative;
margin-left: 10px;
display: block;
}
.sideCatalogBtnDisable {
background: transparent url(/images/img/sideToolbar.gif)
-104px 0 no-repeat !important;
}
a:focus {
outline: 0;
}
a:visited {
color: #136ec2;
}
a:hover {
text-decoration: underline;
}
#sideToolbar-up {
display: block;
width: 45px;
height: 45px;
margin-left: 10px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: transparent url(/images/img/sideToolbar.gif)
-1px -62px no-repeat;
}
#sideCatalog #sideCatalog-sidebar {
top: 0;
width: 0;
height: 353px;
background-color: #eaeaea;
border: 1px solid #eaeaea;
border-top: 0;
border-bottom: 0;
position: absolute;
left: 5px;
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top {
top: 0;
cursor: pointer;
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top,#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom
{
position: absolute;
left: -5px;
width: 10px;
height: 10px;
background: transparent url(/images/img/sideToolbar.gif) 0
-199px no-repeat;
zoom: 1;
overflow: hidden;
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom {
bottom: 0;
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top,#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom
{
position: absolute;
left: -5px;
width: 10px;
height: 10px;
background: transparent url(/images/img/sideToolbar.gif) 0
-199px no-repeat;
zoom: 1;
overflow: hidden;
}
#sideCatalog-updown {
position: absolute;
width: 22px;
height: 50px;
right: 60px;
bottom: 160px;
z-index: 100;
}
#sideCatalog-up {
width: 25px;
height: 25px;
cursor: pointer;
}
.sideCatalog-up-enable {
background: transparent url(/images/img/sideToolbar.gif)
-245px -83px no-repeat;
}
#sideCatalog-down {
width: 25px;
height: 25px;
cursor: pointer;
}
.sideCatalog-down-enable {
background: transparent url(/images/img/sideToolbar.gif)
-245px -108px no-repeat;
}
#sideCatalog-catalog {
height: 325px;
padding-left: 23px;
overflow: hidden;
margin-top: 18px;
position: relative;
}
#sideCatalog-catalog dl {
position: relative;
}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td
{
margin: 0;
padding: 0;
}
.sideCatalog-item1,.sideCatalog-item2 {
position: relative;
padding: 0 7px;
zoom: 1;
margin: 0 0 6px 0;
}
#sideCatalog .highlight span.sideCatalog-dot {
height: 13px;
width: 18px;
background: transparent url(/images/img/sideToolbar.gif)
-271px -38px no-repeat;
left: -23px;
top: 3px;
}
.sideCatalog-item2 {
padding-left: 21px;
}
#sideCatalog span.sideCatalog-index1 {
color: #999;
font-weight: bold;
font-family: Arial;
font-size: 14px;
padding-right: 5px;
}
#sideCatalog .sideCatalog-item1 a {
color: #555;
font-weight: bold;
}
#sideCatalog .sideCatalog-item1 a,#sideCatalog .sideCatalog-item2 a {
text-decoration: none;
}
.sideCatalog-dot:hover {
background-position: 0 -245px;
}
.sideCatalog-dot {
position: absolute;
height: 10px;
width: 6px;
font-size: 12px;
line-height: 12px;
background: transparent url(/images/img/sideToolbar.gif) 0
-222px;
left: -20px;
top: 4px;
cursor: pointer;
overflow: hidden;
}
#sideCatalog span.sideCatalog-index2 {
color: #999;
font-family: Arail;
font-size: 14px;
padding-right: 5px;
}
#sideCatalog .sideCatalog-item2 a {
color: #666;
}
.sideCatalog-item2 .sideCatalog-dot {
background: 0;
}
效果图如下图
主页面
<div class="date_app" id="postRightContent" style="height: 725px; margin-bottom: 30px;">
<iframe id="rightIframePage" name="rightIframePage" scrolling="no"
onLoad="iFrameHeights();" width="100%;" frameborder="0"
src="/a.jsp">
</iframe>
</div>
主页面js
//让iframe只适应高度
function iFrameHeights() {
var ifm = document.getElementById("rightIframePage");
ifm.height = 0;
var subWeb = document.frames ? document.frames["rightIframePage"].document : ifm.contentDocument;
if (ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
ifm.parentElement.style.height = subWeb.body.scrollHeight + "px";
}
}
iframe页面a.jsp
<link rel="stylesheet" type="text/css" href="/css/titleNavigation.css">
<div style="width: 800px; margin: auto;">
<a id="broker1" name="broker1"> </a>
<div id="brokerZoneReport" style="min-width: 500px; height: 300px; margin: 10px auto;"></div>
<a id="broker2" name="broker2"> </a>
<div id="brokerDistrictReport" style="min-width: 500px; height: 300px; margin: 10px auto"></div>
<a id="broker3" name="broker3"> </a>
<div id="brokerCareerReport" style="min-width: 500px; height: 300px; margin: 10px auto;"></div>
<a id="broker4" name="broker4"> </a>
<div id="brokerCompanyReport" style="min-width: 500px; height: 300px; margin: 10px auto"></div>
<a id="broker5" name="broker5"> </a>
<div id="brokerNumberOfListingsReport" style="min-width: 500px; height: 300px; margin: 10px auto;"></div>
<a id="broker6" name="broker6"> </a>
<div id="brokerAccreditationReport" style="min-width: 500px; height: 300px; margin: 10px auto"></div>
<a id="broker7" name="broker7"> </a>
<div id="brokerNumberOfTransactionsReport" style="min-width: 500px; height: 300px; margin: 10px auto;"></div>
<a id="broker8" name="broker8"> </a>
<div id="brokerGenderReport" style="min-width: 500px; height: 300px; margin: 10px auto"></div>
</div>
<div id="sideToolbar" class="sideToolbar">
<div id="sideCatalog" class="sideCatalogBg"
style="visibility: visible;">
<div id="sideCatalog-sidebar">
<div class="sideCatalog-sidebar-top"></div>
<div class="sideCatalog-sidebar-bottom"></div>
</div>
<div id="sideCatalog-updown" style="visibility: hidden;">
<div id="sideCatalog-up" class="sideCatalog-up-enable" title="向上翻页"></div>
<div id="sideCatalog-down" class="sideCatalog-down-enable"
title="向下翻页"></div>
</div>
<div id="sideCatalog-catalog">
<dl style="width: 175px; zoom: 1">
<dd class="sideCatalog-item1 highlight" id="sideToolbar-item-0-1">
<span class="sideCatalog-index1">1</span>
<a id="sideToolbar-item-a-1" href="javascript:void(0);" class="nslog:1026" title="城区报表">城区报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item-0-2">
<span class="sideCatalog-index1">2</span>
<a id="sideToolbar-item-a-2" href="javascript:void(0);" class="nslog:1026" title="片区报表">片区报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item-0-3">
<span class="sideCatalog-index1">3</span>
<a id="sideToolbar-item-a-3" href="javascript:void(0);" class="nslog:1026" title="职业特长报表">职业特长报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item-0-4">
<span class="sideCatalog-index1">4</span>
<a id="sideToolbar-item-a-4" href="javascript:void(0);" class="nslog:1026" title="公司报表">公司报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item-0-5">
<span class="sideCatalog-index1">5</span>
<a id="sideToolbar-item-a-5" href="javascript:void(0);" class="nslog:1026" title="房源数报表">房源数报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item-0-6">
<span class="sideCatalog-index1">6</span>
<a id="sideToolbar-item-a-6" href="javascript:void(0);" class="nslog:1026" title="资格认证报表">资格认证报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item-0-7">
<span class="sideCatalog-index1">7</span>
<a id="sideToolbar-item-a-7" href="javascript:void(0);" class="nslog:1026" title="成交数报表">成交数报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item1" id="sideToolbar-item-0-8">
<span class="sideCatalog-index1">8</span>
<a id="sideToolbar-item-a-8" href="javascript:void(0);" class="nslog:1026" title="性别报表">性别报表</a>
<span class="sideCatalog-dot"></span>
</dd>
<!--
<dd class="sideCatalog-item2" id="sideToolbar-item-0-5_1">
<span class="sideCatalog-index2">8.1</span><a href="#5_1"
class="nslog:1026" title="资格认证报表" onclick="return false;">资格认证报表</a><span
class="sideCatalog-dot"></span>
</dd>
<dd class="sideCatalog-item2" id="sideToolbar-item-0-5_2">
<span class="sideCatalog-index2">8.2</span><a href="#5_2"
class="nslog:1026" title="成交数报表" onclick="return false;">成交数报表</a><span
class="sideCatalog-dot"></span>
</dd>
-->
</dl>
</div>
</div>
<a id="sideCatalogBtn" href="javascript:void(0);" style="visibility: visible;" class=""></a>
<a id="sideToolbar-up" href="javascript:void(0)" style="visibility: visible;" title="回到顶部"></a>
</div>
导航js 代码
$(document).ready(function() {
//让iframe回到顶部
parent.scrollTo(0,0);
initTitleNavigationEvent("broker");
// 主页面滚动时，模仿position: fixed;这种功能，因为position: fixed;对于iframe子页面来说不起作用
$(parent.window).scroll(function() {
$('#sideToolbar').css({
top : $(parent.window).scrollTop() + 116
});
// 滚动父页面滚动条时相应的切换导航位置，即让导航跟随页面滚动
scrollNavlWithHtmlScroll("broker");
});
});
/**
* 初始化事件
*/
function initTitleNavigationEvent(name){
// 添加单击事件
$("#sideCatalog-catalog dl dd a").bind('click',{name : name}, function(e) {
var id = e.target.id.substring(e.target.id.lastIndexOf("-") + 1, e.target.id.length);
quickPositioning(e.data.name + id);
$("#sideCatalog-catalog dl dd").removeClass("highlight");
$(this).parent().addClass("highlight");
});
// 滚动到顶部
$("#sideToolbar-up").bind('click', function(e) {
parent.scrollTo(0,0);
});
// 显示或隐藏导航
$("#sideCatalogBtn").bind('click', function(e) {
if ($(this).hasClass('sideCatalogBtnDisable')) {
$("#sideCatalog-sidebar").show();
$("#sideCatalog-updown").show();
$("#sideCatalog-catalog").show();
$("#sideCatalogBtn").removeClass("sideCatalogBtnDisable");
} else {
$("#sideCatalog-sidebar").hide();
$("#sideCatalog-updown").hide();
$("#sideCatalog-catalog").hide();
$("#sideCatalogBtn").addClass("sideCatalogBtnDisable");
}
});
}
/**
* 滚动到指定位置
* @param id 位置id
*/
function quickPositioning(id){
document.getElementById(id).scrollIntoView();
}
/**
* 导航跟随页面滚动
*/
function scrollNavlWithHtmlScroll(name){
// 滚动条距离顶端值
var wst = $(parent.window).scrollTop();
// 加循环
for (var i = 1; i <= 8; i++) {
// 判断滚动条位置
if ($("#" + name + i).offset().top <= wst) {
// 清除高亮
$('#sideCatalog-catalog dl dd').removeClass("highlight");
// 给当前导航加高亮
$("#sideToolbar-item-0-" + i).addClass("highlight");
} else {
break;
}
}
}
css文件 titleNavigation.css
.sideToolbar {
display: block;
position: fixed;
top: 117px;
left: 970px;
}
#sideCatalog {
width: 190px;
height: 355px;
overflow: hidden;
margin-bottom: 10px;
font-size: 14px;
font-family: 宋体;
line-height: 19px;
position: relative;
zoom: 1;
left: 10px;
}
#sideCatalogBtn {
width: 45px;
height: 45px;
display: block;
background: transparent url(/images/img/sideToolbar.gif) 0 0
no-repeat;
cursor: pointer;
margin-bottom: 5px;
position: relative;
margin-left: 10px;
display: block;
}
.sideCatalogBtnDisable {
background: transparent url(/images/img/sideToolbar.gif)
-104px 0 no-repeat !important;
}
a:focus {
outline: 0;
}
a:visited {
color: #136ec2;
}
a:hover {
text-decoration: underline;
}
#sideToolbar-up {
display: block;
width: 45px;
height: 45px;
margin-left: 10px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: transparent url(/images/img/sideToolbar.gif)
-1px -62px no-repeat;
}
#sideCatalog #sideCatalog-sidebar {
top: 0;
width: 0;
height: 353px;
background-color: #eaeaea;
border: 1px solid #eaeaea;
border-top: 0;
border-bottom: 0;
position: absolute;
left: 5px;
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top {
top: 0;
cursor: pointer;
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top,#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom
{
position: absolute;
left: -5px;
width: 10px;
height: 10px;
background: transparent url(/images/img/sideToolbar.gif) 0
-199px no-repeat;
zoom: 1;
overflow: hidden;
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom {
bottom: 0;
}
#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-top,#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom
{
position: absolute;
left: -5px;
width: 10px;
height: 10px;
background: transparent url(/images/img/sideToolbar.gif) 0
-199px no-repeat;
zoom: 1;
overflow: hidden;
}
#sideCatalog-updown {
position: absolute;
width: 22px;
height: 50px;
right: 60px;
bottom: 160px;
z-index: 100;
}
#sideCatalog-up {
width: 25px;
height: 25px;
cursor: pointer;
}
.sideCatalog-up-enable {
background: transparent url(/images/img/sideToolbar.gif)
-245px -83px no-repeat;
}
#sideCatalog-down {
width: 25px;
height: 25px;
cursor: pointer;
}
.sideCatalog-down-enable {
background: transparent url(/images/img/sideToolbar.gif)
-245px -108px no-repeat;
}
#sideCatalog-catalog {
height: 325px;
padding-left: 23px;
overflow: hidden;
margin-top: 18px;
position: relative;
}
#sideCatalog-catalog dl {
position: relative;
}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td
{
margin: 0;
padding: 0;
}
.sideCatalog-item1,.sideCatalog-item2 {
position: relative;
padding: 0 7px;
zoom: 1;
margin: 0 0 6px 0;
}
#sideCatalog .highlight span.sideCatalog-dot {
height: 13px;
width: 18px;
background: transparent url(/images/img/sideToolbar.gif)
-271px -38px no-repeat;
left: -23px;
top: 3px;
}
.sideCatalog-item2 {
padding-left: 21px;
}
#sideCatalog span.sideCatalog-index1 {
color: #999;
font-weight: bold;
font-family: Arial;
font-size: 14px;
padding-right: 5px;
}
#sideCatalog .sideCatalog-item1 a {
color: #555;
font-weight: bold;
}
#sideCatalog .sideCatalog-item1 a,#sideCatalog .sideCatalog-item2 a {
text-decoration: none;
}
.sideCatalog-dot:hover {
background-position: 0 -245px;
}
.sideCatalog-dot {
position: absolute;
height: 10px;
width: 6px;
font-size: 12px;
line-height: 12px;
background: transparent url(/images/img/sideToolbar.gif) 0
-222px;
left: -20px;
top: 4px;
cursor: pointer;
overflow: hidden;
}
#sideCatalog span.sideCatalog-index2 {
color: #999;
font-family: Arail;
font-size: 14px;
padding-right: 5px;
}
#sideCatalog .sideCatalog-item2 a {
color: #666;
}
.sideCatalog-item2 .sideCatalog-dot {
background: 0;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS完成一个带跳转功能的导航栏页面(修改之前代码出现乱码的情况)
- 纯代码给WordPress网站添加独立下载页面功能
- 想添加个计数器,该怎么修改页面模板代码?
- JSP简单添加,查询功能代码
- 如何使用Notepad++完成Visual Studio中的代码导航功能?
- android studio添加代码(方法)注释功能
- 使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能（含后台代码）
- cnzz代码添加元素到页面
- 通过添加角色页面，体现一个人的代码水平，思路是否严谨？
- ckeditor添加代码插入功能及高亮显示（插件）
- php编写的简单页面跳转功能实现代码
- 继续打印功能的研究（1）发现，其他人使用API只是用代码向打印机中添加纸张类型
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- 移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。本文整理一些常用的meta标签
- SharePoint 使用代码为页面添加WebPart
- 如何给网站添加CNZZ站长统计功能代码的常用办法
- Kindeditor编辑器添加图片上传水印功能（php代码）
- 在Myeclipse中添加代码提示功能
- 一行代码添加的页面效果