CSS（三）

最新推荐文章于 2023-03-17 11:33:24 发布

DF10F-0001A

最新推荐文章于 2023-03-17 11:33:24 发布

阅读量118

点赞数

分类专栏： Web 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_41819893/article/details/121106696

版权

Web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、精灵图

1、定义

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术。核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务只需要一次请求就可以了

2、精灵图的使用

使用精灵图的核心：

精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中
这个大图片也称为sprits精灵图或者雪碧图
移动背景图片位置，此时可使用background-position
移动的距离就是这个目标图片的x轴和y轴坐标。注意网页中的坐标有所不同
因为一般情况下都是往上往左移动，所以数值都是负值
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

二、字体图标

1、使用字体图标

下载字体图标

Icomoon：http://icmooon.io

阿里巴巴矢量图标库官网：https://www.iconfont.cn

2、字体图标的引入

阿里巴巴矢量图标库官->网图标管理->我的项目->然后新建项目->往项目里添加我们要想使用的图标->tian'jia'dao'gou'wu'che

下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件

下载下来解压后的文件如下：

把上面这些文件都放在一个文件夹内，然后放在你的项目目录中,再在你的项目中引入iconfont.css文件

打开解压的文件夹中的demo.html

<html>
<head>
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'iconfont';
            src: url('iconfont.woff2?t=1620639994838') format('woff2'),
                url('iconfont.woff?t=1620639994838') format('woff'),
                url('iconfont.ttf?t=1620639994838'  ) format('truetype');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>
<body>
    <i class="iconfont icon-daohang">&#xe60a;</i>
</body>
</html>

3、字体图标的追加

把压缩包里面的selection.json重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可

三、CSS三角

<html>
<head>
    <title>Document</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            border-top: 50px solid pink;
            border-right: 50px solid red;
            border-bottom: 50px solid blue;
            border-left: 50px solid green;
        }
        .box2 {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-top-color: pink;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

四、用户界面样式

1、鼠标样式

语法：

li {
	cursor: pointer;
}

属性值：

default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

举例：

<html>
<head>
    <title>鼠标文本样式</title>
</head>
<body>
    <ul>
        <li style="cursor: default;">默认的小白鼠标样式</li>
        <li style="cursor: pointer;">鼠标小手样式</li>
        <li style="cursor: move">移动小手样式</li>
        <li style="cursor: text">文本</li>
        <li style="cursor: not-allowed;">禁止</li>
    </ul>
</body>
</html>

2、轮廓线

给表单添加outlined();或者outline: none;样式之后，就可以去掉默认的蓝色边框。语法：

input {
	outline: none;
}

举例：

<html>
<head>
    <title>鼠标文本样式</title>
    <style>
        input {
            outline: none;
        }
    </style>
</head>
<body>
    <input type="text">
</body>
</html>

3、防止拖拽文本域

语法：

textarea {
	resize: none;
}

举例：

<html>
<head>
    <title>鼠标文本样式</title>
    <style>
        textarea {
			/* 防止拖拽文本域 */
            resize: none;
            /* 取消表单轮廓线 */
            outline: none;
        }
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

4、vertical-align属性应用

CSS中的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。语法：

vertical-align : baseline | top | middle | bottom

（1）、图片、表单和文字对齐

图片、表单都属于行内块元素，默认的vertical-align是基线对齐，设置围殴middle就可以

（2）、解决图片底部默认空白间隙问题

解决方法：

a、给图片添加vertical-align:middle | top | bottom等

b、把图片转换为块级元素display:block;

（3）、溢出的文字用省略号显示

a、单行文本溢出显示省略号

单行文本溢出显示省略号必选满足san'ge'tiao'jian

/* 先强制一行内显示文本 */
white-space: nowrap;    (默认 normal 自动换行)
/* 超出的部分隐藏 */
overflow: hidden;
/* 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

b、多行文本溢出显示省略号

多行文本溢出显示省略号有较大兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型展示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置成检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

5、常见布局技巧

（1）、margin赋值运用

1、让每个盒子margin往左侧移动-1px正好压住相邻盒子边框

2、鼠标经过某个盒子的时候。提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）

（2）、文字围绕浮动元素

<html>
<head>
    <title>test</title>
    <style>
        .box {
            width: 225px;
            height: 90px;
            background-color: pink;
            margin: 0 auto;
        }
        .pic {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;

        }
        .pic img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="../image/bilibili.png" alt="">
        </div>
        <p>
            基因像钻石一样长存，但同钻石长存的方式又不尽相同。
        </p>
    </div>
</body>
</html>

DF10F-0001A

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS（三）

一、精灵图1、定义为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术。核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务只需要一次请求就可以了2、精灵图的使用使用精灵图的核心：精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中这个大图片也称为sprits精灵图或者雪碧图移动背景图片位置，此时可使用background-position 移动的距离就是这个目标图片的x轴和y轴坐标。注意网页中
复制链接

扫一扫