京东静态网页案例

一.制作过程
新建一个工程，对样式文件和图标文件进行链接，观察整个网页的大致布局，从大到小，从上到下，从左到右，搭建框架布局，选择合适的元素进行嵌套完成布局。
二.属性总结

1. display属性
   行级元素与块级元素的区别：
   块级元素可以自动换行，可以设置宽和高的属性
   行级元素不可以自动换行，不可以设置宽和高的属性
   块级元素和行级元素的转换：
   display:inline ：将块级元素转化为行级元素，此块级元素设置的宽高无效
   display:block ：将行级元素转化为块级元素，此行级元素自动换行，可以设置宽高
   display:inline-block ：将行级元素转化为块级元素，此行级元素不自动换行，可以设置宽高
   display：none;元素不被显示
2. margin：从自身框到另一个容器框之间的距离，就是容器外边距
   用法：
   margin-left:10px;左外边距
   margin-right:10px;右外边距
   margin-top:10px;上外边距
   margin-bottom:10px;下外边距
   margin:10px;上下左右统一外边距
   margin:10px 20px;上下，左右外边距
   margin:10px 20px 30px;上，左右，下外边距
   margin:10px 20px 30px 40px;上，右，下，左外边距
   技巧：margin:0 auto;表示元素在水平方向居中显示
3. padding：自身边框到自身内部另一个边框的距离，就是容器内边距，用法与margin相同。
4. 字体属性：
   font-size:12px;字体大小
   font-wight:bold;字体加粗
5. 文本属性
   color：red;文本颜色
   line-height:18px;行高，当line-height与height相等，文本垂直居中
   text-align:center;水平对齐方式，center，right，left
   letter-spacing:12px;字符间距
   text-decoration：none;无下划线，underline;有下划线；line-through;删除线
6. 背景属性
   backgroud-color:red;背景颜色
   backgroud-image:url(路径)；背景图片
   backgroud-repeat:no-repeat;图片的平铺方式
   backgroud-position:12px -12px;背景图片坐标，x坐标为正向右平移，x坐标为负向左平移，y坐标为正向下平移，y坐标为负向上平移
7. 列表属性
   list-style:none;去除无序列表的间距
8. cursor属性
   cursor:pointer;光标的形状
9. float属性
   使块级元素统一在一行内横排显示或者定位元素
   float:left;元素向左浮动，直到接触到左边的容器
   float:right;元素向右浮动，直到接触到右边的容器
10. overflow属性
    定义一处元素内容区的内容如何处理
    overflow:hidden;溢出隐藏