CSS —— 字体图标、三角形、用户界面

CSS —— 字体图标、三角形、鼠标、轮廓线、垂直对齐

 

目录

CSS —— 字体图标、三角形、鼠标、轮廓线、垂直对齐

一、字体图标

1. 下载

2. 引入

二、三角形、用户界面

1. 三角形

2. 鼠标样式

3. 轮廓线

4. 防止拖拽文本域

三、图片、表单和文字对齐

1. 概述

2. 使用

#END（部分截图源于b站pink老师）

---

 

一、字体图标

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="">刘德华

 

#END（部分截图源于b站pink老师）