【CSS】笔记6-精灵图、字体图标、界面样式、vertical-align、溢出显示、布局技巧

已于 2022-11-01 12:57:20 修改
阅读量966 收藏 4
点赞数
分类专栏： 前端 # CSS 文章标签： css 前端
于 2022-10-05 18:58:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhcharming/article/details/127174014
版权
前端 同时被 2 个专栏收录
18 篇文章 0 订阅
订阅专栏
CSS
8 篇文章 0 订阅
订阅专栏

目录

一、精灵图

1.为什么需要精灵图

2.精灵图使用

二、字体图标

1、字体图标的下载

2、字体图标的引入

 3、字体图标的追加

四、CSS用户界面样式

1.鼠标样式

2.表单轮廓线outline

3.防止拖拽文本域

五、vertical-align属性应用

六、溢出的文字省略号显示

1.单行文本溢出省略号显示🔥

2.多行文本溢出显示省略号显示

七、常见布局技巧

1.margin负值的运用

2.文字围绕浮动元素

 3.行内块巧妙运用

4.CSS三角强化

 八、CSS初始化

一、精灵图

1.为什么需要精灵图

  • 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术

  • 核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

2.精灵图使用

使用精灵图的核心：

  1. 精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中
  2. 这个大图片也称为 sprites 精灵图 或者 雪碧图
  3. 移动背景图片的位置，此时可以使用 background-position
  4. 移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同（x轴右边走是正值，左边走是负值，y轴下边走是正值，上边走是负值）
  5. 一般情况下都是往上往左移动，所以数值是负值
  6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            margin: 100px auto;
            /*background: url(img/sprites.png);
            background-position: -182px 0;*/
            background: url(img/sprites.png) no-repeat -182px 0;
        }

        .box2 {
            width: 27px;
            height: 27px;
            margin: 200px;
            background: url(img/sprites.png) no-repeat -155px -106px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

精灵图的优点很多，但是缺点也很明显

  1. 图片文件还是比较大的
  2. 图片本身放大和缩小会失真
  3. 一旦图片制作完毕想要更换非常复杂

此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont

二、字体图标

字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。展示的是图标，本质属于字体

  • 优点：

轻量级：一个图标字体比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求
灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等
兼容性：几乎支持所有的浏览器

📢：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化

总结：

如果遇到简单的结构和样式简单小图标，用字体图标

如果遇到结构和样式复杂的小图片，用精灵图

  • 步骤：

字体图标的下载
字体图标的引入(引入到我们html页面中)
字体图标的追加(以后添加新的小图标)


1、字体图标的下载

  1. icomoon字库

    外网，不需要登录即可下载 http://icomoon.io

    • 点击 IcoMoon App
    • 选择需要的图标
    • 点击Generate Font
    • 点击 下载

  2. 阿里iconfont字库

    免费，但是需要登录 iconfont-阿里巴巴矢量图标库

2、字体图标的引入

我们以 icomoon 字库网为例，将下载包解压，解压之后的文件如图：

Icon Font & SVG Icon Sets ❍ IcoMoon

 生成之后点击download

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

 2.在CSS样式中全局声明字体：简单理解把这些字体通过css引入到我们页面中

右键打开 style.css，复制如图代码引入我们自己的CSS文件中

 3.html标签内添加小图标

我们打开解压文件中的 demo.html ，复制想要的图标，粘贴进 <span></span>标签中

 mac不显示小框框，直接复制即可

 4.给标签定义字体

span {
            font-family: 'icomoon';
            font-size: 100px;
            color: pink;
        }

注意：标签中的 font-family 的值和我们之前引入字体图标的font-family 必须一样，这里均为 icomoon（如果上面改为pink,下面也是pink）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?aoa0ns');
            src: url('fonts/icomoon.eot?aoa0ns#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?aoa0ns') format('truetype'),
                url('fonts/icomoon.woff?aoa0ns') format('woff'),
                url('fonts/icomoon.svg?aoa0ns#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: 'icomoon';
            font-size: 100px;
            color: pink;
        }
    </style>
</head>
<body>
    <span></span>
    <span></span>
</body>
</html>

效果

 3、字体图标的追加


如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
以 icomoon字库 网为例，点击网站内import icons

 

 


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

 三、CSS三角

盒子宽高是0，指定边框，边框实际为三角形

div{

width：0；

height:0;

/*下面两句为了兼容问题*/

line-height:0;

font-size：0；

border: 50px solid transparent;

border-left-color: green;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1 {
        width: 0;
        height: 0;
        border-top: 10px solid pink;
        border-right: 10px solid red;
        border-bottom: 10px solid blue;
        border-left: 10px solid green;
    }

    .box2 {
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-left-color: green;
        margin: 100px 0;
    }

    .jd {
        position: relative;
        width: 120px;
        height: 249px;
        background-color: pink;
    }

    .jd span {
        position: absolute;
        right: 15px;
        top: -10px;
        /*boder是5*/
        width: 0;
        height: 0;
        /*照顾兼容性*/
        line-height: 0;
        font-size: 0;
        border: 5px solid transparent;
        border-bottom-color: pink;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="jd">
        <span></span>
    </div>
</body>
</html>

四、CSS用户界面样式

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

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

1.鼠标样式

  • 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
li {
    cursor: pointer; 
}

2.表单轮廓线outline

轮廓线outline：

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

input { outline: none; }

3.防止拖拽文本域

防止拖拽文本域resize

textarea { resize: none; }

五、vertical-align属性应用

vertical-align:

  • 使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
  • 官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效
vertical-align: baseline | top | middle | bottom

让图片和文字垂直居中，修改的是img或者textarea属性,行内块元素都可以

图片底侧空白缝隙解决

  • bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐（给图片加边框就可以看见）

 

主要解决办法有两种：

  1. 给图片添加 vertical-align : middle | top |bottom 等（推荐）

  2. 把图片转换为块级元素 display:block;，因为块级元素不会有vertical-align 属性

六、溢出的文字省略号显示

1.单行文本溢出省略号显示🔥

必须满足三个条件：

/* 1.先强制一行内显示文本 */
white-space: nowrap; 		/*默认 normal 是自动换行，nowrap是强制一行显示文本*/

/* 2.超出的部分隐藏 */
overflow: hidden;

/* 3.文字用省略号替代超出的部分*/
text-overflow: ellipsis;
/*ellipsis:省略号*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 150px;
        height: 80px;
        background-color: pink;
        margin: 100px auto;
        /*换行*/
        /*white-space: normal;*/
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<body>
    <div>
        啥也不说，此处省略一万字
    </div>
</body>
</html>

2.多行文本溢出显示省略号显示

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

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

第2行就可以展示省略号

七、常见布局技巧

1.margin负值的运用

  • 两个盒子加边框1px，浮动，贴紧会出现 1 + 1 = 2px
  • 给右边盒子添加margin-left: -1px
  • 正数向右边走，负数向左边走
  1. 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框
  2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可
    • 如果没有定位，则加相对定位(保留位置)
    • 如果有定位，则加 z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul li {
        position: relative;
        float: left;
        list-style: none;
        width: 150px;
        height: 200px;
        border: 1px solid red;
        margin-left: -1px;
    }

    /*ul li:hover{
        1.如果li没有定位,鼠标经过添加相对定位
        position: relative;
        border: 1px solid blue;
    }*/
    ul li:hover {
        /*2.如果li有定位，则利用z-index提高层级*/
        z-index: 1;
        border: 1px solid blue;
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

2.文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性

 先准备大盒子，左边盒子浮动，右边不需要盒子，文字会自动环绕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 300px;
        height: 160px;
        background-color: pink;
        margin: 0 auto;
        padding: 5px;
    }

    .pic {
        /*左边盒子浮动*/
        float: left;
        height: 157px;
        width: 226px;
        margin-right: 5px;
    }

    .pic img {
        width: 100%;
    }
</style>
<body>
    <div class="box">
        <div class="pic">
            <img src="img/图层2.png" alt="">
        </div>
        <p>比较快不愉快VB采用无多擦VB我饿预测误差不饿完不成</p>
    </div>
</body>
</html>

 3.行内块巧妙运用

页码在页面中间显示：

  1. 把这些链接盒子转换为行内块，之后给父级指定 text-align: center.给父元素添加后，子所有行内元素和行内块元素都会水平居中

  2. 利用行内块元素中间有缝隙，并且给父级添加 text-align: center ，行内块元素会水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        text-align: center;
    }

    .box a {
        display: inline-block;
        width: 36px;
        height: 36px;
        background-color: #f7f7f7;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 36px;
        text-decoration: none;
        color: #333;
    }

    .box .prev,
    .box .next {
        width: 85px;
    }

    .box .current,
    .box .elp {
        background-color: #fff;
        border: none;
    }

    .box input {
        height: 36px;
        width: 45px;
        border: 1px solid #ccc;
        outline: none;
    }

    .box button {
        width: 60px;
        height: 36px;
        background-color: #f7f7f7;
        border: 1px solid #ccc;
    }
</style>
<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>
</html>

4.CSS三角强化

width:0
height:0
border-color:transparent red transparent transparent
border-style:solid
border-width:22px 8px 0 0

直角三角效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /*把上边框宽度调大*/
            border-top: 100px solid transparent;
            border-right: 50px solid red;
            /*左边和下边边框宽度设置为0*/
            border-bottom: 0px solid blue;
            border-left: 0px solid green;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

 八、CSS初始化

中文字体名称哟个unicode编码代替

黑体 \9ED1\4F53

宋体 \5B8B\4F53

微软雅黑 \5FAE\8F6F\96C5\9ED1

moonbaby1
关注
专栏目录
CSS 三角，鼠标样式，取消表单效果，vertical-aling，文字溢出，常见布局技巧
qq_54546580的博客
02-28 123
学习笔记
【HTML+CSS】CSS高级技巧：精灵图+字体图标+CSS三角应用
qq_30148319的博客
03-29 2448
学习视频及笔记参考来源： 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 一、精灵图 1、精灵图的理解 （1）核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。 （2）目的：有效的减少服务器接收和请求的次数，提高页面的加载速度。 2、精灵图的语法 /* 1、先导入精灵图作为背景图。 */ /* 2、定位到想要的图标的位置 */ /* 注意：x轴向右边走为正值，左边走为负值；
css3精灵图
weixin_45090657的博客
03-12 351
1.下载firework 2.在firework打开精灵图 要先锁住再改宽，否则精灵图会变形 3.切割所需要的图 图片宽/高为23px，x坐标59，y坐标194 4.添加到css代码中 .user::before{ content: ""; display: block;/*行元素无大小，需改为块*/ /*图片的宽高*/ width: 23px; height: 23px; /*关键代码*/ background:url(../images/s
CSS---CSS高级全部内容（四）
前端与计算机相关知识的分享，博主的qq523235674
02-06 1584
1、精灵图Sprites 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术 核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了 1.1、精灵图的使用 使用精灵图的核心： 精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中 这个大图片也称为 sprites 精灵图 或者 雪碧图 移动背景图片的位置，此时可以使用 background-position 移动的距离就是这个目标图片的x和y坐标，注...
CSS学习笔记--第五天
Android Studio中实现普通、点击、禁用状态下圆角按钮背景颜色的改变
01-27 354
文章目录八、CSS高级技巧1. 精灵图（重点）1.1 为什么需要精灵图1.2 精灵图（sprites）的使用2. 字体图标2.1 字体图标的产生2.2 字体图标的优点2.3 字体图标的下载2.4 字体图标的引入2.5 字体图标的追加2.6 字体图标加载的原理3. CSS 三角3.1 介绍4. CSS 用户界面样式4.1 鼠标样式 cursor4.2 轮廓线 outline4.3 防止拖拽文本域 resize5. vertical-align 属性应用5.1 图片、表单和文字对齐5.2 解决图片底部默认空白缝
CSS精灵图-sprite
NewHouser的博客
10-20 301
CSS精灵图是把一堆小的图片整合到一张大的图片上，这样可以减轻服务器对图片的请求数量，再利用CSS的 background-image，background- repeat，background-position 组合进行定位
HTML+CSS基础知识点之（字体图标）（part09）
最新发布
2201_75597173的博客
06-23 239
引号中的前半部分（iconfont ）一定不能少，空格后面为图标的名称，在上图二圈住的黄色框内选择.点后面的字母复制到空格后面。4、将压缩包解压，为了后续方便引用，可以将解压后的文件夹重命名，在这里重命名为fonts。3、在下载处选择下载代码，自定义下载位置 ，下载后的代码是个压缩包。图一图二所圈的都是他们的名字的但是图一图二是两种不同的使用方法。方法一中的图标名 取自图二，需要注意的是。6、找到字体图标名。
笔记-day07-前端基础CSS第五天.pdf
10-11
`font`定义字体家族、大小、样式等，`text-decoration`添加下划线、删除线等装饰，`text-align`调整文本对齐方式，`vertical-align`控制行内元素的垂直对齐，`white-space`管理文本换行和空白，`break-word`防止文本...
-CSS-笔记-
April_Aimer的博客
02-07 2250
目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程 从HTML被发明开...
学习笔记-CSS
seruyyyyyy的博客
03-15 522
CSS简介（层叠样式表） css主要用于场景，用于美化页面 HTML只关心内容的语义，所以外观样式一般由css来负责，使页面更美观 css语法规范 由选择器和一条或多条声明构成 <style> /* 选择器 */ /* 给谁改样式（改什么样式） */ p { /* 修改文字为红色 */ color: red; /* 修改文字大小为十二像素 */
CSS精灵图和字体图标的使用
Bulut0907
11-07 644
浏览器客户端进行请求，加载第一个字体图标的时候，服务端就会将fonts文件夹下的4个不同格式文件，发送客户端，后面的字体图标就不需要再进行请求了。默认是选择模式，点击需要的图标进行选择，下面会进行选择的个数统计。如果以前的字体图标不够用了，需要添加新的字体图标，可以点击Import Icons将selection.json文件进行上传，里面记录了我们之前下载的字体图标信息。竖向是Y轴，向下是正，向上是负。打开属性显示框，选择矩形选框工具，对目标小图片进行框选，在属性显示框就可以看到目标小图片的位置和大小。
CSS精灵图(Sprite)笔记
Z_CH8648的博客
11-27 919
网站上有很多小图标，这些小图标如果使用单独的图片，会对服务器产生大量的连接请求，造成堵 塞；精灵图是把许多小图标整合成一张图片，减少连接请求，增加页面显示速度。
CSS高级技巧（精灵图（1-5课）+字体图标（6-9课）+CSS三角（10-11课））
weixin_45727991的博客
11-26 349
1、CSS高级技巧导读 2、为什么需要精灵图 为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术 核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就够了。 3、精灵图（sprites）的使用（原理） 核心： 1、精灵技术主要针对于背景图片的使用，就是把多个小背景图片整合到一张大图片中。 2、这个大图片也称为sprites精灵图、或者 雪碧图 3、移动背景图片位置，此时可以使用background-position 4、移动的距离就是这个目标图片的x
CSS之盒子模型、溢出属性、元素显示类型、定位、三角形
m0_57752092的博客
04-26 271
一、盒子模型 1.1内边距 1.2内边距特性 padding: 20px 30px; /* 内边距 1个值，4个方向一样 2个值，上下，左右 3个值，上 左右 下 4个值，上 右 下 左 */ padding-top：10px； /* 1.背景色蔓延到内边距 2.可以设置单一方向 ...
html边框颜色线性渐变,css3设置边框颜色渐变的方法有哪些
weixin_42519826的博客
06-15 1869
css3设置边框颜色渐变的方法有哪些发布时间：2020-09-14 14:51:54来源：亿速云阅读：110作者：小新css3设置边框颜色渐变的方法有哪些？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！我们设置边框颜色渐变时可以用到css3中的属性是border-image或者border-colorcss3边框颜色...
移动端文本多行省略
qq_26239917的博客
03-14 313
.ellipsis2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orinent:vertical; }
CSS 搞事技巧：border+transparent
weixin_33675507的博客
04-15 1782
介绍 出门忘带电源线，快递到了终于可以继续水文章了。好不容易获得一个面试机会，面试官很 Nice，可惜的是当时处于懵逼状态，错过了大好的机会： 面试官：巴拉巴拉吧…… 我：嗯，啊，这个，那（吱吱呜呜）…… 面试官：你知道怎么绘制三角形嘛？ 我：主要是利用了 border 和 transparent 这两个属性。其余边设置为 transparent，然后将对应的方向设置为需要的颜色即可，一般常用等边...
html图片要上下居中显示,CSS图片垂直居中最简单的方法推荐
weixin_29585583的博客
06-04 585
使用CSS实现图片垂直居中，本文提供三种方法实现CSS图片居中，其中第一种加一个标签的方法是我推荐的，代码简洁，兼容性比较好，其他的hack可能会存在问题，不建议使用。如果你对图片实现居中有更好的方法，也请告知我们。详情请参考之前写过的一篇文章：CSS多行文字垂直居中的两种方法。HTML代码：CSS代码：.middle-box{height:300px; border: 1px solid #f0...
android 热词推荐控件_从0系统学Android--3.2四种基本布局
weixin_39861498的博客
11-27 147
本系列文章目录：更多精品文章分类本系列持续更新中….一个界面总是要由许多的控件来组成的，如何让这些控件可以在界面上有条不絮的摆放呢？这就需要布局来实现了。布局是一种可以放置很多控件的容器，可以让这些控件按照一定的规律来排列。布局内即可以放置普通控件也可以放置布局，可以有多层嵌套。关系图接下来介绍 Android 中 4 中常用的基本布局3.3.1 线性布局Linerlayout 又称为线性布局，是...
CSS高级技巧：精灵图、字体图标与布局解析
本文档是关于CSS的高级技巧总结，涵盖了精灵图、字体图标、CSS三角、用户界面样式、vertical-align属性应用、溢出文字省略号显示、常见布局技巧和CSS初始化等内容。 #### <h4 id="id1">1.精灵图 精灵图是一种优化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值