CSS基础（三）

最新推荐文章于 2024-05-23 15:04:04 发布

蝼蚁之行

最新推荐文章于 2024-05-23 15:04:04 发布

阅读量297

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/Gcc_Notepad/article/details/115093820

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

11、界面样式

常见的界面样式：

更改用户的鼠标样式
表单轮廓
防止表单域的拖拽
解决图片或表单问题
溢出操作

11.1 鼠标样式 `cursor`

li {
    /* 小手样式 */
	cursor: pointer;
}

设置在对象上移动时的鼠标样式：

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

11.2 轮廓线 `outline`

给表单添加 outline:0 或 outline:onne 样式后，就可以去掉默认的蓝色边框

input 文本框就会这个默认的蓝色边框样式，可用 outline:0 去除掉

input {
	outline: 0;
}

11.3 防止拖拽文本域 `resize`

文本域 textarea 默认是可以拖拽的，但是实际开发中，是不允许的，可添加 resize: none;

textarea { resize:none; }

11.4 `vertical-align` 属性应用

1、设置图片或表单域文字垂直对齐

vertical-align 翻译过来就是垂直对齐，经常用于设置图片表单（行内块元素）与文字垂直对齐

vertical-align: baseline | top | middle | bottom

baseline：元素放置在父元素的基线上，默认
top：把元素的顶端与行中最高元素的顶端对齐
middle：把次元素放置在父元素的中部
bottom：把元素的底端与最低元素的底端对齐

<style>
    img {
        /* 中间对齐 */
        vertical-align: middle;
    }
</style>
<body>
    <img src="..." alt=""> 我失去过
</body>

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

Bug：图片底部会有一个空白间隙，原因是行内块元素会和文字的底部基线对齐

解决办法：

给图片img添加：vertical-align: top | middle | bottom（提倡使用）
把图片转换为块级元素 display: block;

11.5 溢出文字处理

1、单行文本溢出

强制在一行内显示：white-space: nowrap; （默认是normal，自动换行）
超出的部分隐藏：overflow: hidden;
用省略号代替超出的部分：text-overflow: ellipsis;

2、多行文本溢出

1. 超出的部分隐藏：overflow: hidden;

2. 用省略号代替超出的部分：text-overflow: ellipsis;

3. 弹性伸缩盒子模型显示：display: -webkit-box;

4. 限制在一个块级元素显示的文本行数： -webkit-line-clamp: 2

5. 设置或检索伸缩盒子的对象的子元素的排序方式： -webkit-box-orient: vertical

多行文本溢出显示省略号，有较大的兼容性问题，适合 webKit 浏览器或移动端
更推荐让后台人员来做这个

12、精灵图

在网页中，往往都会有一些图片来作为修饰，但是有些网站图片过多时（如电商网页），服务器会频繁地接收和发送图片，造成服务器压力过大，降低页面的加载速度

为了解决这个问题，出现了CSS精灵技术，所谓精灵技术，就是将一些小图片整合到一张大图片上，这样服务器只需要发送一次请求即可

所以，精灵技术的目的就是：为了有效地减少服务器频繁接收和发送请求的次数，提高页面的加载速度

注意：精灵图针对的是小图片

精灵图的使用

获取背景图片的带大小，以及坐标
利用 background-position 移动到图片的位置
移动的距离就是图片的x和y坐标；一般都是往左上角移动，所以数值时负的

具体方法：

用 width 和 height 设置图片的大小（真是的图片大小）
用 background 导入图片，设置具体坐标

栗子：

.sprites {
    width: 60px;
    height: 60px;
    margin: 50px auto;
    /* 背景大图片 不平铺 小图片的坐标 */
    background: url(...) no-repeat -155px -106px;
}

13、字体图标 `iconfont`

精灵图有诸多优点，但是缺点也明显：图片大、制作麻烦、图片本身放大和缩小会失真

所以字体图标就是来弥补精灵图的缺点，优点：

轻量级：图片小
灵活性：本质是文字，可以改变颜色、添加阴影、透明效果、旋转等等
兼容性：几乎支持所有浏览器

精灵图和字体图标就是应用在小图片上：

复杂的小图片，用精灵图
简单的小图片，用字体图标

本质：是文字

使用：

字体图片下载
引入（引入到html页面中）
字体图片的追加

13.1 字体图片下载

icomoon网站：icomoon字库：http://icomoon.io
阿里字库：http：//www.iconfont.cn

13.2 字体图片引入

三个步骤：

把下载包里面的fonts文件夹放入页面根目录里下

在 CSS 样式中全局声明字体：简单理解吧这些字体文件通过CSS引入到我们页面中

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?p4ssmb');
  src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
    url('fonts/icomoon.woff?p4ssmb') format('woff'),
    url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

html 标签内添加小图标（复制小图标到标签中）
```
<span>  </span>
```

14、CSS 三角

css三角即用纯css做一个三角，不必做成图片或者字体图标

在这里插入图片描述

其实是利用了边框

首先设置 width: 0; height: 0;
然后给它设置一个边框，注意：颜色为透明
然后给任意一侧的边框上色就可以了

.one {
    width: 0;
    height: 0;
    /* 设置边框为透明色 */ 
    border: 100px solid transparent;
    /* 令其上边框为粉色 */
    border-top-color: pink;
}

在这里插入图片描述

蝼蚁之行

关注

1
点赞
踩
1

收藏

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

11、界面样式常见的界面样式：更改用户的鼠标样式表单轮廓防止表单域的拖拽解决图片或表单问题溢出操作11.1 鼠标样式 cursorli { /* 小手样式 */ cursor: pointer;}设置在对象上移动时的鼠标样式：default：小白（默认）pointer：小手``move：`：移动text：文本not-allowed：禁止11.2 轮廓线 outline给表单添加 outline:0 或 outline:onne 样式后，就可以去掉默认的蓝
复制链接

扫一扫