前端学习--品优购

最新推荐文章于 2021-02-19 19:46:59 发布

code_Wang910

最新推荐文章于 2021-02-19 19:46:59 发布

阅读量133

点赞数

文章标签： css html web svg

本文链接：https://blog.csdn.net/weixin_44676579/article/details/107072811

版权

引入css样式初始化样式base.css 公共样式common.css两个文件
创建首页index.html，<html lang="en">改为 <html lang="zh-CN">
在head标签里<link rel="stylesheet" herf=" url ">引入
获取一个网站的icon图标，在网址后加/favicon.ico 即可（注意不是favicon.icon）
使用： 1.把图标保存在根目录下（必须在根目录下） 2.在html head标签中引入<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 这个不用记，拿来用，type="image/x-icon"可以省略
**自己制作：**找到一个自己喜欢的图标，用PS裁剪下来，保存为图片格式，用 http://www.bitbug.net/ 转为ico格式，按上面上面方法使用
网站优化三大标签

1.网页title 标题 在title标签里
建议：
首页标题：网站名（产品名）- 网站的介绍
例如：京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!
华为- 构建万物互联的智能世界
2.Description 网站说明
建议：网站介绍关键词简短
例如：

  <meta name="description" content=“华为是全球领先的ICT(信息与通信)基础设施和智能终端提供商,致力于把数字世界带入每个人、每个家庭、每个组织,构建万物互联的智能世界。”

3.keywords关键词

<meta name="keywords" content="小米,小米6,红米Note4,小米MIX,小米商城" />

字体图标（重点）

两个网站
http://icomoon.io 国外的
http://www.iconfont.cn/ 阿里的

去上面的网站下载，解压把font文件夹放在根目录下，在demo.html 复制样式到标签中（span div等），在style中声明字体，代码直接用

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

再在style中给盒子使用字体
span {
font-family: “icomoon”;
}

追加使用网站中import icons 选择selection.json文件即可添加刚刚没加上的，删掉之前的文件夹，同样方法使用