今天写着某实例,突然想起还有这个暂存的笔记·····啊··鸽了
那就重新开始更新吧! 跳转到
基础环境搭建
使用vscode进行代码编写,推荐使用以下插件!
open in browser
- 右键添加在浏览器中打开项目Auto Rename Tag
- 自动重命名HTML + Xml 标签JS-CSS-HTML Formatter
- 格式化代码
标签语义
<!DOCTYPE>
标签 : 文档类型声明标签
<html lang="zh-CN">
浏览器根据其内容识别是何种语言网站,此处为中文,将采取中文来显示
<meta charset="utf-8">
字符集 ,此处采取utf-8存储文字信息,必须写 否则乱码
以上三条语句在vscode中均会自动生成,需理解其作用
重新开始更新,过去一些内容已经删除了,仅记录个人学习中的一些小技术····,关于标签使用的内容手动查询文档即可
css高级技巧
精灵图技术 Sprites
精灵图 也称为 雪碧图 \ CSS Sprites
其出现是为了有效地减少服务器接收和发送的请求次数,提高页面的响应速度。 有效减小服务器的压力
( 嗯,以前提取出来的图片就是使用了这个技术 当时还看不懂呢··· )
/* 总的来说啊,精灵图使用原理即在一张图片上进行定位, 使其正好显示在盒子内 */
注意精灵图定位使用的时网页坐标系 精灵图向上移动 y 为负值 向左移动 x 为负值
虽然精灵图优点显著,但是其缺点也很明显:
- 图片文件啊···还是比较大的
- 图片的放大和缩小会导致图片失真
- 精灵图制作完毕后想再更该会十分麻烦
字体图标 Iconfont
字体图标主要用于显示网页中一些通用的、常见的小图标
字体图标很好的解决了精灵图技术的弱项 , 其展示出来的是图标 ,本质属于字体
不同的字体图标提供会有不同的使用说明文档,根据文档引用就行。
✏️ ———— 手动分割线 ——————
🥰 个人练习样式 记录 ✨
这里将记录我自己写的一些样式!欢迎交流学习,发在博客的基本都是使用的CSS行内样式表
, 可能写得不是很好,·····嘛,其实自己觉得还是蛮好看的啦😂,以后整好了pug [ 说实话挺需要这类教程的 ] 会加进预设标签内,到时就可以直接使用啦。呃···名称什么的,随便取的😝···· 随缘更新吧
✨ 可跳转式类标签
👇
✨ 描述式拟按钮
👇