我的前端自学之路2020/12/19

CSS精灵技术
目的：为了有效减少服务器接收和发送请求的次数，提高页面加载速度
精灵图（sprite）其实是将网页中的一些背景图片整合到一张透明背景的大图中，当网页元素需要不同位置的小图时，再通过背景图片的位移属性精确定位到小图的位置。
1.精灵图在使用时，位置和大小必须测量准确。
2.精灵图在移动时，x轴和y轴的值，基本上都是负的。
CSS滑动门技术
目的：为了使各种形状的背景能够自适应元素中文本内容的多少，背景图片能够自动根据内容的多少实现拉伸和紧缩。
结构：a标签包含span标签（整个导航栏都是可以点击的）

<a href="javascript:;">
	<span>滑动门导航栏</span>
</a>

CSS:

* {
	padding: 0;
	margin: 0;
}
a {
	display: inline-block;
	height: 30px;
	background: url(背景图片路径) no-repeat;
	padding-left: 15px;
	text-decoration: none;
	color: #fff;
}
a span {
	display: inline-block;
	line-height: 30px;
	background: url(同一张背景图片) no-repeat top right;
	padding-right: 15px;
}

只要内容不超过内径图片的长度，以上结构可以无限复用。

CSS制作三角形：

<div><div>

下三角（倒置）

div {
	width: 0;
	height: 0;
	border-top: 20px solid black;
	border-bottom: 20px solid transparent;
	border-left: 20px solid transparent;
	border-right: 20px solid tansparent;
}

同理，正三角和其他三角就是将对应的边框的透明色改成相应的颜色，而其他边框改成透明，为了照顾兼容性，可以加上：line-height: 0; font-size: 0;

ico图标
url+favicon.ico(扒人家图标的方法)
引用：(为了兼容性，务必把图标放在项目的根目录下面)

<link rel="shortcut icon" href="./favicon.ico" />

自己制作ico图标的网站：www.bitbug.com(比特虫)

网站优化的三大标签SEO

网页title标题：
title具有不可替代性，他是我们内页第一个重要标签，时搜索引擎了解网页的入口，和对网页主题归属的最佳判断点。
标题的长度：Goolge（70KB）长度不超过35个中文字，Baidu（56KB）28个中文字。
关键字分布：最先出现的字权重越高。
关键字词频：主关键词出现3次，辅关键词出现一次。
如：网站名称–网站的综合介绍

<title>长度：Baidu(56KB),28个中文，权重：先出现原则，词频：主关键词出现三次、辅关键词出现一次</title>

description 网站说明：
对关键词的作用明显降低，但是由于很多搜索引擎，仍然采用网页meta标签中描述部分作为"搜索结果的内容摘要"，就是简要说明我们网站主要做什么的。
我们提倡，description作为网站的总体业务和主题概括，多采用：“我们是…”，“我们提供…”,“电话:000…”,之类语句。
注意点：描述中要出现关键词，与正文内容相关
同样遵循简短原则，描述内容不要超过120个中文字（含空格）
补充在title和keywords中未能充分表述的说明
用英文逗号。

<meta name="description" content="用于搜索引擎快照部分..." />

keywords 页面关键词：
是搜索引擎关注点之一，keywords应该限制在6~8个关键词左右。

<meta name="keywords" content="页面关键词、搜索引擎关注度之一，限制在6~8个词左右" />

字体图标iconfont
www.icomoon.io 或者 www.icofont.cn

---

接下来几天打算模拟某东，做几个没有交互的页面，巩固以下前几天所学的知识，首页、其中一个列表页、一个商品详情页、注册页，但是不知道自己会做多久，所以等全部做完再来继续做笔记。