溢出文字隐藏、CSS精灵图、滑动门技术

溢出文字隐藏

white-space

属性
normal

默认处理方式

nowrap

强制在同一行内显示所有文本

除非遇到<br>标签

可以配合overflow: hidden使用

 

text-overflow(文字溢出)

属性
clip

不显示省略标记（...），而是简单的裁切

ellipsis

当对象内文本溢出时显示省略标记（...）

案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        padding: 30px;
    }
    li {
        list-style: none;
        width: 200px;
        height: 30px;
        border: 1px solid pink;
        white-space: nowrap;
        /*1.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行*/
        overflow: hidden;  /* 2. 超出的部分 隐藏*/
        text-overflow: ellipsis;  /* 3. 溢出的部分用省略号替代*/
        line-height: 30px;
    }
    </style>
</head>
<body>
    <ul>
        <li>文字内容文字内容文字内容文字内容文字内容</li>
    <li>文字内容文字内容文字内容文字内容文字内容</li>
    <li>文字内容文字内容文字内容文字内容文字内容</li>
    <li>文字内容文字内容文字内容文字内容文字内容</li>
    <li>文字内容文字内容文字内容文字内容文字内容</li>
    </ul>
</body>
</html>

 

 

CSS精灵图技术

精灵图将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

要想精确定位到精灵图中的某个小图，就需要使用CSS的

background-image

background-repeat

background-position

 

滑动门技术

它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强

最常见于各种导航栏的滑动门。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    a {
        margin: 100px;
        height: 33px;
        display: inline-block;
        background: url(images/to.png) no-repeat;
        color: #fff;
        text-decoration: none;
        line-height: 33px;
        padding-left: 15px;
    }
    span {
        display: inline-block;
        height: 33px;
        background: url(images/to.png) no-repeat right;
        padding-right: 15px;
    }
    </style>
</head>
<body>
    <a href="#">
        <span>首页</span>
    </a>
</body>
</html>

 

posted @ 2020-09-08 17:33  minnersun  阅读(164)  评论(0)  编辑  收藏  举报