设置背景与表格

2018-08-13 本文已影响0人请叫我Bob

1：设置背景

简单的说几点吧

1图片小鱼界面大小，默认平铺
2背景移动与定位
3背景颜色
4表格的基本设置

1：可以同时设置背景颜色图片。color默认背景颜色。

渐变平铺设置。不设置X方向平铺，下方也会被拉长
background-repeat
repeat：默认值。图片左右上下平铺
no-repeat：只显示图片一次，不会被平铺
repeat-X：沿X轴水平平铺一张图片
repeat-Y：沿Y轴水平平铺一张图片

2：background-position写一个值另外一个值默认center

3：背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

提示：如果你打算使用背景图片，你需要紧记一下几点：

背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
背景图像是否与页面中的其他图象搭配良好。
背景图像是否与页面中的文字颜色搭配良好。
图像在页面中平铺后，看上去还可以吗？
对文字的注意力被背景图像喧宾夺主了吗？

4tr：表示表格中的行标记，属性有align：左中右三个值

td：列标记，align属性可以设置内容的位置

th：是第一行的标题

valign属性可以设置th和td，可以取值Top或者Bottom。

callpadding：内容与单元格边框的间距

cellspacing：防止文本超出边框

如果要使单元格实现跨行或者跨列功能，使用属性colspan和rowspan.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style type="text/css">
        table{
            width: 300px;   
            margin: 0 auto;
            border-collapse:collapse;
        }
        td{
            border: 1px solid block;
        }
    </style>

</head>
<body>
    <table border="1" width="40%" align="center">
        <tr>
            <td>名字</td>
            <td>住址</td>
            <td>学号</td>
            <td>职业</td>
        </tr>
        <tr>
            <td>老王</td>
            <td>隔壁</td>
            <td>666</td>
            <td>羞羞</td>
        </tr>
    </table>    
</body>
</html>