万能Header适用于所有DISCUZ模板,可以添加到页面头部,也可以单独调用。
<!--万能Header适用于所有DISCUZ模板,可以添加到页面头部,也可以单独调用,代码非常简单,简单到纯粹。-->
<--CSS部分:-->
<style type="text/css">
body{
margin-top:55px; //整个页面保留head位置,防止遮挡和卡屏
width:99%; //圆角居中效果宽度不能100%
}
.a_l{ //左侧按钮
position: absolute; //绝对定位;
left:12px;
font-size:18px;
}
#a_r{ //右侧按钮
position: absolute; //绝对定位;
right:12px;
font-size:18px;
}
.h2{ //页面标题
color:#fff; //字体颜色;
line-height:50px; //文字居中;
font-size:20px; //字体大小;
}
.bq{ //DIV容器
width:97%; //圆角居中效果页面不要用100%;
height:45px; //盒子高度;
background-color:#EE3B3B; //整体背景颜色;
border-radius:5px; //圆角化;
position: absolute; //绝对定位;
left:5px;
position: fixed; //固定定位,防止IE不兼容absolute;
top:0px; //顶部高度;
margin:0 auto; //自动居中;
z-index:999; //悬浮层的优先级,置于顶层;
}
</style>
<--html部分-->
<div class="bq">
<center> //防止菜单因兼容性不居中,增强中属性
<h2 class="h2">页面标题
<span class="a_l" onClick="javascript :history.back(-1);">返回</span>
<!--例如:判断如果是我的相册,显示上传按钮-->
<!--{if ...}--> //这里可以加入判断句来显示指定内容
<a href="" id="a_r">功能按钮1</a> //对谁才显示这个按钮
<!--else-->
<a href="" id="a_r">功能按钮2</a> //对谁才显示这个按钮
<!--{/if}-->
<!--判断结束-->
</h2>
</center>
</div>