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

最新推荐文章于 2020-08-27 17:28:50 发布

原创最新推荐文章于 2020-08-27 17:28:50 发布 · 848 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#导航 #html #css

CSS 同时被 2 个专栏收录

3 篇文章

订阅专栏

标题导航

1 篇文章

订阅专栏

本文介绍了一个关于二日游主题的网页布局设计方案，包括HTML结构和CSS样式，使用了特定的背景图片和元素定位来创建独特的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;}