HTML+CSS学习07-精灵图和字体图标

最新推荐文章于 2024-07-12 19:29:32 发布

Meowmow

最新推荐文章于 2024-07-12 19:29:32 发布

阅读量380

点赞数

分类专栏： HTML+CSS 文章标签： html5 css css3

本文链接：https://blog.csdn.net/Meowmow/article/details/124566160

版权

本文介绍了HTML和CSS中的元素显示与隐藏方法，如display、visibility和overflow。深入讲解了精灵图（雪碧图）的概念和使用，以及字体图标iconfont的下载与引用。此外，还探讨了CSS的三角形创建、用户界面样式、垂直对齐、文本溢出省略号以及常见的布局技巧，如margin负值和行内块的应用。

摘要由CSDN通过智能技术生成

元素的显示与隐藏
精灵图（雪碧图）
字体图标iconfont
- - - 字体图标的下载
    - 字体图标的引用
CSS三角
- - - 应用：对话框样式
CSS用户界面样式
- - - 鼠标样式cursor
    - 轮廓线outline
vertical-align垂直对齐
溢出文本显示省略号
- - - 单行文本溢出
    - 多行文本溢出
常见布局技巧
- - - margin负值的应用--多盒子排列边框重叠问题
    - 行内块的运用--使用a标签制作页码条

元素的显示与隐藏

display

display:none; //隐藏对象，不再占有原位置
display:block; //转换元素为块级对象，显示元素

visibility

visibility:visible; //元素可视
visibility:hidden; //元素隐藏，继续占有原位置

overflow

overflow:hidden; //不剪切超出的内容，不显示滚动条
overflow:visible; //不显示超出元素范围的内容，超出内容隐藏
overflow:scroll; //总是显示滚动条
overflow:auto; //超出元素范围自动显示滚动条，不超出不显示滚动条

精灵图（雪碧图）

有效减少服务器接收和请求资源的次数，提高网页加载速度
主要针对背景图
将网页中的一些背景图片整合到一张图片中，通过background-position来移动背景位置定位到需要用到的图片
以盒子的左上角为坐标原点，上边框为x轴，左边框为y轴，
将图片左上角对齐盒子（蓝色）左上角，图片向左/向上移动为负值，将需要的背景图移动到盒子中
在这里插入图片描述

div{
	width:60px;
	height:60px;
	background:url(img/p1.png);
	background-position:-100px -30px;
}
//或者
div{
	width:60px;
	height:60px;
	background:url(img/p1.png) no-repeat -100px -30px;
}

字体图标iconfont

展示的是图标，本质是字体
减少了服务器的请求，能很灵活地改变样式，因为本质是字体，几乎所有浏览器都支持

字体图标的下载

icomoon：http://icomoon.io
阿里iconfont：http://www.iconfont.cn/

字体图标的引用

阿里
选择图标添加到购物车，点击购物车，选择下载代码

CSS三角

div{
		width: 0;
		height: 0;
		line-height: 0;
		font-size: 0;
		border: 50px solid transparent;
		border-left-color: red;
	}

应用：对话框样式

.box2{
		width: 50px;
		height: 50px;
		background-color: red;
		position: relative;
	}
.jd{
		position: absolute;
		right: 15px;
		top: -10px;
		width: 0;
		height: 0;
		line-height: 0;
		font-size: 0;
		border: 5px solid transparent;
		border-bottom-color: black;
	}
<div class="box2"><div class="jd">