html5css3利用伪类做小图标

最新推荐文章于 2024-08-09 16:06:18 发布

郭胜_自强

最新推荐文章于 2024-08-09 16:06:18 发布

阅读量3.5k

点赞数 1

分类专栏： html5

本文链接：https://blog.csdn.net/GS2016/article/details/79230021

版权

本文通过HTML5的`<div>`和`<p>`元素，结合CSS3的伪类`:before`和`:hover`，展示如何使用自定义字体创建小图标，并在鼠标悬停时改变颜色。通过`@font-face`引入自定义字体`guosheng`，设置元素样式以显示和交互图标。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>利用伪类做小图标</title>
		<style type="text/css">
			@font-face {
				font-family: 'guosheng';
				src: url('fonts/iconfont.eot');
				src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'), 
				url('fonts/iconfont.woff') format('woff'), 
				url('fonts/iconfont.ttf') format('truetype'), 
				url('fonts/iconfont.svg#iconfont') format('svg');
			}
			div{
				width:200px;
				height:200px;
				border: 1px solid gray;
				margin:100px auto;
				font-family: guosheng;
				text-align:center;
				line-height:200px;
				font-size: 150px;
			}