标签：pink icomoon color height width D7 font border CSS
1. 精灵图
1.1 为什么需要精灵技术
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
1.2 精灵图（sprites）的使用
- 精灵技术主要针对于背景图片的使用，就是将网页中的一些小背景图像整合到一张大图中。
- 这个大图片也称为sprites精灵图或雪碧图。
- 移动背景图片的位置，此时可以用background-position。
- 移动的距离就是这个目标图片的x和y坐标。
- 因为一般情况下都是往上往左移动，所以数值是负值。
1.3 案例
<!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>
span {
display: inline-block;
background: url(images/abcd.jpg) no-repeat;
}
.p {
width: 100px;
height: 112px;
background-position: -490px -276px;
}
.i {
width: 60px;
height: 108px;
background-position: -327px -142px;
}
.n {
width: 108px;
height: 109px;
background-position: -215px -141px;
}
.k {
width: 105px;
height: 114px;
background-position: -495px -142px;
}
</style>
</head>
<body>
<span class="p">p</span>
<span class="i">i</span>
<span class="n">n</span>
<span class="k">k</span>
</body>
</html>
2. 字体图标
字体图标主要用于显示网页中通用、常用的一些小图标，它展示的是图标，本质属于字体。
2.1 字体图标的下载
- icomoon字库： http://icomoon.io
- 阿里 iconfont字库： http://www.iconfont.cn/
2.2 字体图标的引用
- 把下载包里的fonts文件夹放入页面根目录下。
- 在CSS样式中字体声明：下载包里的style.css文件第一段，注意路径。
- 打开下载包里的demo.html，找到想要的图标，图标后面的小方框，就是我们想要的字体图标。
- 设置样式，font-family:（字体声明中声明的名字）
icomoon实例：
<!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>字体图标</title>
<style>
/* 字体声明 :下载包里的style.css文件第一段，注意路径*/
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?e4ufc2');
src: url('fonts/icomoon.eot?e4ufc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?e4ufc2') format('truetype'),
url('fonts/icomoon.woff?e4ufc2') format('woff'),
url('fonts/icomoon.svg?e4ufc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
/* 必须和字体声明里的名字一样 */
font-family: 'icomoon';
font-size: 100px;
color: hotpink;
}
</style>
</head>
<body>
<!-- 打开下载包里的demo.html，找到想要的图标，图标后面的小方框，就是我们想要的字体图标 -->
<span></span>
<span></span>
</body>
</html>
2.3 字体图标的追加
icomoon–>icomoonApp–>import icons–>导入下载包里的selection.json文件–>继续选择图标–>下载压缩包替换之前的文件
3. CSS三角
3.1 原理
宽高为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>三角制作</title>
<style>
/* 指定宽高为0但是有边框的盒子 */
.box1 {
width: 0;
height: 0;
border-top: 50px solid hotpink;
border-right: 50px solid springgreen;
border-bottom: 50px solid skyblue;
border-left: 50px solid yellow;
}
.box2 {
/* 宽高必定为0 */
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
/* 有顺序，先指定透明色，再指定有颜色的，否则会被覆盖 */
border: 50px solid transparent;
border-top-color: hotpink;
margin: 200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
3.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>京东三角</title>
<style>
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: hotpink;
margin: 100px auto;
}
.jd span {
position: absolute;
top: -20px;
left: 80px;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 10px solid transparent;
border-bottom-color: hotpink;
}
</style>
</head>
<body>
<div class="jd">
<span></span>
</div>
</body>
</html>
4. 用户界面样式
4.1 鼠标样式cursor
li {cursor:pointer}
| 属性值 | 描述 |
|---|---|
| default | 三角默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
4.2 轮廓线outline
去掉表单默认的蓝色边框：
input {outline :none;}
或
input {outline :0;}
4.3 文本域防止拖拽resize
textarea {resize :none;}
5. vertical-align属性应用
5.1 垂直对齐
它用于设置图片或者表单（行内块元素）和文字垂直对齐。
vertic-align:baseline|top|middle|bottom
| 值 | 描述 |
|---|---|
| baseline | 默认，元素放在父元素的基线上。 |
| top | 把元素的顶端与行中最高元素的顶端对齐。 |
| middle | 把此元素放在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
5.2 解决图片底部默认空白缝隙问题
图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
两种解决方案：
- 给图片添加vertic-align:middle|top|bottom。
- 把图片转换为块级元素。
6. 溢出的文字省略号显示
6.1 单行文本溢出显示省略号
1. 先强制一行内显示文本
white-space:nowrap;
2. 超出的部分隐藏
overflow:hidden;
3. 文字用省略号代替超出的部分
text-overflow:ellipsis;
6.2 多行文本溢出显示省略号
overflow:hidden;
text-overflow:ellipsis;
<!-- 弹性伸缩盒子模型显示 -->
display:-webkit-box;
<!-- 限制在一个块元素显示的文本的行数 -->
-webkit-line-clamp:2;
<!-- 设置或检索伸缩盒对象的子元素的排列方式 -->
-webkit-box-orient:vertical;
7. 布局技巧
7.1 margin负值运用
两个盒子的边框重叠实现1+1=1的效果：让每个盒子margin往左移动-1px正好压住相邻盒子边框。
实现鼠标经过盒子边框变颜色：
-
如果盒子没有定位，则鼠标经过添加相对定位。
选择器：hover{ position:relative; border-color:blue; } -
如果盒子有定位，则加z-index
选择器：hover{ z-index:1； border-color:blue; }
7.2 文字围绕浮动元素
7.3 行内块的巧妙运用
<!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>行内块的巧妙运用</title>
<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;
font-size: 14px;
}
.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 {
height: 36px;
width: 60px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<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>
到第
<input type="text">
页
<button>确定</button>
</div>
</body>
</html>
7.4 CSS三角强化
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>价格框</title>
<style>
.box1 {}
.price {
width: 160px;
height: 24px;
border: 1px solid red;
margin: 0 auto;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
color: white;
font-weight: 700;
}
.miaosha i {
position: absolute;
right: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="price">
<span class="miaosha">
￥1650
<i></i>
</span>
<span class="origin">￥5650</span>
</div>
</body>
</html>
7.5 CSS初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对html文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。
京东初始化代码：
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
img {
border: 0;
vertical-align: middle;
}
button {
cursor: pointer;
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #c81632;
}
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: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666;
}
.none {
display: none;
}
/* 清除浮动 */
.clearfix:after{
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0;
}
.clearfix {
*zoom:1;
}
标签：pink,icomoon,color,height,width,D7,font,border,CSS 来源： https://blog.csdn.net/weixin_46548238/article/details/118033701
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。