静态页面实例-京东商城01

　　在完成整个实例过程中遇到的知识点，可能会出现知识点比较跳跃，后面在做知识点的归整。

　　1. 开发前的准备工作

　　1.1 熟悉开发环境

　　　　常用的开发环境：sublime，webstorm，vscode，Hbuilder，atom等（我现在学习期间使用的是webstorm）

　　1.2 建立项目文件夹包括与项目相关的文件

　　　　1.2.1 主页或是首页：index.html或default.html

　　　　1.2.2css文件夹：存放stylesheet文件，常命名为base.css或global.css

　　　　1.2.3images文件夹：存放网站需要的所有的图片、精灵图等

　　　　1.2.4js文件夹：存放JavaScript文件

　　　　1.2.5其他音频或视频文件等

　　目的：为了将与项目有关的文件存放在一起，便于管理和以后的维护。

　　1.3 网站样式初始化

　　　　标签的默认样式，在各个浏览器中的显示有可能不同 ，为了用户感受，在不同浏览器显示相同的风格，需要将所有的标签原来的样式清掉，变成统一的样式风格，以便于网站的整体布局。

　　1.4 分析网站构成

　　　　布局的顺序一般是从上到下，从左到右。在写页面的时候，一般优先考虑使用标准流的元素，其次才使用浮动或是定位。在标准流元素当中，宽高是最稳定的，其次才是使用padding，最后可以使用margin。

　　2. CSS样式书写位置

　　2.1 行内式

　　　　直接书写在html标签内

　　2.2 内嵌式

　　　　写在同一个页面head部分的style标签中

　　　　如：

　　　　<style>
   　　　　 input { 
   　　 　　    outline-style: none ;
  　　　　  }   
   　　　　 textarea {
   　　　　     resize: none;
 　　　　   }
　　　　</style>

　　2.3 外链式

　　　　从外部引入到当前的页面当中，真正实现了结构和样式的分离。

　　　　如：

　　　　<link rel="stylesheet" href="css/base.css"/>

　　2.4 导入式

　　　　@实现，基本不使用。

　　3. 网站的快捷图标

　　每个网站的选项卡栏中都有各自的网站图标，常使用<link rel="shortcut icon" href="/favicon.ico" />来进行调用。

　　4. 通栏

　　通栏就是铺满整个屏幕，宽带为自适应每个浏览器的宽度。

　　5. 版心

　　所谓版心也就是页面中主要内容所在的区域，即页面正中的位置。

　　因为每台设备的分辨率不一致，因此显示网站的风格有可能不一样的，为了提高用户的体验，将网站的显示风格统一起来，因此需要给网站主要内容设置一个版心。

　　6. font复合属性

　　font-weight：设置文字的粗细；

　　font-size/行高：设置位置的尺寸/行高；

　　font-style：设置文字倾斜；

　　font-family：设置文字的字体。

　　7. 元素的实例化

　　就是给元素设置宽高之后，再给一个背景色或是边框，让此元素直观的显示出来。

　　8. 元素之间的转换

　　8.1 display

　　　　给元素设置display属性可以将元素转换成块级、行内块或行内元素。

　　8.2 定位

　　　　给元素设置定位（绝对定位或者固定定位），可以将元素转换成行内块元素。

　　8.3 浮动

　　　　给元素设置浮动，也可以将元素转换成行内块元素。

　　9. 定位问题

　　在发生嵌套时，需给子元素设置一个相对父元素位置的定位时，一般子元素设置绝对定位，父元素设置相对定位。

　　10.权重的问题

　　各类型的选择器的权重：

　　　　继承 < 类 < id < 行内 < !important

实例完成情况：