html中如何使标题栏置顶,html5 底部固定且等分的切换栏+顶部固定的标题栏实现方式...

LSK

返回

孙悟空

设置

truesrc="big.png"/>

活动介绍：

莎诗特女鞋特惠 3折封顶

首页帮助中心反馈建议

css:

.page-title{

line-height: 40px;

font-size: 14px;

text-align: center;

background: #fb4e3a;

border: 1px solid #ea3520;

border-radius: 5px;

color: #fff;

margin-bottom: 12px;

position: relative;

height: 40px;

overflow: hidden;

}

.page-title a {

position: absolute;

margin: 5px 6px;

display: inline-block;

padding-left: 15px;

line-height: 30px;

font-size: 14px;

right: 0;

color: #fff;

width: 70px;

}

.page-title a.return {

width: 62px;

padding-left: 0;

text-indent: 8px;

left: 0;

}

.pxui-area {

background: #fff;

border-bottom: 2px solid #b5bfd7;

overflow: hidden;

}

.com-footer-nav {

border: 1px solid #c6cdde;

background: #fff;

border-radius: 5px;

height: 40px;

line-height: 40px;

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#f4f4f4));

background-image: gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#f4f4f4));

text-align: center;

position: fixed;

bottom: 0px;

z-index: 100;

left: 6px;

right: 6px;

overflow: hidden;

}

.com-footer-nav a {

display: inline-block;

width: 33%;

text-align: center;

height: 40px;

border-right: 1px solid #bfc7d7;

font-size: 16px;

text-decoration:none;

}

.com-footer-nav a:last-child {

border: 0;

}

css讲解

1.标题栏文字居中设置：line-height: 40px;height: 40px;text-align: center;

2.标题栏按钮靠两边设置:right: 0;和left:0

3.底部栏如何固定在底部？

position: fixed;

bottom: 0px;

z-index: 100;

4.底部栏按钮如何等分：width: 33%;并且：底部栏上所有的标签之间不能有换行，必须一行写完！