CSS 6 精灵图 字体图标 CSS三角 用户界面样式 vertical-align 溢出文字省略号 常见布局技巧
目录
1.精灵图
1.1为什么需要精灵图
1.2精灵图（sprites）的使用
1.3精灵图使用案例
2.字体图标
2.1字体图标的产生
2.2字体图标的优点
2.3字体图标的下载
2.4字体图标的引用（以icomoon为例）
2.5字体图标的追加（以icomoon为例）
3.CSS三角
3.1三角的实现
3.2京东三角
4.CSS用户界面样式
4.1什么时界面样式
4.2鼠标样式
4.3轮廓线outline
4.4防止拖拽文本域resize
5.vertical-align 属性应用
5.1图片、表单和文字对齐
5.2解决图片底部默认空白缝隙问题
6.溢出的文字省略号显示
6.1单行文本溢出显示省略号
6.2多行文本溢出显示省略号
7.常见布局技巧
7.1margin负值的运用
7.2文字围绕浮动元素
7.3行内块巧妙运用
7.4CSS三角强化
7.4.1不同形状三角形的实现：
7.4.2实际案例：
8.CSS初始化
1.精灵图
1.1为什么需要精灵图
精灵技术目的：
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
1.2精灵图（sprites）的使用
1.3精灵图使用案例
参考代码：
<style>div {display: inline-block;margin-left: 10px;background-repeat: no-repeat;background-image: url(../jpgs/精灵图.png);}.letter1 {width: 110px;height: 115px;background-position: -491px -272px;}.letter2 {width: 61px;height: 113px;background-position: -326px -136px;}.letter3 {width: 123px;height: 118px;background-position: -249px -270px;}.letter4 {width: 109px;height: 116px;background-position: -491px -141px;}</style>
</head><body><div class="letter1"></div><div class="letter2"></div><div class="letter3"></div><div class="letter4"></div>
</body>
2.字体图标
2.1字体图标的产生
2.2字体图标的优点
2.3字体图标的下载
2.4字体图标的引用（以icomoon为例）
第一步：
下载压缩文件后把fonts文件夹放在页面根目(建议把全部文件放在页面根目录下面，否则可能demo.html页面出错)
录下
font文件中的4个字体文件：
第二步：
字体文件引入到CSS样式中
以上样式可以在压缩文件中style.css记事文本中复制
第三步：
打开压缩文件中的demo.html复制想要的图标到html标签中
第四步：
css中给使用文字图标的标签声明字体 (复制上面)
span {font-family: 'icomoon';}参考示例：
<style>/* 字体声明（复制） */@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?hugv7x');src: url('fonts/icomoon.eot?hugv7x#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?hugv7x') format('truetype'), url('fonts/icomoon.woff?hugv7x') format('woff'), url('fonts/icomoon.svg?hugv7x#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span {/* 给使用文字图标的标签声明字体 */font-family: 'icomoon';font-size: 100px;color: red;}</style>
</head><body><!-- 复制html文件中想要的文字图标 --><span></span>
</body>展示效果：
2.5字体图标的追加（以icomoon为例）
替换：把新的fonts文件夹在原根目录地址更换，以前的压缩包可以删除
3.CSS三角
3.1三角的实现
div {width: 0;height: 0;/* 下两行代码为照顾低版本浏览器 */line-height: 0;font-size: 0;border: 50px solid transparent;border-left-color: pink;}3.2京东三角
三角+子绝父相定位
<style>.sanjiao {position: absolute;top: -10px;right: 10px;width: 0;height: 0;/* 下两行代码为照顾低版本浏览器 */line-height: 0;font-size: 0;border: 5px solid transparent;border-bottom-color: pink;}.jd {position: relative;width: 120px;height: 249px;background-color: pink;}</style>
</head><body><div class="jd"><div class="sanjiao"></div></div>
</body>4.CSS用户界面样式
4.1什么时界面样式
4.2鼠标样式
4.3轮廓线outline
4.4防止拖拽文本域resize
5.vertical-align 属性应用
5.1图片、表单和文字对齐
5.2解决图片底部默认空白缝隙问题
例：
6.溢出的文字省略号显示
6.1单行文本溢出显示省略号
6.2多行文本溢出显示省略号
前端用此技巧需要考虑文字数目、盒子宽度、高度、通过f12调整 因此更推荐让后台写
7.常见布局技巧
巧妙利用一个技术更好更快的布局：
1.margin负值的运用
2.文字围绕浮动元素
3.行内块的巧妙运用
4.css三角强化
7.1margin负值的运用
如上案例，每个盒子间有细线边框，但如如果直接加，会导致重合处边框叠加变粗
因此，我们可以利用margin负值让重叠的边框结合
例：
<style>ul li {/*代码会先执行浮动再向左移1px,因此能实现对齐同时结合边框*/float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
2.如何实现让鼠标经过此边框时改变样式 （若是直接hover 会导致旁边盒子边框压住了一边的样式 鼠标经过时只有3边变成蓝色）
若是此时盒子没有定位，添加定位relative（相对于当前位置，不会脱标）定位会压住标准流和浮动
若是盒子已经有浮动了，就加z-index：1；（定位没有指定z-index的话为默认）
参考示例：
<style>ul li {position: relative;float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;}/* ul li:hover {position: relative;border: 1px solid blue;} */ul li:hover {z-index: 1;border: 1px solid blue;}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
7.2文字围绕浮动元素
示例：在一个大盒子里面放一个div.pic装图片 p装文字 利用div.pic的浮动使文字围绕，通过边距的调整达到上图效果。
7.3行内块巧妙运用
如上红框内示例，该部分需要居中且每个页数之间有小距离
而行内块元素可以设置text-align：center居中 且自带距离，方便快捷
参考代码：
<style>.box {text-align: center;}.box a {display: inline-block;width: 50px;height: 50px;background-color: #f7f7f7;border: 1px solid #ccc;text-decoration: none;color: black;line-height: 50px;text-align: center;}.box .last,.box .next {width: 100px;}.box .now {background-color: white;border: none;}.box input {width: 50px;height: 40px;border: 1px solid #ccc;outline: none;}.box button {width: 50px;height: 50px;background-color: #f7f7f7;border: 1px solid #ccc;}</style>
</head><body><div class="box"><a href="#" class="last"><<上一页</a><a href="#">2</a><a href="#" class="now">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a><a href="#" class="now">...</a><a href="#" class="next">>>下一页</a> 到第<input type="text">页<button>确定</button></div>
</body>效果：
7.4CSS三角强化
7.4.1不同形状三角形的实现：
7.4.2实际案例：
效果：
参考代码：
一个大盒子里面包含小盒子（浮动的左span具有行内块元素特性）右span文字被挤开 跑到右边
再给左span中添加一个<i>设计小三角+利用父相子绝定位实现
<style>.prince {width: 160px;height: 24px;border: 1px solid red;line-height: 24px;margin: 0 auto;}.miaosha {position: relative;float: left;background-color: red;width: 90px;height: 100%;text-align: center;font-weight: 700;color: white;}.miaosha i {position: absolute;top: 0;right: 0;width: 0;height: 0;line-height: 0;font-size: 0;border-color: transparent white transparent transparent;border-style: solid;border-width: 24px 10px 0 0;}.origin {font-size: 14px;color: grey;text-decoration: line-through;}</style>
</head><body><div class="prince"><span class="miaosha">￥1650<i></i></span><span class="origin">￥5650</span></div>
</body>8.CSS初始化
以京东初始化为例：
/* 所有标签的内外边距清零 */* {margin: 0;padding: 0}/* em 和 i 斜体的文字不倾斜 */em,i {font-style: normal}/* 去掉 li 的小圆点 */li {list-style: none}img {/* border 0 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle}button {/* 当鼠标经过button 按钮的时候,鼠标变成小手 */cursor: pointer}a {color: #666;text-decoration: none}a:hover {color: #c81623}button,input {/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif}body {/* 抗锯齿形 让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666}.hide,.none {display: none}/* 清除浮动 */.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0}.clearfix {*zoom: 1}以后写页面的时候可以先复制粘贴
CSS 6 精灵图 字体图标 CSS三角 用户界面样式 vertical-align 溢出文字省略号 常见布局技巧相关推荐
- css高级技巧(精灵图、字体图标、三角、vertical-align属性、溢出文字省略号等)
css高级技巧 1.精灵图 1.1.为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送图片,造成服务器请求压力过大,这将大大降低页面的加载 ...
- CSS技巧之精灵图/字体图标/画三角/用户页面样式/vertical-align
15. 常见技巧 15.1 精灵图 出现原因 一个网页往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. ...
- CSS：精灵图 字体图标
一.精灵图 使用精灵图的原因 减少故武器的访问次数,防止服务器负荷过重 精灵图原理 把网页制作需要用到的小图片组合成网页效果做成一张大图传至服务器,网页制作时通过background-position ...
- CSS / 精灵图+字体图标
目录 精灵图 字体图标 字体图标的使用 字体图标的追加 字体图标加载的原理 精灵图 当网页中的图像过多,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,大大降低页面的加载速度 为了有效地减 ...
- CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- CSS 精灵图 + 字体图标
高级技巧 1·精灵图 1.基于设计稿明确盒子大小(宽 和 高) 2.使用像素大厨等工具测量图片偏移坐标: 3.布局时给盒子指定:width.height 和 background 属性: width: ...
- 三十二、精灵图字体图标
一.精灵图 1.1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. 因此 ...
- 17-CSS3 高级技巧 精灵图 字体图标 滑动门
CSS高级技巧 CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
- CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号
[CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
最新文章
- mysql data ibdata1_database - 如何在MySQL中收缩/清除ibdata1文件
- 【设计模式】java设计模式之 -- 策略模式
- Information Theory, Inference, and Learning Algorithms
- 搜索推荐系统实战：终极奥秘
- java虚拟机的生命周期
- [Java 基础]接口
- 总结 | 那些里程碑意义的深度学习目标检测论文
- 荣耀9X将搭载麒麟810处理器：全球四大7nm芯片之一无法低调
- VS2010开发应用程序读写注册表
- Android_L(64bit) 模拟器配置及创建项目
- cisco 模拟器安装及交换机的基本配置实验心得_看完这份1113页的TCP/IP协议+路由与交换机，成功上岸字节跳动...
- 互联网的世界安全吗？且行且珍惜
- php逻辑判断真假,逻辑判断之真假推理型答题技巧
- cmpp java代码_CMPP2.0 java实现基于 协议。 多个厂家的版本都有体现。 Develop 238万源代码下载- www.pudn.com...
- 偶遇 649453.sys / Adware.Cdn / Hacktool.Rootkit
- 需求分析：5W1H分析法
- c语言 计算整数n的阶乘之和,c语言求阶乘之和是多少
- 几种平均数的物理意义应用场景
- 用python把图片换成蓝底_Python给照片换底色(蓝底换红底)
- python如何捕获指定异常_如何捕获Python中的异常