临摹中国慕课静态网页周记

临摹中国慕课静态网页周记

第一周

一 、MD语法学习

(1) 标题
# ——一级标题
## ——二级标题
### ——三级标题
#### ——四级标题
##### ——五级标题
###### ——六级标题
（#与标题之间存在空格）

效果：

——一级标题

——二级标题

——三级标题

——四级标题

——五级标题

——六级标题

(2) 字体
①——加粗
**（加粗语言）**
②——高亮
==高亮==
③——删除键
~~（删除语言）~~
④——斜体
*（斜体语言）*

效果：

①——加粗
（加粗语言）
②——高亮
高亮

③——删除键
（删除语言）
④——斜体
（斜体语言）

(3)引用
>引用：
>>引用：
>>>引用：

效果：

引用：

引用：

引用：

(4)分割线
① ---
② ***

效果：

---

(5)图片插入
①——在线图片
②——本地图片
![图片名字](图片地址)
![图片](https://edu-image.nosdn.127.net/3310f128e53b406f94400f7ae6046db2.png?imageView&quality=100)
![图片](图片路径)

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4wQyWRWg-1616915579859)(D:\中国慕课网\images\南京大学.png)]

（6）超链接
[名称](超链接地址)

效果：

中国慕课网

(7)列表
①——无序列表
-目录一
-目录二
-目录三
（中间存在空格）
②——有序列表
1.名称

效果：

• 目录一

• 目标二

• 目录三

  1. 目录一
  2. 目录二
  3. 目录三
  

(8)表格
右键插入表格
（ ctrl+/ 可见表格源码）

1	2	3
4	5	6

二、各个浏览器前缀

 Chrome(谷歌浏览器) ：WebKit内核   -webkit-
 Safari(苹果浏览器) ：WebKit内核       -webkit-
 Firefox(火狐浏览器) ：Gecko内核       -moz-
 IE(IE浏览器) ：      Trident内核      -ms-
 Opera(欧朋浏览器) ：Presto内核          -o-

代码规范：
将不带前缀的版本放到最后。

三、Typora

！！超级重要，若不小心关闭了未保存的笔记，找到Typora中的偏好设置来恢复未保存的文件。

（还好可以恢复，不然一周的内容就要重新做了，心态要崩）

四、注释

在打代码时一定要一边打一边把注释打上，不要相信自己的记忆力！我真的会忘得，忘了再重新一行一行看，真的有点浪费时间啊啊

五、整体布局概念

• 不要看到网页就急着去做，一定要先看完整一个网页分布布局，其实慕课有很多栏目是重复的结构，只是内容有所区别。所以可以取相同的类名和相同的结构。但在开始做的时候，没有看后面直接做了，导致结构相同利用了不同的类名，代码不够简化

六、使用 Chrome 调试网页

使用 Chrome 调试网页会方便很多很多很多，直接在使用 Chrome 上修改数据可以更直观看到变化结果，若在VS中修改太慢太慢太慢

Chrome 调试网页具体方法：

https://blog.csdn.net/jim8757/article/details/527