今天写着某实例,突然想起还有这个暂存的笔记·····啊··鸽了
那就重新开始更新吧! 跳转到

基础环境搭建

使用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 [ 说实话挺需要这类教程的 ] 会加进预设标签内,到时就可以直接使用啦。呃···名称什么的,随便取的😝···· 随缘更新吧

✨ 可跳转式类标签  
👇
Title Link #0001 "这里填写内容"

✨ 描述式拟按钮  
👇
✍️ Title Link desc