第二天完成情况
只做了jd网页的顶部和底部的共同部分
今天所涉及的内容的介绍
1.1
开发前的准备工作
1.配置开发环境 sublime webstorm vscode Hbuilder atom
2.建立项目文件夹 为了将与项目相关的文件放在一块，便于管理和以后的维护
包括与项目相关的一些文件
主页或是首页 index.html default.html
Css文件夹 css文件的
base.css global.css
Images文件夹 用来放置网站中的所有的图片
Js文件
音频或是视频文件
3. 样式初始化
我们的结构中的标签都有默认的样式，在各个浏览器中的显示有可能不尽不同 ，为了保证网站风格的统一或是为了便于我们的开发或是维护，需要将所有的标签 原来的样式清掉，变成统一的样式风格，以便于我们的网站布局。
4. 分析网站构成
做网站的时候也有一个规范或是通例
布局的顺序一般是从上到下，从左到右
在写页面的时候，一般考虑使用标准流的元素，其次才使用浮动或是定位。
就在标准流元素当中，宽高是最稳定的，其实才使用padding,最后或者可以使用margin.
标准流： 一般像div,p这样的块级元素，自己独占一行，像span,a这样的行内元素或是img，input这样的行内块元素，可以一行显示多个，我们把这样的显示方式叫做标准流。normal flow
我们网站结构中的任何标签 都可以看成是一个盒模型，都可以设置宽高，只是有的元素设置了宽高之后，不起作用。
要想让行内元素的宽高起作用：
1. 将行内元素转换成块级元素或是行内块元素
2. 浮动 脱标
3. 定位 脱标
定位有四种：
Fixed absolute relative static
1.2 background 复合属性
mso-para-margin-left:0.0000gd;text-indent:28.0000pt;mso-char-indent-count:0.0000;">background-attachment: 是否滚动
background: 颜色 图片的链接 是否平铺 背景位置 是否滚动。
font: 复合属性
font-weight: 粗度 bold 700 200 500 也可以用数字来表示
font-size/line-height: 字体大小/行高
font-family: 字体样式
font-style: 字体风格 italic
font: 400 14px/30px “宋体”，
注意一点： 合写的font无论怎么简写，有两样一定得带上，
Font-size font-family:
1.3 相邻行内块元素的间距问题
布局的时候，相邻的行内块元素之间默认有几像素的外间距。
只能用浮动来解决这个问题。
1.4 Border-radius: 边框半径
有四个值：左上，右上，右下，左下
四个值为元素宽度或是高度的一半的时候，会将元素变成圆形或是椭圆形，峰值只能到达宽度或是高度的一半。
1.5 行内元素的margin
行内元素的左右margin是可以起作用的，但是上下的margin是不起作用的。
1.6 清除浮动
浮动的原因就是因为父盒子没有高度，原来的高度是靠标准流中的子元素撑起来，但是子元素浮动了之后 ，脱离标准流了，造成父级元素的高度为0;
- 给父盒子设置一个高度
- Clear: both
- Overflow: hidden 触发了BFC模式 也可以用来清除浮动
- 伪元素或是双伪元素清除法
.clearfix:before, .clearfix:after {
/*清除浮动，最好最标准的写法*/
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*IE/7/6*/ /*兼容IE6下的写法*/
}
1.7 定位的元素的层级
如果只给一个元素绝对定位，而不写trbl值的话，会以原位显示
定位(相对和绝对或固定)的元素都有一个层级的属性或是概念。如果定位了的相邻多个元素，在同一个位置的话，后面的元素默认会压住前面的元素。如果同样是定位了的元素，默认他们的层级都是0，只不过后面的元素会压住前面的元素。如果想让当前的元素显示在后面的元素之上，这个时候就需要改变层级的关系,用z-index来改变。
z-index的取值范围0---9999999，最好是正数，尽量不要用负数。
1.8 列表
ul li unordered list 无序列表
ol li ordered list 有序列表
dl dt dd
dl: difinition list 定义列表
dt difinition title 标题
dd difinition description 定义描述