Web_CSS_滑动门技术简析

最新推荐文章于 2021-05-31 08:24:14 发布

cyb_23

最新推荐文章于 2021-05-31 08:24:14 发布

阅读量905

点赞数

分类专栏： Web 文章标签： Web CSS 布局

本文链接：https://blog.csdn.net/cyb_23/article/details/10243201

版权

Web 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

功能：保持标题风格以适应不同宽度；

效果：

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

<title>滑动门技术</title>

<style type="text/css">

h3{

background-image: url(bg-slide.gif);

background-repeat: no-repeat;

padding-left: 40px;

 

color: white;

font-size: 13px;

text-align: center;

line-height: 21px;

}

 

span{

display: block;       /*作为块级元素*/

padding-right: 40px;

 

background-image: url(bg-slide.gif);

background-repeat: no-repeat;

background-position: right;

}

 

.wide{

       width:339px;  

}

       

.narrow{

       width:300px; 

}

 

.narrow1{

       width:200px; 

}

 

.narrow2{

       width:130px; 

}

</style>

</head>

<body>

<h3 class="wide"><span>h3标题文字</span></h3>

<p>（特别说明：当标题宽度等于大于背景图像宽度时的情况）</p>

<h3 class="narrow"><span>h3标题文字</span></h3>

<h3 class="narrow1"><span>h3标题文字</span></h3>

<h3 class="narrow2"><span>h3标题文字</span></h3>

</body>

</html>

cyb_23

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web_CSS_滑动门技术简析

功能：保持标题风格以适应不同宽度；效果：源码：滑动门技术h3{background-image: url(bg-slide.gif);background-repeat: no-repeat;padding-left: 40px; color: white;font-size: 13px;text-align: center;
复制链接

扫一扫

专栏目录