本周主要制作了一个校园官网首页，以及初步了解了bootstrap，并尝试在网页制作中运用它，不得不说第一次用html还有css写这么长的东西确实很痛苦，但是总要有实践才能把自己学到的东西融会起来。
网页制作过程
-
这次的制作主要是照着校园官网去模仿，不需要自己设计（不敢想象自己设计会出现什么鬼东西），仔细观察再结合html的相关知识点可以发现，由<div>标签构成的页面代码是一块一块的排列在网站的页面的，我们在制作的过程中为了便于划分可以将他们按行和列逐层展开，所以首先得步骤就是将官网首页拆分，拆分思路如下：
网站的首页大多数是分块的，正如以下的大众点评首页截图
-
该页面拆分的结果是整体上分为三行，即：
1. 最上面的功能栏 2. 第二层背景为白色的搜索栏 3. 第三层各个站点的导航栏 - 下一步是对每个行进行列的划分，这是为了便于在操作的时候理清思路，就拿第一行来说，可以将文字的整体作为一列，在这一列上设置css属性让它居中并且设置宽度。
- 观察图片，文字这一列分为两部分，左边是定位坐标，右边是一些下拉菜单，为了便于理解，再在这一列中设置一行，然后将这一行分为两部分（两列），一部分靠右，一部分靠左，这样整体的框架就出来了
-
按照上述思路设计好框架之后，开始对框架进行修缮我们可以设置一个css类来标出每个框架的边界
.border{ border:3px; solid:yellow; }在想要进行操作的框框上面加上设置的边框类就可以这样就可以直观的进行操作了，操作框架的同时也要在其中写上相应的内容
- 写好框架与内容之后就是最激动人心的渲染了，渲染就是给框架还有内容的标签加上一系列的css属性还有js属性，需要什么样的功能就要去查找相应的语言用法，推荐采用外部引入的方法来进行css和js的使用，这个渲染的过程会异常的漫长...
-
在自己的制作过程中的一些小理解：
1.盒子模型的操作方法一定要灵活，要在脑子当中对盒子有一个清晰的概念熟悉从内到外的各个部分content、padding、border、margin，当设置四个方向的长度的时候，按照上右下左，的顺序进行调整,同时也可以利用具体的方向属性进行调整，还可以运用长度的正负进行调整，调整位置要有耐心 2.区分好边框的背景颜色以及文字的背景颜色，说白了还是盒子模型的问题 3.关于css文件中的各类的命名，当一个网页特别长的时候，各种复杂的css就开始变得乱花渐欲迷人眼，推荐大家采用英文命名，分等级命名，这样便于对于整体结构的把握与理解。网上有相应的命名规范，希望深入研究的小伙伴可以去搜。 4.在渲染的过程中会出现很多小的偏差，有可能文件和自己写的代码有十分大的出入，这个时候需要多看控制台，控制台的作用十分重要。 5.制作的过程很繁琐也很复杂，需要大家有耐心并且细心，在制作之前多思考，不要懒得动脑子，不要懒得动脑子，不要懒得动脑子！！ 6.注意劳逸结合。
入门bootstarp
- bootstrap：一个前端开发的框架，是目前很欢迎的框架，通过使用它可以让开发变得简洁
- 框架：就是做到一半的css+js文件，我们可以引用它来完成一些特效操作，从而调高开发的效率与质量
- 使用方式可以类比于c++里面的函数库，我们使用之前要先引用库，即在<head>标签里面插入如下代码
-
推荐把bootstrap下载到本地，这样检查的时候会比较快
' <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"' - 引用完库之后就要开始引用库里面的内容了，bootstrap可以实现很多的功能，在此不再赘述，推荐大家在学习的时候边看边做，这是一个实际操作型很强的东西（如果只看不做，眼：我看懂了；大脑：还可以；手：你俩行你俩来）
- 有了html还有css的基础，bootstrap就是一个不断应用深入理解的过程，切记熟能生巧，少说多练
本周总结
这一周感觉过的太快了，主要的事情就是在理解运用html，这一个阶段最大的感受就是需要多动脑、多思考，当把一个知识点理解的时候运用起来就好用多了，接下来的两周我会主要锻炼bootstrap，我会把他的每个小知识点总结下来，希望能不再生疏。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。