经过对HTML+CSS十多天的学习，已经初步实现了最初的目的，静态网页的制作。

经过几天的练习，对完成的项目有一些心得。

一、想清楚再做

首先做好网页的结构分析

先去网上找一些网站找页面模仿，分析一下结构，最初的想法太简单，没有考虑给导航栏加上链接，也没有考虑页面布局（导航栏、内容栏、目录栏怎样分空间），然后动手写，发现无法处理页面的切换问题；对导航栏、内容栏、目录栏布局的时候发现，一开始就没考虑布局的问题。于是删掉重写，这才想到了加链接，除了当前页面外，其余每个导航都要加链接；页面布局最好提前想好。真是教训......加了导航之后，每个页面都是很类似的，切换就好。

心得：

1、分析好结构，页面分成几个大的部分、各部分之间的关系

2、想一下页面切换的问题

3、考虑页面各大部分布局分布的问题

4、先画草稿、想好，再动手写

二、搭框架

根据分析后的结构搭建好网页的框架，把几个重要部分都写成<div>加上文字描述，用css实现页面的大体布局。搭框架越简单越好。

三、重置页面样式

浏览器自带有一些样式会干扰页面样式的设置，所以要margin、padding清除掉，现在有了css初始化文件，利用<link>直接链接到html里很方便。

四、css及html的一些细节

1、class、id的命名要注意，给每个部分取个恰当的名字确实需要斟酌

id的命名：这个页面最外层的div起名叫container ，标题栏那部分叫head，导航+内容+目录叫page

class得考虑到样式一致的内容都可以叫class

作业要求是让多用class，但是我直接用了很多标签还有id。。。。

2、css选择器，混合怎么写...

id为nav的带有miao类别的P标签 写法：#nav p.miao(因为类别是用来修饰p标签的，所以得先写p，再写p的类别)

3、padding和margin的区别

什么时候该用margin，什么时候用padding?

padding会改变元素自身的高度、宽度

margin是调整两个元素之间的距离

如果不确定用padding还是margin就把两个元素都填上背景色

4、margin:auto的妙用

可以让元素水平居中，前提是margin得有宽度。

5、内部页面链接怎么加

加链接是用a标签，如果像目录那样只是链接到同一个页面的不同部分是这样实现：

比如我想让“css选择器”这个目录链接到页面的某个部分，先给目标部分定义好id名称，然后再加链接

<a href="#链接目标部分的id名称">css选择器</a>

值得注意的是：

这样加了链接后只点“css选择器”这几个字链接有效，如果想把链接充满整个方块就要把a标签设置为 display: block 充满整个元素，这个还需要再理解看看。。

另外就是设置完链接后会发现会带有链接的默认样式，很丑，这就得用text-decoration: none去掉原来的样式，然后再设置自己想要的样式。

6、hover设置鼠标划过时候的样式

li:hover{}这个写法很特殊.......

7、鼠标点击的时候效果的改变

比如点击的时候让某个导航变成绿色，是在相应的li上设置了class="active"然后在css里设置样式。

最后做出来自己的页面，有成就感的同时感觉累不觉爱啊............前端真的是需要很细心、很细心的，最好还得有完美主义倾向。

经过对HTML+CSS十多天的学习，已经初步实现了最初的目的，静态网页的制作。

经过几天的练习，对完成的项目有一些心得。

一、想清楚再做

首先做好网页的结构分析

先去网上找一些网站找页面模仿，分析一下结构，最初的想法太简单，没有考虑给导航栏加上链接，也没有考虑页面布局（导航栏、内容栏、目录栏怎样分空间），然后动手写，发现无法处理页面的切换问题；对导航栏、内容栏、目录栏布局的时候发现，一开始就没考虑布局的问题。于是删掉重写，这才想到了加链接，除了当前页面外，其余每个导航都要加链接；页面布局最好提前想好。真是教训......加了导航之后，每个页面都是很类似的，切换就好。

心得：

1、分析好结构，页面分成几个大的部分、各部分之间的关系

2、想一下页面切换的问题

3、考虑页面各大部分布局分布的问题

4、先画草稿、想好，再动手写

二、搭框架

根据分析后的结构搭建好网页的框架，把几个重要部分都写成<div>加上文字描述，用css实现页面的大体布局。搭框架越简单越好。

三、重置页面样式

浏览器自带有一些样式会干扰页面样式的设置，所以要margin、padding清除掉，现在有了css初始化文件，利用<link>直接链接到html里很方便。

四、css及html的一些细节

1、class、id的命名要注意，给每个部分取个恰当的名字确实需要斟酌

id的命名：这个页面最外层的div起名叫container ，标题栏那部分叫head，导航+内容+目录叫page

class得考虑到样式一致的内容都可以叫class

作业要求是让多用class，但是我直接用了很多标签还有id。。。。

2、css选择器，混合怎么写...

id为nav的带有miao类别的P标签 写法：#nav p.miao(因为类别是用来修饰p标签的，所以得先写p，再写p的类别)

3、padding和margin的区别

什么时候该用margin，什么时候用padding?

padding会改变元素自身的高度、宽度

margin是调整两个元素之间的距离

如果不确定用padding还是margin就把两个元素都填上背景色

4、margin:auto的妙用

可以让元素水平居中，前提是margin得有宽度。

5、内部页面链接怎么加

加链接是用a标签，如果像目录那样只是链接到同一个页面的不同部分是这样实现：

比如我想让“css选择器”这个目录链接到页面的某个部分，先给目标部分定义好id名称，然后再加链接

<a href="#链接目标部分的id名称">css选择器</a>

值得注意的是：

这样加了链接后只点“css选择器”这几个字链接有效，如果想把链接充满整个方块就要把a标签设置为 display: block 充满整个元素，这个还需要再理解看看。。

另外就是设置完链接后会发现会带有链接的默认样式，很丑，这就得用text-decoration: none去掉原来的样式，然后再设置自己想要的样式。

6、hover设置鼠标划过时候的样式

li:hover{}这个写法很特殊.......

7、鼠标点击的时候效果的改变

比如点击的时候让某个导航变成绿色，是在相应的li上设置了class="active"然后在css里设置样式。

最后做出来自己的页面，有成就感的同时感觉累不觉爱啊............前端真的是需要很细心、很细心的，最好还得有完美主义倾向。