H5基础——02CSS高级技巧

最新推荐文章于 2024-04-28 14:44:52 发布

coderwm

最新推荐文章于 2024-04-28 14:44:52 发布

阅读量192

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/qq_44089555/article/details/106399162

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

为什么需要精灵图？
CSS精灵技术（也称CSS Sprites 、CSS雪碧）
精灵技术目的：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度
核心原理：将网页中的一些小背景图片整合到一张大图中，这样服务器请求一次就可以了。

精灵图的使用
1.多个小背景图片整合到一张大图
2.移动背景图片位置 background-position
3.移动距离就是这个目标图片的x和y坐标
4.因为一般情况下，都是往上往下移动，所有数值为负

.box{
	background:url(images/sprites.png)  no-repeat   -15px   -106px;

字体图标iconfont

使用场景：主要用于显示网页中通用、常用的一些小图标
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体

字体图标优点

轻量级：一个字体图标要比一系列的图像要小。一旦字体加载，图标就会马上渲染出来，减少了服务器请求
灵活性：本质是文字，可以随意改变文字的颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有浏览器
字体图标不能代替精灵图只是对工作中图标部分技术的提升和优化

总结：
1.如果遇到一些结构和样式比较简单的小图标，就用字体图标
2.如果遇到一些结构和样式复杂的小图片，用精灵图

字体图标下载
推荐网站
iconmoon字库： http://icomoon.io
阿里iconfont字库： http://www.iconfont.cn/

使用：google 百度下

CSS三角

比如实现这样的效果：

源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* width和height都设为0 */
            /* border: 10px solid pink; */
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }

        /* 把其他的盒子设置为透明  三角大小取决于border大小 */
        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px 20px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

用户界面样式

什么是用户界面样式？
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验

更改用户的鼠标样式
表单轮廓
防止表单域拖拽

鼠标样式

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线outline
给表单添加outline：0；或者outline：none；可去掉默认的蓝色边框

防止文本域拖拽
实际开发中，我们文本域右下角是不可以拖拽读的
textarea{ resize：none；}

vertical-align属性应用

用于设置一个元素的垂直对齐方式，但只针对行内元素或者行内块元素有效

语法
vertical-align：baseline| top| middle | bottom

值	描述
baseline	默认元素放在父元素基线上
top	元素顶端与行中最高元素顶端对齐
middle	此元素放在父元素中部
bottom	元素顶端与行中最低的元素的顶端对齐

常用：给图片添加 vertical-align：middle；实现图片居中

溢出文字省略号显示

1.单行文本溢出显示省略号 ——必须满足3个条件

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

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

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

CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。
CSS初始化是指重设浏览器样式。

coderwm

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5基础——02CSS高级技巧

目录精灵图字体图标CSS三角CSS用户界面样式vertical-align属性应用溢出的文字省略显示常见布局技巧精灵图为什么需要精灵图？CSS精灵技术（也称CSS Sprites 、CSS雪碧）精灵技术目的：为了有效减少服务器接收和发送请求的次数，提高页面的加载速度核心原理：将网页中的一些小背景图片整合到一张大图中，这样服务器请求一次就可以了。精灵图的使用1.多个小背景图片整合到一张大图2.移动背景图片位置 background-position3.移动距离就是这个目标图
复制链接

扫一扫