这里写图片描述

方法一:使用背景图

html结构:

<js-keyword" style="box-sizing: border-box; margin: 0px; padding: 0px; color: #000088; font-family: "Source Code Pro", monospace; font-size: 12.6px; white-space: pre; background-color: rgba(128, 128, 128, 0.05);">div class="tit-bar">   <div class="deg">满意度调查</div> </div>

css结构:
.tit-bar{    
    background:url(../img/line-bg.png) repeat-x center;
    margin:0 auto;
    padding:5px 0;
}
 .tit-bar .deg{
    font-size:16px;
    width:5rem;
    text-align: center;
     background-color: #fff;
     margin:0 auto;
     color:#ca4b29; 
     font-weight:700;    
     background: #fff url(../img/smile.png) no-repeat 7px center;    
     height: 60px;    
     line-height: 60px;    
     background-size: 30px 30px;    
     padding-left: 30px;
}


这里写图片描述

方法二:使用伪类

html结构:

<div class="tit-bar">   <div class="deg">满意度调查</div> </div>


css结构:
.tit-bar .deg {  
    width:100%;  
    font-size: 16px;  
    color: #555;  
    margin: 0 auto;  
    position: relative;  
    text-align: center;
}
.tit-bar .deg::before {  
    content: "";  border-top: 1px solid #ccc;  
    display: block;  
    position: absolute;  
    width: 40%;  
    top: 10px;  
    left: 0;
}
.tit-bar .deg::after {  
    content: "";  
    border-top: 1px solid #ccc;  
    display: block;  
    position: absolute;  
    width: 40%;  
    top: 10px;  
    right: 0
}



值得一看的java资讯类网站!http://hongsehuoxian.com
看到这里如果这篇文章真的帮到你了,不妨打赏一下哦!

以上就是红色火线JAVA加油站整理的关于小标题两侧加横线或背景图片自适应布局实现技巧的文章,
希望可以帮到你,如果你有不同的见解可以留言指正哦,避免让别的java小伙伴在走挫折路。
java中用Excel文件上传到后台的方法
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信