精灵技术字体图标CSS三角用户界面样式溢出文字显示常见布局技巧
Posted alexephor
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了精灵技术字体图标CSS三角用户界面样式溢出文字显示常见布局技巧相关的知识，希望对你有一定的参考价值。
精灵技术
减少服务器的请求次数 把一些小的图片整合到一张大的图
Fireworks与photoshop cs6使用差不多
使用方法：
1.主要针对小的背景图片使用，就是把多个小背景图片整合到一张大图片上
2.这个大图片也称之为sprites图或者雪碧图
3.移动背景图片位置可以使用background-position
4.移动的距离就是这个目标的x与y轴
5.一般情况下往下往左移动都是负数
6.盒子的大小要精确计量
字体图标
一.本质上还是文字：可以修改颜色 变换大小 字体图标的使用
字体图标的下载
http://icomoon.io 国外的稍微慢点
http://www.iconfont.cn 稍微快点
1.首先下载下来成为icomoon.zip下载包
2.把下载包里边的fonts文件放入使用页面根目录下
3.复制style.css字体样式申明@font-face
4.在body中写入标签并且复制demo.html中的小框框加入标签中
5.在style中制定标签样式指定字体
二.在原来的基础上追加字体图标
点击import Icons-->选中之前的从新上传文件selection.json-->再重新create使用就行了
CSS三角做法
1.设置一个没有高度和宽度的盒子
2.给盒子设置border边框大小 实线 颜色
3.border的top right bottom left
4.如果指定三角形指向那一方向：把其他几个方向指定为透明即可transparent
.div{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
CSS用户界面样式
1.更改用户鼠标cursor的样式
default pointer move text not-allowed
https://www.w3cschool.cn/cssref/pr-class-cursor.html
2.取消表单轮廓
outline:none
https://www.w3cschool.cn/cssref/pr-outline.html
3.防止表单域拖拽
resize:none
https://www.w3cschool.cn/cssref/css3-pr-resize.html
vertical-align属性
用于设置图片或者表单(行内元素或者行内块元素)和文字垂直对齐
属性：baseline基线对齐 bottom middle top
解决图片底部空白缝隙方案
1.只要不是基线对齐(推荐还是使用此方式)
2.把图片转为块级元素(新浪 独占一行 可能会影响其它盒子的布局)
溢出的文字使用省略号显示
1.单行文字溢出显示省略号
white-space: normal 如果文字显示不开自动换行
white-space: nowrap 如果文字显示不开强制一行显示
overflow: hidden
text-overflow: ellipis 文字溢出的时候用省略号来显示
2.多行文字溢出显示省略号
.multiple-line{
width:200px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
}
常见布局技巧
1.margin负值的使用
2.文字围绕浮动元素
3.行内块巧妙使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体图标使用、CSS三角制作、用户界面样式</title>
<style>
@font-face {
/*字体申明*/
font-family: ‘icomoon‘;
src: url(‘fonts/icomoon.eot?kaurh3‘);
src: url(‘fonts/icomoon.eot?kaurh3#iefix‘) format(‘embedded-opentype‘),
url(‘fonts/icomoon.ttf?kaurh3‘) format(‘truetype‘),
url(‘fonts/icomoon.woff?kaurh3‘) format(‘woff‘),
url(‘fonts/icomoon.svg?kaurh3#icomoon‘) format(‘svg‘);
font-weight: normal;
font-style: normal;
font-display: block;
}
/*指定字体*/
span {
font-family: icomoon;
font-size: 100px;
color: #ff46a6;
}
.box1 {
/*首先要制定不要大小的盒子*/
width: 0;
height: 0;
/*指定一个边框*/
border-top: 20px solid red;
border-right: 20px solid green;
border-bottom: 20px solid blue;
border-left: 20px solid deeppink;
}
.box2 {
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 50px solid deeppink;
margin: 100px auto;
}
.jd {
position: relative;
width: 100px;
height: 200px;
background-color: wheat;
margin: 300px auto;
}
.jd span {
position: absolute;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: wheat;
top: -20px;
left: 60px;
}
input, textarea {
outline: none;
}
textarea {
resize: none;
}
img {
/*底部对齐*/
/*vertical-align: bottom;*/
vertical-align: middle;
/*vertical-align: top;*/
}
#yy {
vertical-align: middle;
}
.box3 {
width: 150px;
height: 80px;
background-color: #98ffb5;
margin: auto;
/*自动换行*/
/*white-space: normal;*/
/*一行显示 指定元素空白处处理方式normal pre nowrap pre-wrap pre-line*/
white-space: nowrap;
overflow: hidden;
/*一行显示不完就用省略号来替代*/
text-overflow: ellipsis;
}
.box4 {
width: 150px;
height: 115px;
background-color: #ff8b8e;
margin: auto;
overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子*/
display:-webkit-box;
/*设置或者检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient:vertical;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:3;
}
ul li {
position: relative;
list-style: none;
float: left;
width: 100px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover {
/*如果li没有定位添加相对定位即可*/
position: relative;
border-color: #ff2b9d;
}
ul li:hover {
/*如果li都有定位添加在z-index提高堆叠顺序*/
z-index: 1;
border-color: #ff2b9d;
}
*{
padding: 0;
margin: 0;
}
.box5 {
width: 300px;
height: 70px;
background-color: magenta;
margin: 0 auto;
padding: 5px;
}
.pic {
float: left;
width: 120px;
height: 60px;
margin-right: 5px;
}
.pic img {
width: 100%;
}
</style>
</head>
<body>
<!--小框框就是字体图标-->
<span>?</span>
<span>?</span>
<!--CSS三角制作-->
<div class="box1"></div>
<div class="box2"></div>
<!--京东案例小三角制作-->
<div class="jd">
<span></span>
</div>
<!--用户界面：1.更改鼠标cursor样式-->
<ul>
<li style="cursor: default">默认小白鼠标样式</li>
<li style="cursor: pointer">小手跳转鼠标样式</li>
<li style="cursor: move">光标移动详细鼠标样式</li>
<li style="cursor: text">光标指向文本样式</li>
<li style="cursor: not-allowed">光标禁止样式</li>
</ul>
<!--用户界面： 2.取消input输入框蓝色边框颜色 outline:none-->
<input type="text">
<!--用户界面： 3.防止用户拖拽文本域 resize:none 这里最好标签写在一行之上 不然换行在文本框中有间隙 如果想要一定间隙自己可以设置padding-->
<textarea name="" id="xx" cols="30" rows="10"></textarea>
<!--vertical-align属性的使用 图片与文字垂直对齐-->
<img src="./th.jpeg" > 我是学友粉
<br>
<textarea name="" id="yy" cols="30" rows="10"></textarea> 请你留言
<!--溢出的文字使用省略号显示 1.单行文字-->
<div class="box3">
圣诞节和水果的巨大看撒谎的决定
</div>
<!--溢出的文字使用省略号显示 2.多行文字-->
<div class="box4">的时间按活动和科技活动到货款鸡蛋卡号多少空间和啊可就是打开的建行卡号扩大化的空间和</div>
<!--常见布局的技巧 margin-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<br>
<!--文字围绕浮动元素-->
<div class="box5">
<div class="pic">
<img src="./Screenshot%20from%202019-11-20%2014-53-57.png" >
</div>
<p>香港一女公务员阻挠市民清理路障 被谴责后叫嚣：打我啊</p>
</div>
</body>
</html>
页码制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页码制作</title>
<style>
* {
padding: 0;
margin: 0;
}
.box6 {
text-align: center;
}
.box6 a {
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
color: #333333;
text-align: center;
line-height: 36px;
text-decoration: none;
}
.box6 .prev,
.box6 .next {
width: 80px;
font-size: 14px;
}
.box6 .current,
.box6 .elp {
background-color: #fff;
border: none;
}
.box6 a:hover {
background-color: pink;
}
.box6 input {
width: 36px;
height: 25px;
border: 1px solid #ccc;
outline: none;
background-color: #f7f7f7;
color: #333333;
text-align: center;
}
.box6 button {
width: 36px;
height: 24px;
border: 1px solid #cccccc;
outline: none;
background-color: #f7f7f7;
color: #333333;
}
</style>
</head>
<body>
<!-- 常见布局技巧 行内块巧妙运用-->
<div class="box6">
<a href="#" class="prev"><<上一页</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">>>下一页</a>
<span> </span>
到第
<input type="text">
页
<span> </span>
<button>确定</button>
</div>
</body>
</html>
以上是关于精灵技术字体图标CSS三角用户界面样式溢出文字显示常见布局技巧的主要内容，如果未能解决你的问题，请参考以下文章