页面标题导航宽度自适应并左右两端有背景修饰图案

来源：互联网发布：怎么取消备案域名编辑：程序博客网时间：2024/05/19 20:42

HTML代码部分

<div class="line-list-box">    <div class="w-1200">        <div class="text-c">            <h1 class="line-list-bt"><span class="l"></span>二日游<span class="r"></span></h1>        </div>      </div></div>

CSS部分

.line-list-box {}.line-list-box .line-list-bt {overflow: hidden; display:inline-block; height: 81px; line-height: 60px;  background: #FFFFFF; margin: 0px auto; padding:0px 90px; position: relative; text-align: center; background: url(../dcr/line-list-t-a.png) repeat-x 0px -81px;}.line-list-box .line-list-bt span { width: 83px; height: 81px;  display: inline-block; background: url(../dcr/line-list-t-a.png) no-repeat; z-index: 9; position: absolute;}.line-list-box .line-list-bt span.l { background-position: 0px 0px; left: 0px; top: 0px; background-color: #FFFFFF;}.line-list-box .line-list-bt span.r { background-position: 0px -162px; right: 0px; top: 0px; background-color: #FFFFFF;}

样式图片

使用到的背景图片

0 0