CSS精灵图,引用icomoon字体,三角边框案例,鼠标样式、表单样式262

精灵图

在这里插入图片描述
CSS精灵图,引用icomoon字体,三角边框案例,鼠标样式、表单样式262_第1张图片
拼写名字案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
     
            display: inline-block;
            width: 108px;
            height: 118px;
            background: url(images/abcd.jpg) no-repeat
        }
        .p{
     
            background-position:  -485px -271px;
        }
        .i{
     
            width: 60px;
            height: 108px;
            background-position: -328px -140px;
        }
        .n{
     
            background-position:  -257px -270px;
        }
        .k{
     
            background-position:  -492px -135px;
        }
    </style>
</head>
<body>
    <span class="p"></span>
    <span class="i"></span>
    <span class="n"></span>
    <span class="k"></span>
</body>
</html>

CSS精灵图,引用icomoon字体,三角边框案例,鼠标样式、表单样式262_第2张图片

引用icomoon字体方法

1.在https://icomoon.io/里下载好需要的文件
2.将下载后的字体下的fonts文件夹放在根目录
3.用记事本打开style.css文件,复制以下代码到style样式中

     @font-face {
     
        font-family: "icomoon";
        src: url("fonts/icomoon.eot?uojbsd");
        src: url("fonts/icomoon.eot?uojbsd#iefix") format("embedded-opentype"),
          url("fonts/icomoon.ttf?uojbsd") format("truetype"),
          url("fonts/icomoon.woff?uojbsd") format("woff"),
          url("fonts/icomoon.svg?uojbsd#icomoon") format("svg");
        font-weight: normal;
        font-style: normal;
        font-display: block;
      }
      span{
     
        font-family: "icomoon"; 
        font-size: 18px;
        color: blue;
      }

4.在需要的样式中声明字体类型,在网页中打开demo.html文件复制需要的图标即可。

        font-family: "icomoon"; 

5.如果还需要字体,需要到官网中选择“import icons”,导入以前的”selection.json“即可。

css边框三角案例

        .box{
     
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-left-color:red;
        }

在这里插入图片描述
案例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
     
            position: relative;
            width: 200px;
            height: 100px;
            background-color: blue;
            margin: 100px auto;
        }
        .box span{
     
            position: absolute;
            bottom: 20px;
            right: -20px;
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-left-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>
        </span>
    </div>
</body>
</html>

CSS精灵图,引用icomoon字体,三角边框案例,鼠标样式、表单样式262_第3张图片

鼠标样式cursor

CSS精灵图,引用icomoon字体,三角边框案例,鼠标样式、表单样式262_第4张图片

cursor: default;

CSS 表单

1.去掉边框线

            outline: 0;

2.去掉文本域防止拖拽

            resize: none;

你可能感兴趣的:(css,html)