收藏
PHPz批改状态：合格
老师批语：
1.Unicode方式
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>引用字体图标</title></head><!--1. Unicode导入方式，也可以创建一个css引用，link加载即可 --><style>/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */@font-face {font-family: "iconfont"; /* Project id 3886249 */src: url("//at.alicdn.com/t/c/font_3886249_n99lmnr433.woff2?t=1675846400709")format("woff2"),url("//at.alicdn.com/t/c/font_3886249_n99lmnr433.woff?t=1675846400709")format("woff"),url("//at.alicdn.com/t/c/font_3886249_n99lmnr433.ttf?t=1675846400709")format("truetype");}.icon {font-family: iconfont;font-size: 15px;color: blue;border: 1px solid ;width: 200px;}</style><body><!-- Unicode示例 --><div class="icon"><p>用户</p><p>密码</p><p>邮箱</p></div></body></html>
2.class方式
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 阿里字体图标引入 --><link rel="stylesheet" href="//at.alicdn.com/t/c/font_3886249_n99lmnr433.css"></head><body><!-- 2.class导入方式 --><div class="iconfont"><span class="icon-yonghu-yuan user">用户</span><span class="icon-mima psw">密码</span><span class="icon-gongsiyouxiang email">邮箱</span></div><!-- 自定义修改图标样式示例 --><style>.user {color: red;font-size: 20px;}.psw {color: blue;font-size: 25px;}.email {color: violet;font-size: 30px;}</style></body></html>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>媒体查询自适应</title></head><style>/* 设置根字号1rem=10xp */html {font-size: 0.625rem;}.media {/* 设置文本颜色蓝色 */color: blue;/* 设置边框 */border: 1px solid;}/* 设置鼠标悬浮修改文本颜色红色，鼠标状态修改手指 */.media:hover {color: red;cursor: pointer;transition: 0.3s;}.media.x {/* 设置文字大小12px */font-size: 1.2rem;}.media.z {/* 设置文字大小16px */font-size: 1.6rem;}.media.d {/* 设置文字大小18px */font-size: 1.8rem;}@media (max-width:375px) {html {font-size: 12px;}}@media (min-width: 375px) and (max-width: 600px) {html {font-size: 14px;}}@media (min-width: 600px) {html {font-size: 16px;}}</style><body><p class="media x">小号</p><p class="media z">中号</p><p class="media d">大号</p></body></html>
1.学习到字体图标导入方法，设置图标
2.网页的自适应方式，媒体查询
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
