CSS —— 字体图标、三角形、鼠标、轮廓线、垂直对齐
目录
一、字体图标
1. 下载
1.1 icomoon 字库(http://icomoon.io)
1.1 阿里 iconfont 字库 (http://www.iconfont.cn/)
2. 引入
2.1 通过如上链接下载后将下载包里的 fonts 文件夹放入页面根目录下;
2.2 字体声明:在CSS样式中全局声明字体;
注:在使用字体图标时,一定要有 font-family 且要和字体声明中的一致;
/* 字体声明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?p4ssmb');
src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
url('fonts/icomoon.woff?p4ssmb') format('woff'),
url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
font-size: 100px;
color:pink;
}
二、三角形、用户界面
1. 三角形
1.1 当一个盒子没有高度和宽度而直接设置边框,则会发现如下图所示,因此三角形的做法就是如此,只需要将其余三边改为透明;
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border-right: 50px solid blue;
border-left: 50px solid #000;
border-bottom: 50px solid green;
border-top: 50px solid red;
}
1.2 三角形的方向与边框方向相反,如
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-top-color: pink;
}
2. 鼠标样式
2.1 cursor:设置鼠标的样式;
2.2 语法格式:
cursor : default| pointer| move| text| not-allowed;
<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>
2.3 属性值:
3. 轮廓线
3.1 outline:用于清除表单的边框;
3.2 语法格式:
outline : none/0;
input {
outline: none;
}
4. 防止拖拽文本域
4.1 resize:防止文本域被拖拽;
4.2 语法格式:
resize : none;
textarea {
resize: none;
}
三、图片、表单和文字对齐
1. 概述
1.1 vertical-align:设置一个元素的垂直对齐方式;
1.2 使用场景:用于设置图片或者表单(行内块元素)和文字垂直对齐;
注:只针对于行内元素或者行内块元素。
2. 使用
2.1 语法格式:
vertical-align : baseline | top | middle | bottom;
2.2 属性值:
2.3 使用:
依次为 baseline、top、middle、bottom;
<img src="ldh.jpg" alt="">刘德华