精灵图的使用![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b384df258d529f4754b5da034c239373.png#pic_center)
用切片工具选取区域,左下角有区域的长宽和x轴y轴坐标
<style>
.box1 {
width: 60px;
height: 60px;
margin: 100px auto;
background: url(images/jingling.png) no-repeat -182px 0;
}
.box2 {
width: 30px;
height: 30px;
margin: 150px auto;
background: url(images/jingling.png) no-repeat -152px -106px;
}
</style>
。
。
。
字体图标的使用
去/https://icomoon.io/下载字体图标,放到根目录下
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?mu8g5e');
src: url('fonts/icomoon.eot?mu8g5e#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?mu8g5e') format('truetype'),
url('fonts/icomoon.woff?mu8g5e') format('woff'),
url('fonts/icomoon.svg?mu8g5e#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-size: 50px;
color: aqua;
font-family: 'icomoon';
}
</style>
<body>
<span></span>
<span></span>
<span></span>
<span></span>
</body>
。
。
。
三角的做法
1.等腰三角形
<style>
.box {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 10px solid transparent;
border-left-color:red ;
margin: 300px auto;
}
</style>
2.直角三角形
.box {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 50px 15px 0 0;
margin: 100px auto;
}
。
。
。
用户界面样式-鼠标样式
<ul>
<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>
</ul>
。
。
。
去掉表单轮廓线和防止拖拽文本域
input { outline:none; }
。
。
。
textarea { resize:none; }