跟着pink老师学前端CSS-D7
作者：互联网
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