项目准备工作

1.1 项目准备工作

1，Hbuilder 配色及字体设置：可以在 工具栏中 —》 工具选项下—》 视觉主题设置—》 相应的修改及保存
2，Hbuilder 编辑器是以项目单位来管理我们要 写的内容，其中对我们来说 所谓的项目指的就是一个包含 img css html 的文件夹。
3，当我们想利用 hbuilder 来开发一个项目的时候 其实本质上就是将该项目的代码都用这个编辑器来进行管理。此时有二种做法：
a) 直接在编辑器当中新建一个项目。
b) 在 windows 中将所谓的项目建好，然后再动手拖拽到该编辑器的项目管理器中。

1.2 爱游网项目准备

1，在编辑器当中管理我们已经新建好的 项目 【相关的文件夹】
2，将需要资源都拷贝相应的目录下【公共的重置样式文件，图片文件，Js 插件文件】
3，新建属于自己的 css 及拷贝默认的重置 css 文件，然后将它们通过 link 的形式引入当前 Html 页面。

1.3 写页面的基本思路

其实我们所谓的写页面 就是先将 PSD 稿进行分块，然后把这些块看做是一个个独立的盒子，最后再用我们所学过的 HTML 标签 来代表这些盒子。然后再使用 CSS 给这些盒子设置外在的展示样式。

1.4 相关小知识点

1，link：css是 hbuilder生中 外链 css 语句的快捷操作。
2，标签类名 【diy.box】这是生成一个有类名盒子的操作
3，在代码编辑器中有如下几种常见的注释

A HTML 注释 <l— 只能用来住是写在 HTML 里的内容 -->
B CSS 注释 /* 用来住是写在 CSS 里内容 * / 【也称之为块注释】

4，建议大家在书写某个模块 CSS 样式的时候 尊循 从外往里从上往下的顺序。
5，在做网页大结构布局的时候 我们一般不推荐 定位布局。【一切都是为了页面书写尽可能的标准】
6，如果有一个父盒子 里面嵌囊了多个 子元素且这些个子元素的身上都具有浮动属性，那么默认情况下它们会造成 父元素高度塌陷的问题。
7，在 hbuilder 当中有很多生成 html 结构的快捷键：
a) 父元素>子元素 【ul>li–> ul 里 包裹 li 标签】
b) 标签*数字 【li *3—> 三个并列的 li 标签】
8，网页上的下拉结构 我们一般不会采用默认的 select 标签 而是通过用其它标签来进行自定义的模拟。
9，对于网页的 logo 来说 不论是图片还是文字 我们都会选择 h1 标签，因为它是唯一，一个页面当中只能出现一次，并且如果 logo 是一张图片 我们往往还采用 以图换字的做作。
10，以图换字的作法就是：将文字想办法隐藏，然后还把图片显示出来。之所以这样做的目的就是为了我们网页的 seo 优化。
11，text-indent 属性是专门来设置 首行文本缩进的。
12，背景图片和插入如何选择?
a) 背景图片写在 css 当中，而插入图片写在 html 当中。
b) 写在 css 里的内容我们都认为是 样式，修饰性的东西，而写在 html 里的我们都认为是网页当中很重的内容。
13，再给元素添加样式的时候 我们会刻意的去回避奇数值【由于早期浏览器在处理这样的数值是往往会出问题】
14，当我们使用精灵图片的时候 它里面的 X Y 轴的偏移量就不在是调用图片的位置 而是用于调用显示哪一个张图片的，所以这个时候如果想改变图片的位置就必须直接修改整个盒子的位置。
15，input 标签我们认为它是行内块元素，可以设置宽高及背景色，且默认情况下它会有一个边框而且这个边框的姐姐在所有的浏览器当中默认的大小并不是一样的，因此在使用的时候我们建议认为的重置一下。
16，如果给一个没有定义宽度值的盒子设置padding 它是不会在显示上撑大盒子的。