在写一个页面的时候最重要的就是布局了，所以当我们写一个静态页面时我们首先要分析，一个页面就是由一个盒子包着，而这些盒子里又有许许多多的小盒子，一个盒子套一个盒子。
HTML的结构（重点）
一对html标签里面嵌套一对head标签（给浏览器解析用的）和body标签（用户看的），head标签里面还嵌套了一对titlie标签（用户可以看见的）。
通配符选择器*
一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；
*{
        margin:0;

        padding:0;
}
以上代码表示清空所有的默认边距；

表格标题caption
<table width="800">
         <caption>表格标题标签</caption>
              <tr>
                     <th></th>
                     <th></th>
                     <th></th>
          </tr>
  </table>



文本线条装饰  text-decoration  （死记硬背）
text-decoration:none;没有线
text-decoration：underline；下划线
text-decoration:line-through; 中  划线/删除线
text-decoration:overline;   上划线


Css实现三角效果

01 设置一个盒子的宽高都为0
02 每一个边都要写不能省略
03 将不现实的边设置为transparent
div {
/*我们用css 边框可以模拟三角效果*/
width: 0; height: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid pink;
}
div {
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 10px;
     border-color: transparent transparent transparent red;
     font-size: 0;
     line-height: 0;
}
border-color: 上   右    下   左;不显示的区域透明，需要显示区域设置颜色，箭头的方向和方位英文相反；
上箭头：border-color:transparent transparent red transparent;
右箭头：border-color:transparent transparent transparent red;
下箭头：border-color:red transparent transparent transparent;
左箭头：border-color:transparent red transparent transparent;


元素的显示和隐藏（重点记住）

• 隐藏：display:none;
• 显示：display:block; 将隐藏的元素显示出来
一般情况下我们显示和隐藏配合定位属性实现一些列的小效果
让元素visibility显示与隐藏（了解）
占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
overflow溢出隐藏

CSS精灵技术

好处

• 使用css精灵技术可以减少对服务器的请求次数；
• 可以将多个小图标合并成一张图片，成为css精灵图或者css雪碧图；
Css精灵图的技术核心：

利用北京图片定位设置X轴（水平方向）和Y轴（垂直方向）的位置；
background-position: X轴   Y轴;
复合写法：background:背景颜色 url（背景图片路径） 是否平铺 X轴 Y轴；
使用精灵图的重要步骤：

第一步，精确测量盒子的宽高和在X轴，Y轴的位置
第二步，然后设置图片定位的X轴和Y轴的位置；

定位属性：
position 取值不同实现的效果不同
定位的分类
静态定位：position:static;（不用，自动忽略）
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;
相对定位：position:relative;
定位元素z-index堆叠顺序

用户界面-鼠标样式鼠标样式：cursor

小白（默认） cursor:default;
小手： cursor:pointer;  常用一般是用在一些提示要点击的样式，不能跳转的时候；
移动： cursor:move;
文本： cursor:text;
禁止： cursor:not-allowed;
取消表单默认的蓝色交互框（记住）

在写一个页面的时候最重要的就是布局了，所以当我们写一个静态页面时我们首先要分析，一个页面就是由一个盒子包着，而这些盒子里又有许许多多的小盒子，一个盒子套一个盒子。
HTML的结构（重点）
一对html标签里面嵌套一对head标签（给浏览器解析用的）和body标签（用户看的），head标签里面还嵌套了一对titlie标签（用户可以看见的）。
通配符选择器*
一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；
*{
        margin:0;

        padding:0;
}
以上代码表示清空所有的默认边距；

表格标题caption
<table width="800">
         <caption>表格标题标签</caption>
              <tr>
                     <th></th>
                     <th></th>
                     <th></th>
          </tr>
  </table>



文本线条装饰  text-decoration  （死记硬背）
text-decoration:none;没有线
text-decoration：underline；下划线
text-decoration:line-through; 中  划线/删除线
text-decoration:overline;   上划线


Css实现三角效果

01 设置一个盒子的宽高都为0
02 每一个边都要写不能省略
03 将不现实的边设置为transparent
div {
/*我们用css 边框可以模拟三角效果*/
width: 0; height: 0;
border-top: 10px solid red;
border-right: 10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid pink;
}
div {
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 10px;
     border-color: transparent transparent transparent red;
     font-size: 0;
     line-height: 0;
}
border-color: 上   右    下   左;不显示的区域透明，需要显示区域设置颜色，箭头的方向和方位英文相反；
上箭头：border-color:transparent transparent red transparent;
右箭头：border-color:transparent transparent transparent red;
下箭头：border-color:red transparent transparent transparent;
左箭头：border-color:transparent red transparent transparent;


元素的显示和隐藏（重点记住）

• 隐藏：display:none;
• 显示：display:block; 将隐藏的元素显示出来
一般情况下我们显示和隐藏配合定位属性实现一些列的小效果
让元素visibility显示与隐藏（了解）
占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
overflow溢出隐藏

CSS精灵技术

好处

• 使用css精灵技术可以减少对服务器的请求次数；
• 可以将多个小图标合并成一张图片，成为css精灵图或者css雪碧图；
Css精灵图的技术核心：

利用北京图片定位设置X轴（水平方向）和Y轴（垂直方向）的位置；
background-position: X轴   Y轴;
复合写法：background:背景颜色 url（背景图片路径） 是否平铺 X轴 Y轴；
使用精灵图的重要步骤：

第一步，精确测量盒子的宽高和在X轴，Y轴的位置
第二步，然后设置图片定位的X轴和Y轴的位置；

定位属性：
position 取值不同实现的效果不同
定位的分类
静态定位：position:static;（不用，自动忽略）
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;
相对定位：position:relative;
定位元素z-index堆叠顺序

用户界面-鼠标样式鼠标样式：cursor

小白（默认） cursor:default;
小手： cursor:pointer;  常用一般是用在一些提示要点击的样式，不能跳转的时候；
移动： cursor:move;
文本： cursor:text;
禁止： cursor:not-allowed;
取消表单默认的蓝色交互框（记住）