任务2-7(服务器字体+阿里巴巴矢量库)
1. 服务器字体
@font-face
@font-face{ font-family:自定义名称;src:字体源}
DOCTYPE html>
<html lang="en">
<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>Documenttitle><style>@font-face{font-family: 'tu';src: url('QianTuXiaoTuTi/QianTuXiaoTuTi-2.ttf');}p{font-family: 'tu';font-size: 2rem;}style>
head>
<body><p>明月别枝惊鹊，清风半夜鸣蝉。稻花香里说丰年，听取蛙声一片。七八个星天外，两三点雨山前。旧时茅店社林边，路转溪桥忽见。p>
body>
html>
2. 阿里巴巴矢量库
1.在网页中搜索电影,出现图标,点击添加入库
2.点击购物车,下载代码,得到压缩包3.解压文件,找到demo_index.html打开,得到使用教程
仿卖座底部导航栏:
第一种方式:
DOCTYPE html>
<html lang="en">
<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><style>@font-face {font-family: 'iconfont';src: url('download/iconfont.ttf?t=1628749907478') format('truetype');}*{padding: 0;margin: 0;list-style: none;box-sizing: border-box;}body{background-color: #ccc;}nav {width: 100%;height: 60px;background-color: white;border: 1px solid gray;position: fixed;bottom: 0;}ul {height: 100%;display: flex;justify-content: space-around;}li {text-align: center;}li p:nth-of-type(1) {font-family: 'iconfont';font-size: 25px;margin-top: 5px;}li:nth-of-type(1){color: red;}style>
head>
<body><nav><ul><li><p>p><p>电影p>li><li><p>p><p>影院p>li><li><p>p><p>资讯p>li><li><p>p><p>我的p>li>ul>nav>
body>
html>
第二种方式
DOCTYPE html>
<html lang="en">
<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><link rel="stylesheet" href="download/iconfont.css"><style>*{padding: 0;margin: 0;list-style: none;box-sizing: border-box;}body{background-color: #ccc;}nav {width: 100%;height: 60px;background-color: white;border: 1px solid gray;position: fixed;bottom: 0;}ul {height: 100%;display: flex;justify-content: space-around;}li {text-align: center;}li p:nth-of-type(1) {font-family: 'iconfont';font-size: 25px;margin-top: 5px;}li:nth-of-type(1){color: red;}style>
head>
<body><nav><ul><li><p class="iconfont icon-dianying">p><p>电影p>li><li><p class="iconfont icon-yingyuan">p><p>影院p>li><li><p class="iconfont icon-xiaoxiicon">p><p>资讯p>li><li><p class="iconfont icon-tubiao-">p><p>我的p>li>ul>nav>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！