css的漂亮图片背景与简单的班级成绩表 ，，，

     css简单易懂又美观的制作

1 css的背景
background-color
background-image
background-repeat
background-position
background-repeat：no-repeat
background-size
background-origin
2.
background-color :背景颜色
background-image : 背景图片路径
background-repeat ： 背景水平位置
background-position ： 背景固定
background-repeat：no-repeat ： 背景不平铺
background-size ： 背景的大小
background-origin ：背景图像的定位区域
3.
background-origin
设置元素背景图片的原始开始位置

              background-clip
    背景
           border-box   从边框开始显示
           padding-box  从内边距开始显示
           content-box  从内容开始显示
           text         将背景剪切到文字里面去
 background-size: cover;
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
background-size: contain;
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

1
使用background-image来设置背景图片
语法：background-image:url(相对路径);
如果背景图片大于元素，默认会显示图片的左上角
如果背景图片和元素一样大，则会将背景图片全部显示
如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，
这样背景颜色将作为背景图片的底色
一般情况下设置背景图片时会同时指定一个背景颜色
2
background-repeat 用于设置背景颜色的重复方式
可选值：
repeat 默认值，背景图片会双方向重复（平铺）
no-repeat 背景图片不会重复，有多大就显示多大
repeat-x 背景图片沿水平方向重复
repeat-y 背景图片沿垂直方向重复

用表格做的成绩
body和html的标签都删除样式都在
班级成绩表

<style>
   
  tr{

      width: 600;
  }
  td{
      /* 设置一行的宽度和高度实现表格样式 */
      width: 93px;
      height: 20px;
      text-align: center;
      border: 0px;
  }
  .son{
     background-color: #A6A0A0;
  }
  .son1{
      background-color: #00FFFF;
  }
  .son2{
      background-color: #BAB98B;
  }
</style>
<!--  cellspacing="0" cellspadding="0"这行代码是防止表格样式改变-->
<table border="1" width="600px" height="144px" align="center" cellspacing="0" cellspadding="0">  
    <!-- tr代表这一行，td代表一行的每一格 -->
    <tr class="son">
        <td>姓名</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>理论</td>
        <td>实践</td>
        <td>总分</td>
    </tr>
    <tr class="son1">
        <td>学生001</td>
        <td>62</td>
        <td>72</td>
        <td>91</td>
        <td>131</td>
        <td>133</td>
        <td>489</td>
    </tr>
    /*设置一个类名用来接收表格的颜色*/
    <tr class="son2">
        <td>学生002</td>
        <td>61</td>
        <td>47</td>
        <td>77</td>
        <td>107</td>
        <td>93</td>
        <td>385</td>
    </tr>
    <tr class="son1">
        <td>学生003</td>
        <td>64</td>
        <td>79</td>
        <td>82</td>
        <td>114</td>
        <td>99</td>
        <td>438</td>
    </tr>
    <tr class="son2">
        <td>学生004</td>
        <td>70</td>
        <td>55</td>
        <td>82</td>
        <td>132</td>
        <td>85</td>
        <td>424</td>
    </tr>
    <tr class="son1"> 
        <td>学生005</td>
        <td>73</td>
        <td>93</td>
        <td>87</td>
        <td>125</td>
        <td>94</td>
        <td>472</td>
    </tr>
</table>

上面代码形成的结果图；

整体来说呢这个比较简单
第一部
第一部先设置表格，设置它的宽高，

代表着一行，上面图片一竖有六行所以先设置六个 代表这这一行包含着的几个，上面图有七个所以设置七个 最后就设置的宽高，然后改变每一行的颜色.