精灵图
拼写名字案例
<!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>
引用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>
鼠标样式cursor
cursor: default;
CSS 表单
1.去掉边框线
outline: 0;
2.去掉文本域防止拖拽
resize: none;
