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>
上面代码形成的结果图;
整体来说呢这个比较简单
第一部
第一部先设置表格,设置它的宽高,